Simple automatization (with Gulp)

Every time we are compiling project files (for example, Compass, Jade, image optimization, and so on), we are thinking about how we can automatize and speed up the process. The first idea—some terminal snippets and compiling invokers. But we can use grunt.js and gulp.js. What are Grunt and Gulp? In short—task runners. You can define a list of tasks, which you repeat all the time, group them into some logical structure, and run.

In most projects, you can use them to automatize a process of SASS/Compass compilation.

I assume that you have installed Node.js, Ruby, sass, and Compass. If not, I recommend you to do this first. To install all of the listed software, you need to visit:

• https://nodejs.org/en/ to install Node.js
• https://www.ruby-lang.org/en/ to install Ruby
• http://sass-lang.com/ to install SASS
• http://compass-style.org/ to install Compass
• http://gulpjs.com/ to install Gulp globally on your machine

On these pages, you can find guides and tutorials on how to install all of this software.

Then you will need to create a basic structure for your project. It is best to create folders:

• src: In this folder we will keep our source files
• dist: In this folder we will keep our compiled files

In the src folder, please create a css folder, which will keep our SASS files.

Then in the root folder, run the following command line:

npm init
npm install gulp-compass gulp --save-dev

In gulpfile.js add the following lines of code:

var gulp = require('gulp'),
    compass = require('gulp-compass');

gulp.task('compass', function () {
    return gulp.src('src/styles/main.sass')
        .pipe(compass({
            sass: 'src/styles',
            image: 'src/images',
            css: 'dist/css',
            sourcemap: true,
            style: 'compressed'
        }));
});

gulp.task('default', function () {
    gulp.watch('src/css/**/*.sass', ['compass']);
});

Now you can run your automatizer with the following in your command line:

gulp

This will run the default task from your gulpfile.js, which will add a watcher to the files with .sass extensions, which are located in the src/css folder. Every time you change any file in this location, your task compass will run. It means that it will run the compass task and create a sourcemap for us. We could use a default compass command, but gulp.js is a part of the modern frontend developer workflow. We will be adding new functions to this automatizer in the next chapters.

Let's analyze the code a little deeper:

gulp.task('default', function () {
    gulp.watch('src/css/**/*.sass', ['compass']);
});

The preceding code defines the default task. It appends a watcher, which checks the src/css/**/*.sass location for sass files. It means that every file in a src/css folder and any subsequent folder, for example, src/css/folder/file.sass, will have a watcher. When files in this location are changed, the task defined in the array [compass]will run. Our task compass is the only element in the array but it, of course, can be extended (we will do this in the next chapters).

Now let's analyze the task compass:

gulp.task('compass', function () {
    return gulp.src('src/styles/main.sass')
        .pipe(compass({
            sass: 'src/styles',
            image: 'src/images',
            css: 'dist/css',
            sourcemap: true,
            style: 'compressed'
      }));
});

It will compile the gulp.src('src/styles/main.sass)file and save the compiled file in pipe (gulp.dest('style.css')). The compass task is defined in pipe:

.pipe(compass({
            sass: 'src/styles',
            image: 'src/images',
            css: 'dist/css',
            sourcemap: true,
            style: 'compressed'
      }))

The first line of this task defines the source folder for SASS files. The second line defines the images folder. The third line sets the destination of the CSS file. The fourth line is set to generate a source map for the file (for easier debugging).The fifth line defines the style of the saved CSS file; in this case, it will be compressed (it means that it will be ready for production code).