"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; |
This comment has been minimized.
This comment has been minimized.
Thanks for this |
This comment has been minimized.
This comment has been minimized.
Excellent sample posting, thank you, |
This comment has been minimized.
This comment has been minimized.
Shouldn't |
This comment has been minimized.
This comment has been minimized.
@wadie Since the code is already transpiled to ES5 using babel, |
This comment has been minimized.
This comment has been minimized.
@Showcase-Joz updated the gist with my site's latest version, which includes the new |
This comment has been minimized.
This comment has been minimized.
After running gulp watch it throws the issue - Cannot find module './webpack.config.js'. Can you help me with this ? |
This comment has been minimized.
This comment has been minimized.
@inlook4air I am using webpack-stream and webpack to handle JS transpilation an module loading. Webpack needs a |
This comment has been minimized.
This comment has been minimized.
from gulp 4 docs:
|
This comment has been minimized.
This comment has been minimized.
I would expect a |
This comment has been minimized.
This comment has been minimized.
Line 75 is a repeat of line 72 |
This comment has been minimized.
This comment has been minimized.
@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. |
This comment has been minimized.
This comment has been minimized.
@yairEO added |
This comment has been minimized.
This comment has been minimized.
@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) |
This comment has been minimized.
This comment has been minimized.
Thank you for this example. |
This comment has been minimized.
This comment has been minimized.
Thanks so much for this excellent example. So valuable! |
This comment has been minimized.
This comment has been minimized.
Respect |
This comment has been minimized.
This comment has been minimized.
Thanks for sharing! |
This comment has been minimized.
This comment has been minimized.
Thanks for this. So freaking helpful! |
This comment has been minimized.
This comment has been minimized.
Thanks helped me migrate from Gulp 3x to 4 |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
The other issue I am having with this build, which I really want to work because it is very simple. assets > scss 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. |
This comment has been minimized.
This comment has been minimized.
Great stuff. Good readable code. And no annoying old gulp stuff. |
This comment has been minimized.
This comment has been minimized.
Hey @Davidlower - Regarding your first Q: the content of the 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. |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
Hi dude! |
This comment has been minimized.
This comment has been minimized.
Thanks for sharing. |
This comment has been minimized.
This comment has been minimized.
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? |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
how do I import the |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
Hello again. Found a fix for my previous issue: :) |
This comment has been minimized.
This comment has been minimized.
Thanks for sharing! Great code! |
This comment has been minimized.
This comment has been minimized.
Very helpful. Thanks for sharing |
This comment has been minimized.
This comment has been minimized.
Excellent, Thank you very much. |
This comment has been minimized.
This comment has been minimized.
So no more gulp.task()? Looks cleaner I suppose. |
This comment has been minimized.
This comment has been minimized.
Relatively new to frontend, and extremely new to JavasScript. I was hooked on the potential of Gulp after messing around with it for a bit, and this example was instrumental in helping me get my own gulpfile together. Thank you! |
This comment has been minimized.
This comment has been minimized.
Thanks a lot man, I'm new to gulp and the course I'm doing the dude is using gulp v3. This will be helpful. |
This comment has been minimized.
This comment has been minimized.
I get the following error when I run npm run gulp: [07:18:36] Using gulpfile /usr/src/app/gulpfile.js I fixed the problem updating the clean function from: // Clean assets to // Clean assets EDITED: It was a problem of my environment. I was using del v1.0.0 instead of del v4.1.1. Updating the version fixed the problem. Now the original code works perfect. |
This comment has been minimized.
This comment has been minimized.
@espurnes glad it fixed it for you. It sounds a bit strange that this is needed though, last I checked https://www.npmjs.com/package/del |
This comment has been minimized.
This comment has been minimized.
@jeromecoupe I'm reading the gulp 4 guide to better understand what is happening. No one have argued about your code, so probably is a misconfiguration of my environment. Thank you for the links. I'll take a look to them. |
This comment has been minimized.
This comment has been minimized.
@jeromecoupe I found the problem. I was using del version 1.0.0 instead of v4.1.1 ... Thank you |
This comment has been minimized.
This comment has been minimized.
Great sample. It helped me to upgrade my v3 gulpfile to v4 entirely. Thank you... |
This comment has been minimized.
This comment has been minimized.
Awesome Post! I had a hard time updating my files from 3.9 to 4.0. Thanks for sharing!! |
This comment has been minimized.
This comment has been minimized.
@zdimaz your code looks like it is missing a few things. Most of your named functions should |
This comment has been minimized.
This comment has been minimized.
@jeromecoupe |
This comment has been minimized.
This comment has been minimized.
@jeromecoupe Hey thanks for your help! |
This comment has been minimized.
This comment has been minimized.
@yoanmalie short answer, use camelCase instead to name your functions and then compose main tasks using parallel or series. I basically try to follow what the documentation recommends |
This comment has been minimized.
This comment has been minimized.
Thank you a lot for sharing! This helped me so much, specially your article "Switching to Gulp 4". |
This comment has been minimized.
This comment has been minimized.
Great article, thanks for putting it all into a single place and written in a easy-to-navigate manner. |
This comment has been minimized.
This comment has been minimized.
Hi Mr. Jérôme Coupé This gulpfile.js template is what Im looking for. I have been struggling to install gulp in my existing react 16.9 project. Can I see your package.json? |
This comment has been minimized.
This comment has been minimized.
@kennblvnp Thanks for the kind words. All required packages are listed at the top of the gulpfile. Both the old version of my site (where this came from originally) and the new one are publicly available on Github so that might help too. V1 is on the |
This comment has been minimized.
This comment has been minimized.
thank you so mush! |
This comment has been minimized.
This comment has been minimized.
Thank you so much for this! I spent so long trying to figure out Gulp 4 after Gulp 3.9 but this made it so much clearer. |
This comment has been minimized.
This comment has been minimized.
Am new to gulp, but am just curious, where do you import or use the exported functions. Thanks for sharing |
This comment has been minimized.
This comment has been minimized.
@myquery The short answer is that you don't import when using a singe file. CommonJS exports are just Gulp4's way to expose tasks to the CLI to make them public. Non exported tasks are considered private (used only as subtasks) https://gulpjs.com/docs/en/getting-started/creating-tasks#exporting That being said, you can require / alias them in your main file if your main file is becoming too big / complex. You can have a look at the code of my own site for an example https://github.com/jeromecoupe/webstoemp/blob/master/gulpfile.js |
This comment has been minimized.
This comment has been minimized.
Thank you, this is a perfect reference point. |
This comment has been minimized.
This comment has been minimized.
Thanks, but I have a suggestion that it would really help if you can add sample folder structure and text file with commands so it can we started by anyone. |
This comment has been minimized.
This comment has been minimized.
Thanks a lot for this, tremendous help when going from v.3.9.1 to v4.x of gulp! |
This comment has been minimized.
This comment has been minimized.
It finally worked, thanks a lot! |
This comment has been minimized.
This comment has been minimized.
Thanks a lot. Helped me to upgrade to v4 of gulp |
This comment has been minimized.
This comment has been minimized.
Thank you a lot for sharing! This helped me so much. |
This comment has been minimized.
This comment has been minimized.
I'm getting the error: Any idea? |
This comment has been minimized.
This comment has been minimized.
@evasoek yes. imagemin stopped using jpegtran a while ago in favour of mozjpeg. This is an old Gist and you might want to look at the doc of the various plugins used. // Optimize Images
function images() {
return gulp
.src("./assets/img/**/*")
.pipe(newer("./_site/assets/img"))
.pipe(
imagemin([
imagemin.gifsicle({ interlaced: true }),
// the line below is the one that you likely have to change
imagemin.mozjpeg({ quality: 75, progressive: true }),
imagemin.optipng({ optimizationLevel: 5 }),
imagemin.svgo({
plugins: [
{
removeViewBox: false,
collapseGroups: true
}
]
})
])
)
.pipe(gulp.dest("./_site/assets/img"));
} Despite that, basic principles for Gulp 4 have stayed the same so this is still quite relevant. I ams till using Gulp (in combination with Webpack fr JS) on my personal site, which is available on Github if you are interested. |
This comment has been minimized.
This comment has been minimized.
Yes I figured, thanks! I got it to work eventually, so it's fine. |
This comment has been minimized.
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!