Creating a new Ghost theme with gulp.js - Part 1

Installing Gulp

At work we've been using sass lots in our development projects. And through that we have started using gulp.js to compile our sass files. First we need to install gulp.js globally on the server.

sudo npm install -g gulp

When this is complete it should be available to any project on your system.

Project setup

Now we need to set this up in the ghost project that I want to create my new theme in.

cd /var/www/ghost/

We must install gulp locally to the project:

npm install gulp --save-dev

This will create or add node_modules folder, which should already be there from setting up Ghost.

touch gulpfile.js

This will create the gulpfile.js configuration file which will be used to define various tasks.

Adding plug-ins for Gulp

This part all really depends what you're going to be using gulp for. Lately, I've been using it to compile my sass to css and minifiy it. Although, at the office we have been using it for image, and javascript minification.

npm install gulp-ruby-sass gulp-cache gulp-watch

After running that command it should download those modules to the node_modules folder and are able to be included in to the gulpfile.js.

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    sass = require('gulp-ruby-sass'),
    cache = require('gulp-cache');

This includes the previously downloaded node modules. From here we can define a default task to watch the sass files for changes.

gulp.task('default', ['watch']);
gulp.task('watch', function() {
 gulp.watch('./content/themes/maro/assets/sass/**', ['sass']);
});

Her we have a default gulp task which runs our watch task. In this watch task we can set up various folders/files to be watched by other node_modules. In this watch task we have it setup to watch our sass folder and here it defines which task to run when changes happen in the folder. In this case it's ['sass'] and below is what we're going to do with the sass files.

    gulp.task('sass', function() {                  gulp.src('./content/themes/maro/assets/sass/styles.scss')
        .pipe(sass({
            noCache: false,
            style: 'expanded',
            lineNumbers: true,
            sourcemap: false,
            quiet: true,
            includePath: './content/themes/maro/assets/sass/'
        }))
        .pipe(gulp.dest('./content/theme/maro/assets/css'));
    });

Now with all this setup we can save the file and go back to the Ghost root folder. From here we run:

gulp

It should then start running and monitoring for changes in your tasks.