Gulp 4 sample gulpfile.js. For a full explanation, have a look at https://www.webstoemp.com/blog/switching-to-gulp4/

webstoemp-gulpfile.js

"use strict";

// Load plugins
const autoprefixer = require("autoprefixer");
const browsersync = require("browser-sync").create();
const cp = require("child_process");
const cssnano = require("cssnano");
const del = require("del");
const eslint = require("gulp-eslint");
const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const newer = require("gulp-newer");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss");
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const webpack = require("webpack");
const webpackconfig = require("./webpack.config.js");
const webpackstream = require("webpack-stream");

// BrowserSync
function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: "./_site/"
    },
    port: 3000
  });
  done();
}

// BrowserSync Reload
function browserSyncReload(done) {
  browsersync.reload();
  done();
}

// Clean assets
function clean() {
  return del(["./_site/assets/"]);
}

// Optimize Images
function images() {
  return gulp
    .src("./assets/img/**/*")
    .pipe(newer("./_site/assets/img"))
    .pipe(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.jpegtran({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true
            }
          ]
        })
      ])
    )
    .pipe(gulp.dest("./_site/assets/img"));
}

// CSS task
function css() {
  return gulp
    .src("./assets/scss/**/*.scss")
    .pipe(plumber())
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(gulp.dest("./_site/assets/css/"))
    .pipe(rename({ suffix: ".min" }))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest("./_site/assets/css/"))
    .pipe(browsersync.stream());
}

// Lint scripts
function scriptsLint() {
  return gulp
    .src(["./assets/js/**/*", "./gulpfile.js"])
    .pipe(plumber())
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
}

// Transpile, concatenate and minify scripts
function scripts() {
  return (
    gulp
      .src(["./assets/js/**/*"])
      .pipe(plumber())
      .pipe(webpackstream(webpackconfig, webpack))
      // folder only, filename is specified in webpack config
      .pipe(gulp.dest("./_site/assets/js/"))
      .pipe(browsersync.stream())
  );
}

// Jekyll
function jekyll() {
  return cp.spawn("bundle", ["exec", "jekyll", "build"], { stdio: "inherit" });
}

// Watch files
function watchFiles() {
  gulp.watch("./assets/scss/**/*", css);
  gulp.watch("./assets/js/**/*", gulp.series(scriptsLint, scripts));
  gulp.watch(
    [
      "./_includes/**/*",
      "./_layouts/**/*",
      "./_pages/**/*",
      "./_posts/**/*",
      "./_projects/**/*"
    ],
    gulp.series(jekyll, browserSyncReload)
  );
  gulp.watch("./assets/img/**/*", images);
}

// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.series(clean, gulp.parallel(css, images, jekyll, js));
const watch = gulp.parallel(watchFiles, browserSync);

// export tasks
exports.images = images;
exports.css = css;
exports.js = js;
exports.jekyll = jekyll;
exports.clean = clean;
exports.build = build;
exports.watch = watch;
exports.default = build;

