Automate and enhance workflow.

Install Gulp

npm install gulp-cli -g
npm install --dev gulp

Basic gulpfile.js

function defaultTask(cb) { cb() }
export.default = defaultTask;

Tasks

function privateTask(cb) {cb()}
function publicTask(cb) {cb()}

exports.build = publicTask;
exports.default = series(privateTask, publicTask);

Compose Tasks

exports.build = series(
	clean, 
	parallel(javascript, css), 
	publish
);

Asynchronous Tasks 🔗

const { src, dest } = require('gulp');

function streamTask() {
  return src('*.js')
    .pipe(dest('output'));
}

function callbackError(cb) {
  // `cb()` should be called by some async work
  cb(new Error('kaboom'));
}

async function asyncAwaitTask() {
  const { version } = JSON.parse(fs.readFileSync('package.json', 'utf8'));
  console.log(version);
  await Promise.resolve('some result');
}

exports.default = streamTask;
exports.default = callbackError;
exports.default = asyncAwaitTask;

Working with Files

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel()) // Transform by plugin
    .pipe(src('vendor/*.js')) // Add more files
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

Globs

'*.js' // any .js within one directory
'scripts/**/*.js' // any .js nested directory within scripts
'!scripts/vendor/*.js' // exclude js in vendor

Watching Files

exports.default = function() {
	watch('src/*.css', css);
	watch('src/*.js', series(clean, javascript));
}

Plugins/Modules

Gulp uses plugins to transform streams. If not transform is needed, use non-plugin module.