My Gulp 4 File

Build configurations can be the most time consuming and frustrating thing to occur for most people, but luckily with Gulp, it’s an absolute breeze.

When it comes to front end build automation, gulp 4 is the perfect build tool for the job.

The tasks can be written in JavaScript and most of the heavy lifting like compiling and minifying SCSS/SASS, compressing images and handling JavaScript can be taken care of by using gulp modules.

Now that you are familiar with gulp, let’s make a sample file that automates the following workflow:

  1. Compile SCSS/SASS and output the files into a CSS directory dist/css
  2. Compile JS and output the files to a JS directory dist/js
  3. Optimise and copy images into an Images directory dist/img
  4. Start up a web server to preview your front end project
  5. Setup a watch job, so that anytime you save a file, it will live reload your web server and will give you instant feedback of your updates

Before we get started, please make sure you have the following prerequisites installed and ready to go.

  1. NodeJS and NPM - you can download it from Node’s official website
  2. A code editor such as VSCode or Sublime Text.

With the above prerequisites installed, lets get going by opening up a Mac or Linux terminal and executing the following commands:

mkdir example-gulp && \
cd example-gulp && \
npm init -y && \
mkdir src && cd src && \
touch index.html && \
mkdir js && \
cd js && \
touch index.js && \
cd .. &&
mkdir scss && \
cd scss && \
touch index.scss && \
cd .. &&
mkdir img && \
cd .. && touch gulpfile.js && \
npm install \
@babel/core \
autoprefixer \
browser-sync \
cssnano \
del \
gulp \
gulp-better-rollup \
gulp-concat \
gulp-csso \
gulp-imagemin \
gulp-newer \
gulp-postcss \
gulp-sass \
gulp-sourcemaps \
gulp-uglify \
rollup \
rollup-plugin-babel \
@rollup/plugin-commonjs \
@rollup/plugin-node-resolve \
--save-dev

You’ll notice above that we installed a bunch of packages with npm. The following packages will be required to help automate our workflow with gulp.

A breakdown of the packages are as follows:

  • gulp - Gulp is the toolkit that helps you automate painful or time-consuming tasks in your development workflow
  • gulp-sass - Compiles SCSS/SASS to CSS
  • cssnano - Minifies CSS
  • gulp-sourcemaps - Create sourcemaps for your SCSS/SASS files
  • gulp-postcss - A tool for transforming CSS with JavaScript
  • autoprefixer - Adds vendor prefixes to CSS rules using values from Can I Use
  • gulp-concat - Concatenates multiple files
  • browser-sync - Keep multiple browsers & devices in sync when building websites
  • gulp-newer - A gulp plugin for passing through only those source files that are newer than corresponding destination files
  • gulp-imagemin - Minify and optimise PNG, JPEG, GIF and SVG images
  • del - Used to delete files or directories
  • gulp-better-rollup - This plugin integrates Rollup deeper into Gulps pipeline chain
  • rollup-plugin-babel - Seamless integration between Rollup and Babel
  • @rollup/plugin-node-resolve - A Rollup plugin which locates modules using the Node resolution algorithm, for using third party modules in node_modules
  • @rollup/plugin-commonjs - A Rollup plugin to convert CommonJS modules to ES6, so they can be included in a Rollup bundle

Now that you are familiar with the packages installed, you will need to open up the gulpfile.js with your favourite editor and put in the following code.

gulpfile.js:

Open src/index.html and add the following markup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Gulp 4 Preview</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <h1>My Gulp 4 Preview</h1>
  <script src="js/default.min.js"></script>
</body>
</html>

Lastly, open up package.json and add the following scripts in your file (don’t forget about the trailing comma):

"scripts": {
  "start": "gulp",
  "build": "gulp build",
  "clean": "gulp clean"
},

In your terminal from the root directory of example-gulp, you can run npm start and away we go.

That’s it! – I hope you enjoy the setup and get a lot of benefit out of it.