Skip to content

Instantly share code, notes, and snippets.

@eliasfaical
Forked from jeromecoupe/webstoemp-gulpfile.js
Created April 22, 2019 13:09
Show Gist options
  • Save eliasfaical/7f528e14521f4b0553d1378dc4f1943b to your computer and use it in GitHub Desktop.
Save eliasfaical/7f528e14521f4b0553d1378dc4f1943b to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment