Michael Burrows

Setup a Gulp frontend development workflow (SASS/JavaScript/Pug)

Michael Burrows's photo
Michael Burrows
·

4 min read

Gulp is a toolkit for automating and enhancing development workflow. In this tutorial we’ll be setting up a frontend workflow to compile SASS, JavaScript, and Pug assets.

Let’s get started by installing the gulp command line utility:

npm install gulp-cli --global

Next create the project directory and run npm init to generate a package.json file:

mkdir gulp-project
cd gulp-project
npm init -y

Gulp can then be installed into our project with the following command:

npm install gulp --save-dev

Create a gulpfile and test the installation

In the root of the project directory create a new file called gulpfile.js and add the following task:

function defaultTask(cb) {
  console.log("Gulp is working!");
  cb();
}
exports.default = defaultTask;

Test the installation by running the gulp command. If successful you’ll see Gulp is working! logged in the terminal. With gulp installed and working we can now begin setting up our workflow starting with the SASS.

SASS gulp task

Create a /src/css folder with the following files:

style.scss
_vars.scss
_global.scss

style.scss – imports the other “partial” scss files:

// style.scss
@import "_vars.scss";
@import "_global.scss";

_vars.scss – defines SASS variables to use:

// _vars.scss
$font-color: #333;
$font-family: sans-serif;
$background-color: #eee;

_global.scss – some styles for the body element using the variables:

// global.scss
body {
  color: $font-color;
  font-family: $font-family;
  background-color: $background-color;
}

Next install the SASS gulp package with the following command:

npm install gulp-sass --save-dev

Then update gulpfile.js to include the CSS task:

const { src, dest, watch } = require("gulp");
const sass = require("gulp-sass");
function css() {
  return src("./src/css/\*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(dest("./dist/assets/"));
}
exports.css = css;

We can now run the task using the gulp css command. This will create a /dist/assets folder with a single style.css file that contains the compiled CSS:

body {
  color: #333;
  font-family: sans-serif;
  background-color: #eee; }

JavaScript gulp task

Create a /js folder inside the /src folder with the following files:

main.js
plugin.js

For the JavaScript portion of this tutorial we’ll simply be concatenating multiple JavaScript files into a single file. To do this we need to install the gulp-concat package:

npm install gulp-concat --save-dev

Then add the following task to the gulpfile.js file:

const concat = require("gulp-concat");
function js() {
  return src("./src/js/\*.js")
    .pipe(concat("script.js"))
    .pipe(dest("./dist/assets/"));
}
exports.js = js;

When we run the gulp js command our JavaScript files will be combined into single file named script.js that is located in the /assets folder along with the compiled CSS.

Pug gulp task

Create a /pug folder inside the /src folder.

We’ll first create a layout.pug file that loads our compiled CSS & JavaScript:

doctype html
html  
    head
        block head             
        script(src='./assets/script.js')
        link(rel='stylesheet', href='./assets/style.css')
    body
        #main
            block content

Inside the /pug folder create a /views folder with a index.pug file:

extends ../layout.pug
block head
    title Hello World
block content  
    h1 Welcome
    p This is the index.pug file compiled.

Next install the Pug package with the following command:

npm install gulp-pug --save-dev

Then add the following task to the gulpfile.js file:

const pug = require("gulp-pug");
function html() {
  return src("./src/pug/views/\*.pug")
    .pipe(pug({pretty: true,}))
    .pipe(dest("./dist"));
}
exports.html = html;

Run using the gulp html command. This will compile the content of index.pug into layout.pug and generate a index.html file that we can view in the browser.

Watch files for changes

Running each individual task every time a file is modified would be a pain which is why we’ll setup a “watch” task to automatically run tasks on file save. Add the following to the end of the gulpfile.js file:

exports.watch = function () {
  watch("./src/css/\*.scss", css);
  watch("./src/pug/\*\*/\*.pug", html);
  watch("./src/js/\*.js", js);
};

Now we only need to run the gulp watch command once and anytime a file is modified the relevant gulp task will be executed. Gulp logs the task that was run in the terminal for reference.

Gulpfrontend