The resulting gulpfile is available here as a gist for those who want to get things up and running immediately, however I do recommend writing along with the article to make it stick.
- Our most obvious one, Gulp version 4+
- Using Browserify we will be able to bundle modules into a single file (a bundle).
- Using the @babel/preset-env preset we specify which browsers we would like to target the transformation for. Check out the documentation how to target specific browser versions, without setting a target it will default to transforming ECMAScript 2015+ code.
- We will use the Babelify transform so that Browserify can use Babel to transform each file before bundling them up. (I recommend checking out this list of transforms for more possibilities)
- We need to use vinyl-source-stream to turn our bundle into something which gulp understands to be able to write it to a file.
Let’s intall these dependencies and write the basis of our gulpfile.
$ npm install --save-dev gulp browserify babelify @babel/core @babel/preset-env vinyl-source-stream
Unfortunately the transpiled code is far too good looking, the world wide web appreciates performant, not pretty code. So we will be making an effort to uglify our transpiled code. Let’s take a look at our dependencies to make minification happen.
- While vinyl-source-stream does a good job turning the bundle into a stream other plugins prefer to receive text in a buffer, we will use vinyl-buffer for this.
- Quite simple, we pipe into gulp-uglify a buffer of pretty code, and out comes ugly code who would have guessed!
$ npm install --save-dev vinyl-buffer gulp-uglify
$ npm install --save-dev gulp-htmlmin
Assuming you’re styling your website, you will have to minify your stylesheets as well.
- The gulp-postcss package enables other packages to transform and modify our CSS files.
- CSSNano is a PostCSS plugin used for minification, check out its documentation for more options and plugins to optimize its results with your project constraints in mind.
Again, we should keep in mind to edit our exposed task.
$ npm install --save-dev gulp-postcss cssnano
Your end result should be a better optimized website, at least all of your code. I recommend looking into compressing your images as they usually make up the bulk of the size on a webpage. Be sure to check back soon, I will be writing a quick guide to image compression using Gulp ASAP!
Keeping things tidy
Our tasks should work perfectly, but we are not cleaning after ourselves right now. As it happens during a project, some HTML and CSS source files get deleted or moved as it updates, but these tasks keep filling up the build folder (leaving old files if not overwritten).
We can write a task to remove the build folder before each build using the del package.
$ npm install --save-dev del
Just a small last change, typing gulp build is fine and all. But since it’s our only task let’s make it our default task.
Now you can either run the task by running gulp build or just gulp.