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

Showcase-Joz 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

akmur commented Nov 20, 2018

Thanks for this

@cpriest

This comment has been minimized.

Copy link

cpriest commented Nov 20, 2018

Excellent sample posting, thank you,

@wadie

This comment has been minimized.

Copy link

wadie 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

jeromecoupe 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

jeromecoupe 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

inlook4air 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

jeromecoupe 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

cevhyruz 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

yairEO commented Dec 17, 2018

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

@vaughn-taylor

This comment has been minimized.

Copy link

vaughn-taylor commented Dec 30, 2018

Line 75 is a repeat of line 72

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

jeromecoupe 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

jeromecoupe commented Jan 2, 2019

@yairEO added

@jeromecoupe

This comment has been minimized.

Copy link
Owner Author

jeromecoupe 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

sgarciachavez commented Jan 17, 2019

Thank you for this example.

@callumgrayson

This comment has been minimized.

Copy link

callumgrayson commented Jan 18, 2019

Thanks so much for this excellent example. So valuable!

@prr21

This comment has been minimized.

Copy link

prr21 commented Jan 19, 2019

Respect

@kevinmamaqi

This comment has been minimized.

Copy link

kevinmamaqi commented Jan 28, 2019

Thanks for sharing!

@katrobbb

This comment has been minimized.

Copy link

katrobbb commented Jan 31, 2019

Thanks for this. So freaking helpful!

@bux23

This comment has been minimized.

Copy link

bux23 commented Feb 2, 2019

Thanks helped me migrate from Gulp 3x to 4

@davidlower

This comment has been minimized.

Copy link

davidlower 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

davidlower 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

RobinHoodCoder commented Feb 4, 2019

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

@jchck

This comment has been minimized.

Copy link

jchck 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

arunaravindpm 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

darkterminal commented Feb 12, 2019

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

@jhegner

This comment has been minimized.

Copy link

jhegner commented Feb 12, 2019

Thanks for sharing.

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