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.
Now that you are familiar with gulp, let’s make a sample file that automates the following workflow:
- Compile SCSS/SASS and output the files into a CSS directory
- Compile JS and output the files to a JS directory
- Optimise and copy images into an Images directory
- Start up a web server to preview your front end project
- 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.
- NodeJS and NPM - you can download it from Node’s official website
- 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 \
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
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
@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.
src/index.html and add the following markup:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Gulp 4 Preview</title>
<link rel="stylesheet" href="css/index.css">
<h1>My Gulp 4 Preview</h1>
Lastly, open up
package.json and add the following scripts in your file (don’t forget about the trailing comma):
"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.