Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp 4 sample 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);
}
// Tasks
gulp.task("images", images);
gulp.task("css", css);
gulp.task("js", gulp.series(scriptsLint, scripts));
gulp.task("jekyll", jekyll);
gulp.task("clean", clean);
// build
gulp.task(
"build",
gulp.series(clean, gulp.parallel(css, images, jekyll, "js"))
);
// watch
gulp.task("watch", gulp.parallel(watchFiles, browserSync));
@Showcase-Joz

This comment has been minimized.

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.

akmur commented Nov 20, 2018

Thanks for this

@cpriest

This comment has been minimized.

cpriest commented Nov 20, 2018

Excellent sample posting, thank you,

@wadie

This comment has been minimized.

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.

Owner

jeromecoupe commented Nov 27, 2018

@wadie Since the code is already transpiled to ES5 using babel, ùglify`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.

Owner

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.

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.

Owner

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.

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