@gentsagency/gulp-registry

Gulp registry

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
211Jun 15, 2021Jun 15, 2018Minified + gzip package size for @gentsagency/gulp-registry in KB

Readme

Gents Agency Gulp Registry

dependencies Status

This task registry provides a modern front-end workflow with modern tools and standards in mind. It's meant to be consumed by Gulp 4.

Installation

Install the registry through NPM:

npm i --save-dev gulp@^4.0.0 @gentsagency/gulp-registry

Create a gulpfile.js and point it to the registry.

const gulp = require('gulp');
const config = require('./gulp/config');
const Registry = require('@gentsagency/gulp-registry');

const tasks = new Registry(config);

gulp.registry(tasks);

Configuration

Find an example configuration file below

const buildPath = './public/assets';
const sourcePath = './gulp/assets';

module.exports = {
  css: {
    src: `${sourcePath}/css/*.css`,
    dest: `${buildPath}/css`,
    watch: [
      `${sourcePath}/css/**/*.css`,
      `${sourcePath}/css/*.css`,
    ],
  },
  favicons: {
    src: {
      png: `${sourcePath}/favicons/favicon.png`,
      svg: `${sourcePath}/favicons/favicon.svg`,
    },
    dest: `${buildPath}/favicons`,
  },
  icons: {
    src: `${sourcePath}/icons/*.svg`,
    dest: `${buildPath}/icons`,
    filename: 'icons.svg',
  },
  images: {
    src: `${sourcePath}/images/**`,
    dest: `${buildPath}/images`,
  },
  js: {
    src: `${sourcePath}/js/*.js`,
    dest: `${buildPath}/js`,
    watch: [
      `${sourcePath}/js/**/*.js`,
      `${sourcePath}/js/*.js`,
    ],
  },
};

Usage

$ gulp runs a one-time build.

$ gulp watch starts the watcher.

Some tasks aren't added to the default task and have to be run explicitely.
You can do so by running gulp ${taskname}, for example: $ gulp favicons.

Default tasks

Some tasks are registered by default:

Extending the registry

Adding a custom task is straight-forward:

tasks.set('my-task', myTask());

You can pass two options:

tasks.set('my-task', myTask(), { default: true, watch: 'glob' })
  • default (default: true) - if the task should run when gulp or gulp default is run
  • watch (mixed: string or array of strings) - glob (or array of globs) to watch for changes when gulp watch is run

Troubleshooting

The favicons task doesn't work

Make sure you have graphicsmagick or imagemagick installed.

brew install graphicsmagick

Upgrading to Gulp 4 broke things for me!

Re-install Gulp globally, your older projects should still work (using the Gulp 3 version installed in the projects /node_modules)

npm rm -g gulp
rm /usr/local/share/man/man1/gulp.1
npm i -g gulp-cli

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.