Created
May 6, 2020 14:18
-
-
Save M-O-Z-G/5f559cf9d76680599bf024506071adf4 to your computer and use it in GitHub Desktop.
Gulp 4.x config template. There're a lot of key changes between Gulp 3.x and 4.x. Here's example of code written with respect of Gulp 4.x requirements and ECMAScript 6.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"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