I fell in love with Gulp.js, a javascript task runner, it makes the life of each front-end web developer easier by automating the most frustrating tasks.

I would like to share with you my Gulp Starter Kit containing some plugins. You'll quickly find out how you can spend your valuable time coding while Gulp works for you.

There are more than 2,500 plugins available in Gulp, you can also write your own plugin.
In any case, you can find them easily at gulpjs.com/plugins/, on npmjs.com or with a google search ;)
I'm sure that you will be curious to discover them and choose the one best suited for your project.

Download Project Files

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

General

Information

We will work in the command line mode, I hope you're not allergic to it, but if I can give my own advice ... I use Visual Studio Code , it's a great text editor with a lot of interesting plugins like autoprefixer, it has an integrated terminal and it's free.
In a nutshell it is W•O•N•D•E•R•F•U•L.

Pre requisites
  • NPM (node package manager)
    Node.js can be downloaded for Windows, Mac and Linux from nodejs.org/download/.
  • Gulp.js

Plugin we will install: 


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
nmp 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 --save-dev gulp-minify-css 
npm install --save-dev gulp-uglify
npm install --save-dev gulp-uglify
npm install --save-dev gulp-rename 
npm install --save del 
npm install jshint gulp-jshint --save-dev

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'),
    minifyCSS = require('gulp-minify-css'),
    uglify = require ('gulp-uglify'),
    del = require ('del'),
    rename =require('gulp-rename'),
    jshint = require('gulp-jshint'),
    plumber = require('gulp-plumber');
Summarizing
  1. We installed our plugins
  2. We added some basic code to define gulp and Plugin
  3. 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('style', function(){
    return gulp
    .src('css/*.css')
    .pipe(minifyCSS())
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('assets'));
})
 								 				  
							  

 // Scripts Task
gulp.task('scripts', function(){
    return gulp
    .src('js/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe (jshint())
    .pipe(rename({suffix:'.min'}))
    .pipe(gulp.dest('assets'));
})

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('css/*.css', ['style']);
    gulp.watch('js/*.js',['scripts']);
})

Thanks for your reading!

Share: Email Facebook Google+ Twitter