Gulp can make the life of a front-end developer easier.

Whether you begin a new project or take up a project already started, by installing Gulp you can change the developement workflow and have a positive impact on:

Time
Budget
Performance

The purpose of this tutorial is to give the opportunity to anyone who uses WordPress to automate tasks by installing Gulp and using Sass.

WordPress is a free and open-source content management system (CMS) & Gulp.js is open source, too, you can find it on GitHub. Knowing the features they offer, you can assemble a great solution.

In my WordPress starter Kit I created my UNDERSCORES based theme and I installed Gulp and some plugins.

Download Project Files

Gulp Starter Kit
The greatest good you can do for another is to share your riches... You can download the WordPress | Gulp Kit.

General

Information

In my previous article I talked about the prerequisites to installation of Gulp and the tools that I use. This installation is more comprehensive than the previous, and above all allows us to use Sass in WordPress with all the resulting benefits.

To install Gulp in WordPress you must navigate to the themes folder.

Plugin we will install:

browser-sync >> Your indispensable test assistant to create a personalised test environment.
gulp-sass>> It convert and pre-process SASS (or SCSS) into the plain CSS that browsers understand.
gulp-autoprefixer >> Essential support to apply prefixes for you.
gulp-concat >> Files will be concatenated in the order that they are specified in the gulp.src function.
gulp-imagemin >>Optimizing PNG, JPEG, GIF and SVG images
gulp-minify-css-mpath >> To minify css
gulp-uglify >> To minify JavaScript
gulp-plumber >> To Prevent pipe breaking caused by errors from gulp plugins
gulp-sourcemaps>> Sourcemaps bacically are a way to map the combined/minified file back to the original file.
gulp-notify>> To report error to Mac, Linux or Windows Notification Center.


node -v // to verify your node version
// You will create a new directory for your project. Go to this folder and initialize it with npm. 
npm init // to set up the package.json, you will be asked a series of questions – enter a value or hit Return
npm install gulp-g // to install gulp in a global installation
gulp -v // to query the gulp version
npm install gulp --save-dev // to install a local version of gulp

Summarizing

We installed Node
We set up the package manager (package.json. It's a very important file, it serves as documentation for what packages your project depends on)
We installed Gulp globally and locally (The package.json is updated. You can check it out!)

Installation of plugins

We will install some plugins, by using npm install command line. For each plugin installed the plugin is added on package.json file into dev Dependences.

Note for MAC users : If you get an error while you download packages globally you can try by using sudo, but this should be avoided. You can fix the permission.


npm install browser-sync --save-dev 
npm install --save-dev gulp-sass
npm install --save-dev gulp-minify-css 
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat 
npm install --save-dev gulp-imagemin
npm install --save-dev gulp-plumber
npm install --save-dev gulp-sourcemaps
npm install --save-dev gulp-notify

Create a Gulp Configuration File

We will create a new gulpfile.js configuration file in the root of your project folder, where we will define Gulp and plugins that we installed.


// required modules
var gulp   = require('gulp'),
  browserSync = require('browser-sync'),
  reload = browserSync.reload,
  autoprefixer = require('gulp-autoprefixer'),
  concat = require('gulp-concat'),
  imageMin = require('gulp-imagemin'),
  minifyCSS = require('gulp-minify-css'),
  notify = require('gulp-notify'),
  plumber = require('gulp-plumber'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  uglify = require('gulp-uglify');

Summarizing

We installed our plugins
We added some basic code to define gulp and Plugin
We will write our first style Task

Define a Task

All tasks are similar. A task is a function() with a return value which defines:

First

Define a task-name

The basic syntax of a gulp task is: gulp.task('task-name', function() { // task });

Second

Define the source folder

gulp.src tells Gulp what files or folder to use for the task

Third

Define the destination folder

gulp.dest tells Gulp where to pipe the result in an out folder or destination folder once the task is completed

Examples of Style & Script Task


// Style Task
gulp.task('styles', function() {
return gulp.src('./sass/**/*.scss')
  .pipe(plumber({
    errorHandler: notify.onError("Error: <%= error.message %>")
  }))
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(minifyCSS())
  .pipe(concat('style.css'))
  .pipe(autoprefixer('last 5 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./'))
  .pipe(reload({ stream: true }));
});

I chose to concatenate (combine) my file .scss into the file style.css. If you want to use another file you have to enqueue your CSS stylesheet.


// Scripts Task
gulp.task('scripts', function () {
return gulp.src('./js/scripts.js')
  .pipe(plumber({
    errorHandler: notify.onError("Error: <%= error.message %>")
  }))
  .pipe(concat('main.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('./js'))
  .pipe(reload({stream:true}));
});

To run each task you have to call each task in your terminal, for exemple : gulp style. We will create a super task that allows us to operate all tasks without having to call them one by one and that runs when you just run gulp. You can do this by defining a task named default.

            
// Default Task

gulp.task ('default',['delete','style','scripts','watch']);

Watching File

In web development we do and redo things many times. Gulp is able to look for changes in files and to run tasks when changes are detected. You can find here the syntax for the watch method for our tasks :

            
// Gulp watch syntax

gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['styles']);
gulp.watch('./js/**/*.js', ['scripts']);
gulp.watch('./**/*.php', reload);
});

Thanks for your reading!