Wijs Frontend Gulp Tasks

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 @wijs/frontend-gulp-tasks

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

const gulp = require('gulp');
const config = require('./gulp/config');
const Registry = require('@wijs/frontend-gulp-tasks');

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 = {
  clean: {
    dest: buildPath,
  },
  css: {
    src: `${sourcePath}/sass/*.scss`,
    dest: `${buildPath}/css`,
    watch: [
      `${sourcePath}/sass/**/*.scss`
    ],
  },
  js: {
    src: `${sourcePath}/js/*.js`,
    dest: `${buildPath}/js`,
    watch: [
      `${sourcePath}/js/**/*.js`
    ],
  },
  copy: {
    src: `${sourcePath}/copy/**/*`,
    dest: `${buildPath}`,
  },
};

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

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