Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp 4 sample gulpfile.js. For a full explanation, have a look at https://www.webstoemp.com/blog/switching-to-gulp4/
"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;
@Showcase-Joz

This comment has been minimized.

Copy link

commented Nov 15, 2018

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!

@akmur

This comment has been minimized.

Copy link

commented Nov 20, 2018

Thanks for this

@cpriest

This comment has been minimized.

Copy link

commented Nov 20, 2018

Excellent sample posting, thank you,

@wadie

This comment has been minimized.

Copy link

commented Nov 21, 2018

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

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

commented Nov 27, 2018

@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

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

commented Nov 27, 2018

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

@inlook4air

This comment has been minimized.

Copy link

commented Dec 5, 2018

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

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

commented Dec 9, 2018

@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.

@cevhyruz

This comment has been minimized.

Copy link

commented Dec 17, 2018

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.

@yairEO

This comment has been minimized.

Copy link

commented Dec 17, 2018

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

@vaughn-taylor

This comment has been minimized.

Copy link

commented Dec 30, 2018

Line 75 is a repeat of line 72

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

commented Jan 2, 2019

@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.

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

commented Jan 2, 2019

@yairEO added

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

commented Jan 2, 2019

@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)

@sgarciachavez

This comment has been minimized.

Copy link

commented Jan 17, 2019

Thank you for this example.

@callumgrayson

This comment has been minimized.

Copy link

commented Jan 18, 2019

Thanks so much for this excellent example. So valuable!

@prr21

This comment has been minimized.

Copy link

commented Jan 19, 2019

Respect

@kevinmamaqi

This comment has been minimized.

Copy link

commented Jan 28, 2019

Thanks for sharing!

@katrobbb

This comment has been minimized.

Copy link

commented Jan 31, 2019

Thanks for this. So freaking helpful!

@bux23

This comment has been minimized.

Copy link

commented Feb 2, 2019

Thanks helped me migrate from Gulp 3x to 4

@davidlower

This comment has been minimized.

Copy link

commented Feb 3, 2019

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.

@davidlower

This comment has been minimized.

Copy link

commented Feb 3, 2019

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.

@RobinHoodCoder

This comment has been minimized.

Copy link

commented Feb 4, 2019

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

@jchck

This comment has been minimized.

Copy link

commented Feb 4, 2019

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.

@arunaravindpm

This comment has been minimized.

Copy link

commented Feb 5, 2019

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

@darkterminal

This comment has been minimized.

Copy link

commented Feb 12, 2019

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

@jhegner

This comment has been minimized.

Copy link

commented Feb 12, 2019

Thanks for sharing.

@maniac0s

This comment has been minimized.

Copy link

commented Feb 18, 2019

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?

@martinschaible

This comment has been minimized.

Copy link

commented Feb 21, 2019

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 ;-(

@weilinzung

This comment has been minimized.

Copy link

commented Mar 7, 2019

how do I import the exports task?

@scyfox

This comment has been minimized.

Copy link

commented Mar 11, 2019

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?

@scyfox

This comment has been minimized.

Copy link

commented Mar 11, 2019

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

:)

@tambaqui

This comment has been minimized.

Copy link

commented Mar 12, 2019

Thanks for sharing! Great code!

@sagarPakhrin

This comment has been minimized.

Copy link

commented Mar 17, 2019

Very helpful. Thanks for sharing

@mienphifull

This comment has been minimized.

Copy link

commented Mar 28, 2019

Excellent, Thank you very much.

@mattConn

This comment has been minimized.

Copy link

commented Mar 30, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.