The Power of Gulp

In an earlier blog post I discussed the use of a Virtual Server as a Gulp/SCSS compiler. Now it is unlikely that many other people would have a similar requirement, but I thought it would be useful to go through the steps I went through as they may be of use in some other context.

Set up a virtual machine

Firstly go to Turnkey Linux and download a node.js appliance.

You should be able to download a VM and import it into VirtualBox.

Create Project Folder

Next, create a project folder. I called my folder ‘processing’ and created sub-folders called ‘src’ and ‘dist’. Copy over your CSS file to the ‘src’ folder and give it an .SCSS extension.

The plan is to use Gulp to compile this source .SCSS file and save it as a CSS file in the ‘dist’ folder. Another Gulp task will then FTP all of this over to the other server.

Install gulp on the VM

Next up, use NPM to install Gulp globally on the virtual server. You need to use putty to gain SSH access to the virtual server and then run the following command.

Sudo npm install --global gulp

Set up a Gulp Project

Now that you have Gulp installed globally you can set up your Gulp project.

The first thing to do i to CD to your project folder.

npm init

This will create a package.json file with config details of your project. We just need to put in some basic config details. It will also create an node-modules folder to keep all the Gulp packages we need.

{
  "name": "Gulp",
  "version": "1.0.0"
}

Install Gulp Modules

The first thing to do is to install the main Gulp package.

npm install --save-dev gulp

One of the strengths of Gulp is the multitude of plugins you can use to accomplish different tasks.

We are going to use the following plugins in our gulp tasks.

gulp-concat
this plugin concatenates files together into a single file.
gulp-clean-css
the plugin helps tidy up CSS.
gulp-sass
this plugin compiled SASS and SCSS into CSS.
gulp-rename
renamed destination file.
vinyl-ftp
FTP utility for copying files.
run-sequence
Runs a sequence of tasks.
gulp-sourcemaps
particularly useful when concatenating files, this allows your debugger to see where code sits in sourcefiles.
gulp-util
genral utility for hlp logging FTP activity

Enter the following bash command to download them all.

npm install --save-dev gulp-concat gulp-clean-css gulp-sass gulp-rename vinyl-ftp run-sequence gulp-sourcemaps gulp-util

Once this has completed you should be able to see all of these modules sitting in your nodes-modules folder.

Create Gulp File

Next step is to actually create our Gulp file – this will contain details of the tasks we are setting up.

Create a file called gulpfile.js in your project folder.

This file will contain the following things.

  • References to all the modules we need to complete our tasks.
  • Variables containing file paths.
  • A task to take any CSS and SCSS files sitting in our src folder, concatenate and compile to CSS and save resulting file in our dist folder.
  • A task to FTP the src and dist folders over to another server.
  • A task that executes these two task in sequence.
  • A watch task, that will monitor the ‘src’ folder and execute the SCSS and FTP tasks on any change to any file.

Module References

The first thing we need to include is references to all the modules we have installed.


var gulp = require('gulp');

// require other packages
var concat = require('gulp-concat');
var cssmin = require('gulp-clean-css');
var sass = require('gulp-sass');
var rename = require("gulp-rename");
var ftp = require( 'vinyl-ftp' );
var runSequence = require('run-sequence');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require( 'gulp-util' );

We can then reference these modules in our tasks using these variable names.

Folder Path Variable

Next up we can create some variables pointing to our ‘src’ and ‘dist’ folders.


// variables
var paths = {
  css: {
	src: './src/css/*.{scss,sass,css}',
    dest: './dist/css',
    opts: {

    }
  },
  js: {
    src: './src/js/*.js',
    dest: './dist/js',
    opts: {

    }
  }
};

This is not obligatory, you reference paths directly in your tasks, this is just a bit easier to maintain.

Processing Stylesheets

The next task will process all the CSS, SASS and SCSS files on our ‘src/css’ folder.


// Process and Create DIST CSS - Run Styles
gulp.task('styles', function() {
  return gulp.src(paths.css.src)
    .pipe(sourcemaps.init())
	.pipe(concat('mystyles.css'))
    .pipe(sass())
	.pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.css.dest))
    .pipe(cssmin())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./dist/css/'));
});

This task takes all the files in the ‘src/css’ folder and concatenates them all into a file called mystyles.css. It saves this file in the ‘dist/css’ folder, then saves another, minified version in the same folder.

The sourcemaps plugin tracks all of these changes in a sourcemap. Pages that call the single mystyles.css file can be viewed in Chrome Developer Tools for example and the sourcemap will link back to the original source files allowing for easy debugging.

FTP converted files

The next task is a simple FTP task to copy over our ‘src’ and ‘dist’ folders to the other server.


// FTP dist to gtv309
gulp.task('ftp-dist', function(done){
  
 var conn = ftp.create( {
        host:     'HOST',
        user:     'USERNAME',
        password: 'PASSWORD',
        parallel: 10,
        log:      gutil.log
    
 });
    var globs = [
        'dist/**',
        'src/**'
           ]; 
		   return gulp.src( globs, { base: '.', buffer: false } )
       .pipe( conn.newer( '/LOCATION/ON/SERVER' ) ) 
        });

This task creates an FTP connection and transfers the contents of the ‘src’ and ‘dist’ folders over to your chosen /LOCATION/ON/SERVER. Or rather those files that have changed only.

You can check the vinyl-ftp module for more information on usage.

It should be possible to store username and password in an external file – as this is just sitting in a virtual machine on my laptop I haven’t deemed this necessary.

Sequence them together!

The next task uses the run-sequence module to sequence them together.


// compile and commit
gulp.task('style-commit', function() {
  runSequence('styles',
              'ftp:dist',
              );
});

Setup the watch task

Finally we can create a watch task to monitor the ‘src’ folder and run our style and ftp tasks when a new version of a file is saved.


gulp.task('watch', function () {
var watcher = gulp.watch('./src/css/*.scss', gulp.task('style-commit'));
watcher.on('change', function() {
	runSequence('styles',
              'ftp:dist',
              );
  console.log('File was changed');
});
});

Test that everything works

If you go to putty you can type in the following command.

gulp --tasks

This should show you a list of all you tasks if the are correctly set up. It will throw errors if a module is missing. Don’t be worried if you get an error like this, I have found it is usually a missing module, or an incorrectly named variable that can be identified quickly.

Once this task is executing ok you can go through each of the tasks to make sure they work ok.

gulp styles

gulp ftp-dist

gulp style-commit

gulp watch

Once you run your watch task any changes you make to a src CSS/SASS/SCSS file should automatically instigate your styles task, and then FTP the results over to the server.

Leave a Reply