Gulp minify how to#

Your end result should be a better optimized website, at least all of your code. Start by calling browserify with our entry pointing to our main javascript fileĮntries: [`$/styles`)) Įxports.build = gulp.parallel(javascriptBuild, cssBuild, htmlBuild) Let's write our task in a function to keep things clean To prevent rewriting the source and build folder locations $ npm install -save-dev gulp browserify babelify vinyl-source-stream const gulp = require('gulp') Ĭonst browserify = require('browserify') Ĭonst source = require('vinyl-source-stream') Let’s intall these dependencies and write the basis of our gulpfile.

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.

(I recommend checking out this list of transforms for more possibilities)

We will use the Babelify transform so that Browserify can use Babel to transform each file before bundling them up.

Gulp minify how to#

Check out the documentation how to target specific browser versions, without setting a target it will default to transforming ECMAScript 2015+ code. For this we just need Using the we specify which browsers we would like to target the transformation for.

To be able to use modern javascript in our browser we transpile our bundle into javascript understood by current and last-gen browsers, we will be using Babel to transform the code before bundling.Using Browserify we will be able to bundle modules into a single file (a bundle).The dependencies we will need to get modern javascript transpiled. 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. Since minification is mostly beneficial on the front-end side of the web, this article describes how to set up basic HTML and CSS minifcation as well. This guide seeks to help out those trying to set up Gulp javascript transpilation and minification.