great file and great help thanks. v 3.9.1 to 4 killed me :(

i think the imagemin format is the old style. therefore, not working!

Thanks for this

Excellent sample posting, thank you,

Shouldn't gulp-uglify-es be used instead of uglify in order to support ES6 ?

@wadie Since the code is already transpiled to ES5 using babel, uglify is fine. Also, if you use webpack in production mode you don't need uglify since the code minification will already be done. You can have a look at the full code on Github to get a better idea. https://github.com/jeromecoupe/jeromecoupe.github.io

@Showcase-Joz updated the gist with my site's latest version, which includes the new imagemin formatting. Thanks for the heads up

After running gulp watch it throws the issue - Cannot find module './webpack.config.js'. Can you help me with this ?

@inlook4air I am using webpack-stream and webpack to handle JS transpilation an module loading. Webpack needs a webpack.config.js configuration file at the root of your project. You can have a look at the very simple configuration I use here https://github.com/jeromecoupe/jeromecoupe.github.io or make one to suit your needs based on the Webpack doc.

from gulp 4 docs:

In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won't work.

I would expect a default task to be defined (for development)

Line 75 is a repeat of line 72

@cevhyruz modified the file to use CommonJS exports ... also edited the blogpost to reflect it ... and removed link to this gist, linking instead to the gulpfile of the site on Github.

@yairEO added

@vaughn-taylor This is intentional in this case. I want two CSS files to be written: one just compiled with Sass in expanded style and another one, minified and with profixes using postCSS plugins (namely autoprefixer and cssnano)

Thank you for this example.

Thanks so much for this excellent example. So valuable!

Respect

Thanks for sharing!

Thanks for this. So freaking helpful!

Thanks helped me migrate from Gulp 3x to 4

Hi, thanks for posting.

I have a few questions for the author @jeromecoupe if you don't mind. I am farely familiar with gulp now - but certainly not an expert. Converting over to gulp4 has been a headache in regards to the jekyll build. It just made my build time really slow 4-5 seconds in some cases.

However my question is this. You have an assets folder and you're pushing all your files straight into _site folder. So _site folder holds all your important files now (compressed images, js and css etc). Now we know that this gets wiped and deleted everytime jekyll builds (it is a temp folder), but as long as gulp is also running it's task the folder still holds the latest 'important' files. But what do you do when pushing your site live or to Github or wherever. I host my site on netlify and they say ignore the _site folder. If I do that then all my important, 'gulp changed files' will be lost.

So what is your workflow in this regard? Thanks for the time. I appreciate it.

The other issue I am having with this build, which I really want to work because it is very simple.

assets > scss
pipes to
_site > css

But because assets folder does not have an underscore '_' jekyll will compile the assets folder into the _site folder anyway. So what actually happens is the CSS is updated and refreshed inside _site folder. But then jekyll brings the asset folder in as well. But the asset folder does not have a CSS folder, it only have a scss folder. So the asset folder outside of _site replaces the _site asset folder. So in affect it deletes the compiled css. So I am REALLY intrigued how you got this to work. Because in theory it shouldn't.

Again thanks for the time.

Great stuff. Good readable code. And no annoying old gulp stuff.

Hey @Davidlower -

Regarding your first Q: the content of the _site directory will need to be built using Gulp at some point.
This can either be done locally on your machine the same way you compile _site dir for local development and then the entire _site dir needs to be deployed as is to your server.
Or you can assemble the contents of _site remotely using a continuous integration tool like Travis CI or by running Node/Gulp directly on your server.

Regarding your second Q: Check out the Jekyll Docs on how to configure the exclusion of directories & files from Jekyll running any conversions on them.

Hi @jeromecoupe,

Here am trying to create Gulp file where i can feed multiple Watch points and multiple destinations. Below is a Stackoverflow question i posted. Any help is appreciated.

I think am unable to figure out how to pass watchpoints & destinations as arguments , and using those to run the gulp watch task.

https://stackoverflow.com/questions/54516035/how-to-create-a-gulp-file-with-reusable-functions-multiple-watch-points-mult

Hi dude! 😃 Thanks for sharing..
Gulp 4 almost killed me 😢

Thanks for sharing.

Is there somewhere an explanation in detail how this file works? I especially struggle with understanding the clean() function. I tried to run it within the watch task but deleted files are never removed, it only works when I run gulp build but I want to run it when gulp watch is running, is this possible?

Thanks for sharing this great code, which i'm using now partially.

I was looking for solutions to get "gulp.watch" running. I always faced errors.
The solution: "gulp.watch" throws errors if you're working on a mapped network drive. After copying the whole project to a local drive, everything works. This is annyoing ;-(

how do I import the exports task?

Thanks for sharing.

It's always a great starting point having a reference used like a pro.

I had an issue with "dest()" with dest.on is not a function
I tried adding const dest = require("gulp-dest"); at the plugins' list but it made no difference.
Any help?

Hello again.

Found a fix for my previous issue:
dest isn't the issue. It's the line below that made my day terrible.
I installed the wrong plugin.
First, postCss needs autoprefixer plugin not the gulp-autoprefixer.
Change that and it works like wonder

:)

Thanks for sharing! Great code!

Very helpful. Thanks for sharing

Excellent, Thank you very much.

So no more gulp.task()? Looks cleaner I suppose.

Relatively new to frontend, and extremely new to JavasScript. I was hooked on the potential of Gulp after messing around with it for a bit, and this example was instrumental in helping me get my own gulpfile together. Thank you!

Thanks a lot man, I'm new to gulp and the course I'm doing the dude is using gulp v3. This will be helpful.

I get the following error when I run npm run gulp:

[07:18:36] Using gulpfile /usr/src/app/gulpfile.js
[07:18:36] Starting 'default'...
[07:18:36] Starting 'clean'...
[07:18:36] The following tasks did not complete: default, clean
[07:18:36] Did you forget to signal async completion?
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jsite@1.0.0 gulp: gulp
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jsite@1.0.0 gulp script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I fixed the problem updating the clean function from:

// Clean assets
function clean() {
return del(["./_site/assets/"]);
}

to

// Clean assets
function clean(done) {
del(["./_site/assets/"]);
done()
}

EDITED: It was a problem of my environment. I was using del v1.0.0 instead of del v4.1.1. Updating the version fixed the problem. Now the original code works perfect.

