DEV Community

Michael Burrows
Michael Burrows

Posted on • Updated on • Originally published at w3collective.com

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

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
Enter fullscreen mode Exit fullscreen mode

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

mkdir gulp-project
cd gulp-project
npm init -y
Enter fullscreen mode Exit fullscreen mode

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

npm install gulp --save-dev 

Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

// style.scss
@import "_vars.scss";
@import "_global.scss";
Enter fullscreen mode Exit fullscreen mode

_vars.scss – defines SASS variables to use:

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

_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;
}
Enter fullscreen mode Exit fullscreen mode

Next install the SASS gulp package with the following command:

npm install gulp-sass --save-dev
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

JavaScript gulp task

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

main.js
plugin.js
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

Next install the Pug package with the following command:

npm install gulp-pug --save-dev
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
devhammed profile image
Hammed Oyedele

How will I be able to know all these when the government of where I live "Nigeria" is killing techies!