Setup a Gulp frontend development workflow (SASS/JavaScript/Pug)
Tags: css, node, gulp, tutorial
Published: 2020-10-20 23:09:49

[Gulp](https://gulpjs.com/) 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:

```javascript
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:

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

`_vars.scss` – defines SASS variables to use:

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

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

```scss
// 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:

```javascript
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:

```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:

```javascript
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:

```html
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:

```html
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:

```javascript
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:

```javascript
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.