@espurnes glad it fixed it for you. It sounds a bit strange that this is needed though, last I checked del returns a promise and that should normally be enough to signal async completion.

https://www.npmjs.com/package/del
https://gulpjs.com/docs/en/getting-started/async-completion

@jeromecoupe I'm reading the gulp 4 guide to better understand what is happening. No one have argued about your code, so probably is a misconfiguration of my environment.

Thank you for the links. I'll take a look to them.
I'll post again if I get a clean execution with your code.

@jeromecoupe I found the problem. I was using del version 1.0.0 instead of v4.1.1 ...
Now npm run gulp clean works as spected and with no errors.

Thank you

Great sample. It helped me to upgrade my v3 gulpfile to v4 entirely. Thank you...

Awesome Post! I had a hard time updating my files from 3.9 to 4.0. Thanks for sharing!!

@zdimaz your code looks like it is missing a few things. Most of your named functions should return streams. If you are not familiar with Gulp and working with files, the official "Getting started" doc is a good start, here is the page on working with files

@jeromecoupe
No !
I use gulp 3 > awesome works
I triyed update to new all tasks, but no create build folder (build task) ((
Sorry for my ENGLISH)

@jeromecoupe Hey thanks for your help!
How to use exports.taskname with tasks named like styles:build, styles:lint… ?

@yoanmalie short answer, use camelCase instead to name your functions and then compose main tasks using parallel or series. I basically try to follow what the documentation recommends

Thank you a lot for sharing! This helped me so much, specially your article "Switching to Gulp 4".

Great article, thanks for putting it all into a single place and written in a easy-to-navigate manner.

Hi Mr. Jérôme Coupé

This gulpfile.js template is what Im looking for. I have been struggling to install gulp in my existing react 16.9 project.

Can I see your package.json?

@kennblvnp Thanks for the kind words. All required packages are listed at the top of the gulpfile. Both the old version of my site (where this came from originally) and the new one are publicly available on Github so that might help too. V1 is on the v1-backup branch.
https://github.com/jeromecoupe/webstoemp/blob/v1-backup/gulpfile.js

thank you so mush!
It's help a lot!

Thank you so much for this! I spent so long trying to figure out Gulp 4 after Gulp 3.9 but this made it so much clearer.

Am new to gulp, but am just curious, where do you import or use the exported functions. Thanks for sharing

@myquery The short answer is that you don't import when using a singe file. CommonJS exports are just Gulp4's way to expose tasks to the CLI to make them public. Non exported tasks are considered private (used only as subtasks) https://gulpjs.com/docs/en/getting-started/creating-tasks#exporting

That being said, you can require / alias them in your main file if your main file is becoming too big / complex. You can have a look at the code of my own site for an example https://github.com/jeromecoupe/webstoemp/blob/master/gulpfile.js

Thank you, this is a perfect reference point.

Thanks, but I have a suggestion that it would really help if you can add sample folder structure and text file with commands so it can we started by anyone.

Thanks a lot for this, tremendous help when going from v.3.9.1 to v4.x of gulp!

It finally worked, thanks a lot!

Thanks a lot. Helped me to upgrade to v4 of gulp

Thank you a lot for sharing! This helped me so much.

I'm getting the error:
imagemin.jpegtran is not a function

Any idea?

@evasoek yes. imagemin stopped using jpegtran a while ago in favour of mozjpeg.

This is an old Gist and you might want to look at the doc of the various plugins used.

// Optimize Images
function images() {
  return gulp
    .src("./assets/img/**/*")
    .pipe(newer("./_site/assets/img"))
    .pipe(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        // the line below is the one that you likely have to change
        imagemin.mozjpeg({ quality: 75, progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true
            }
          ]
        })
      ])
    )
    .pipe(gulp.dest("./_site/assets/img"));
}

Despite that, basic principles for Gulp 4 have stayed the same so this is still quite relevant. I ams till using Gulp (in combination with Webpack fr JS) on my personal site, which is available on Github if you are interested.

@evasoek yes. imagemin stopped using jpegtran a while ago in favour of mozjpeg.

This is an old Gist and you might want to look at the doc of the various plugins used.

// Optimize Images
function images() {
  return gulp
    .src("./assets/img/**/*")
    .pipe(newer("./_site/assets/img"))
    .pipe(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        // the line below is the one that you likely have to change
        imagemin.mozjpeg({ quality: 75, progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true
            }
          ]
        })
      ])
    )
    .pipe(gulp.dest("./_site/assets/img"));
}

Despite that, basic principles for Gulp 4 have stayed the same so this is still quite relevant. I ams till using Gulp (in combination with Webpack fr JS) on my personal site, which is available on Github if you are interested.

Yes I figured, thanks! I got it to work eventually, so it's fine. 😊