Setting up a CSS build process with Gulp

Luca Spezzano

Follow

Jul 11, 2019 · 5 min read

What is a build process?

It’s essentially just a sequence of tasks that are performed automatically and generate the files ready to be deployed.
We are going to implement a CSS build process that will compile Sass, prefix and compress our CSS.

Why Sass?

CSS is getting more powerful day by day, there are many CSS methodologies (I wrote an article about CSS methodologies if you want to go deep in the argument) that help us to write more maintainable and scalable CSS code, but these methodologies alone aren’t enough to solve the problem of maintaining large CSS codebases.
That’s where Sass comes into play. Sass provides us features that regular CSS doesn’t have, using Sass we can write more readable, maintainable and reusable CSS code.

Sass has become the most used CSS pre-processor in the front-end universe. Also some of the best front-end frameworks like Bootstrap and Foundation have been developed with Sass.
Sass lets you use many interesting functionalities like variables, nested syntax, mathematical operations, mixins, loops, functions, imports and more.

The packages

To develop our process we need to use some packages, let’s see together which one we will use and how they work.

gulp: is the core of our process and as they write on their website “Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something”. Gulp has a lot of very useful functionalities, in this case we will use only few:

• gulp.src(): usually it is a string that is the path of the specific file to read;
• gulp.dest(): usually it is a string that would be the destination path of the file once it will be processed;
• gulp.watch(): it allows watching files and running the functions when a change occurs;
• gulp.parallel(): it will execute the functions simultaneously;

gulp-sass: Sass is a preprocessor and to run in the browsers it needs to be compiled into css, that’s why we need gulp-sass, this gulp plugin will compile the Scss files into CSS.

gulp-autoprefixer: this plugin is very useful because it allows us not to think about the CSS prefixes anymore.

gulp-clean-css: this plugin is essential before deploying your website, because it will take your CSS file and will compress it in .min.css file, reducing extremely size of the file.

gulp-purgecss: this is one of the most important because it will reduce the size of your css file removing all the unused styles.

gulp-rename: this gulp plugin is useful if we want to change the extension file names.

BrowserSync: is an automation tool that makes web development faster, it has many useful functionalities, in our case we will use:

• server that will run a static server;
• browserSync.stream()is very useful for the css because it will change the CSS LIVE without to refresh the page;
• browserSync.reload() that will reload the page automatically.

Let’s build the process

At first be sure to have installed node, node-sass and npm, after open your terminal and install gulp-cli globally running

npm i -g gulp-cli

Now go wherever you want to create the folder and run

mkdir your-folder-name

and after go inside it

cd your-folder-name

Before to initialize our folder let’s create a simple structure for our folder, our structure should look like that. (You can see it on Github)

 src
 | |
 | assets
 | |    |
 | |    css
 | |      |
 | |      files
 | |      |   |
 | |      |   reset.scss
 | |      |   |
 | |      |   vendors.scss
 | |      |   |
 | |      |   element1.scss
 | |      |
 | |      |
 | |      main.scss
 | |
 | index.html
 |
 gulpfile.js

Once we created our files and have our structure we are free to initialize our folder

yarn init

and hit enter until the end.

Now it’s time to install our modules.

yarn add gulp gulp-sass browser-sync gulp-autoprefixer gulp-clean-css gulp-rename gulp-purgecss --dev

let’s install also Bootstrap, I would like to show you how to import the vendors in our css (you can see it on Github).

yarn add bootstrap

Now open your text editor and let’s populate our gulpfile.js, at first we need to require our packages so let’s write in your gulpfile.js this:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    purgecss = require('gulp-purgecss'),
    browserSync = require('browser-sync').create();

After the declaration we can start to write our first function

function css() {
  return gulp.src('./src/assets/css/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename(function(path) {
      path.extname = ".min.css";
    }))
    .pipe(
      purgecss({
        content: ['public/**/*.html']
      })
    )
    .pipe(gulp.dest('./public/assets/css/'))      
    .pipe(browserSync.stream());
})

In this function we have all our CSS process, we compile the Scss file, we add the prefixers, we minify the files and add the extension .min.

Well done so far 😬

So the core of our process is done, now let’s create our second function

function html() {
  return gulp.src('./src/**/*.html')
    .pipe(gulp.dest('./public/'));
})

This function will bring simply our html files from our src folder to the public folder.

Last function is to run our static server

function serve() {
  browserSync.init({
    server: {
      baseDir: './public'
    }
  })
})

In this case it will serve the public folder.

Now it’s time to create our watch, they are important to be faster during the development, they reload our pages automatically when we do a change in our files.

In this case we need only 2, 1 for scss files and 1 for html files

gulp.watch('./src/assets/css/**/*.scss', css);
gulp.watch('./src/*.html', html).on('change', browserSync.reload);

And at the end let’s create a sequence of functions that will run all our process

exports.default = gulp.parallel(html, css, serve);

Here we go, now run

gulp 

aaaaand

Instead if you want to clone directly the folder feel free to do it from Github, once you have cloned it just run

yarn

to install all our packages and after

gulp 

to run our process.

Here the link of the Github repo if you want to clone it to play around 😃

https://github.com/93lucasp/css-gulp