Skip to content

Instantly share code, notes, and snippets.

@timothyis
Last active August 21, 2024 00:29
Show Gist options
  • Save timothyis/cc7d79d1dad0622a9f9c to your computer and use it in GitHub Desktop.
Save timothyis/cc7d79d1dad0622a9f9c to your computer and use it in GitHub Desktop.
Gulp 4, ES6 gulpfile example
// Gulp module imports
import {src, dest, watch, parallel, series} from 'gulp';
import del from 'del';
import livereload from 'gulp-livereload';
import sass from 'gulp-sass';
import minifycss from 'gulp-minify-css';
import jade from 'gulp-jade';
import gulpif from 'gulp-if';
import babel from 'gulp-babel';
import yargs from 'yargs';
// Build Directories
// ----
const dirs = {
src: 'src',
dest: 'build'
};
// File Sources
// ----
const sources = {
styles: `${dirs.src}/**/*.scss`,
views: `${dirs.src}/**/*.jade`,
scripts: `${dirs.src}/**/*.js`
};
// Recognise `--production` argument
const argv = yargs.argv;
const production = !!argv.production;
// Main Tasks
// ----
// Styles
export const buildStyles = () => src(sources.styles)
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulpif(production, minifycss()))
.pipe(dest(dirs.dest))
.pipe(livereload());
// Views
export const buildViews = () => src(sources.views)
.pipe(jade())
.pipe(dest(dirs.dest))
.pipe(livereload());
// Scripts
export const buildScripts = () => src(sources.scripts)
.pipe(babel({ presets: ['es2015'] }))
.pipe(dest(dirs.dest))
.pipe(livereload());
// Clean
export const clean = () => del(['build']);
// Watch Task
export const devWatch = () => {
livereload.listen();
watch(sources.styles, buildStyles);
watch(sources.views, buildViews);
watch(sources.scripts, buildScripts);
};
// Development Task
export const dev = series(clean, parallel(buildStyles, buildViews, buildScripts), devWatch);
// Serve Task
export const build = series(clean, parallel(buildStyles, buildViews, buildScripts));
// Default task
export default dev;
@dotherightthing
Copy link

Great example thanks. This really helped with the 3.9.1 to 4.0.2 migration of my Gulpfile.

@craigphicks
Copy link

craigphicks commented Aug 31, 2019

I'm curious how you avoid hanging with the Did you forget to signal async completion? message.
Is it always ending with livereload(), del(), or watch(), that does the trick?
Or related to using babel?
For reference see https://stackoverflow.com/a/36899424/4376643 .

@leopires
Copy link

Thank you very much for this script sample.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment