Using Gulp – Part 2

Continuing from Using Gulp – Part 1 , we first start with linting js file

1. Using gulp for Linting

Step 1 : Create a file in project root folder (say gulpfile.js) and open it using your favorite editor .

Step 2: Add the following and save

// include gulp and the plugins
var gulp = require('gulp');

Step 3: For linting you would need to install  the plugin gulp-jshint locally first

Make sure you are in the root of your project folder.

$sudo npm install gulp-jshint --save-dev

This will locally include the linting libraries  in your project folder under folder node_modules and will also add the dependency file and version in package.json.

$cat package.json
{
 "name": "Project",
 "version": "1.0.0",
 "description": "My Project Description",
 "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4"
    }
 }

Step 4: Open the gulpfile.js and add the following  and save:

// include gulp and the plugins
var gulp = require('gulp');
var jshint = require('gulp-jshint');
//Task for linting
gulp.task('lint', function(){
 return gulp.src('src/js/*.js')
 .pipe(jshint())
 .pipe(jshint.reporter('default'));
});
  • This includes the plugins for gulp and gulp-jshint
  • Creates a task named “lint”
  • Pipes all js files under src/js to jshint object for linting
  • output/errors  are reported on the console

Step 5: Now you are all set to lint your js files by passing teh taskname to gulp in command line

gulp <taskname>

$ gulp lint
[16:03:35] Using gulpfile ~/Project/gulpfile.js
[16:03:35] Starting 'lint'...
[16:03:35] Finished 'lint' after 45 ms

Incase the js files has errors, it will be logged on console.

2. Using gulp for Concatenating and Minifying JS files

Step 1: As in step 1 above we open up the gulpfile.js and add the following  and save.

var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var concat = require('gulp-concat');

Step 2: For minifying you would need to install  the plugin gulp-uglify locally.

For rename you would need to install  the plugin gulp-rename and for concatenation you would need to install  the plugin gulp-concat locally.

Make sure you are in the root of your project folder.

$sudo npm install gulp-uglify --save-dev
$sudo npm install gulp-rename --save-dev
$sudo npm install gulp-concat --save-dev

This will locally include the linting libraries  in your project folder under folder node_modules and will also add the dependency file and version in package.json.

$cat package.json
{
 "name": "Project",
 "version": "1.0.0",
 "description": "My Project Description",
 "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4",
    "gulp-uglify": "^1.0.0",
    "gulp-rename": "^1.2.0", 
    "gulp-concat": "^2.3.4"
   }
}

Step 3: Open the gulpfile.js and add the following and save:

//Add a task for minifying
gulp.task('minifyjs', function(){
return gulp.src('src/js/*.js')
 .pipe(concat('production.js'))    // First concatenate all js files into a single js file
 .pipe(gulp.dest('build/js'))
 .pipe(rename('production.min.js')) // rename the concatenated js file
 .pipe(uglify())                    // minify the concatenated js file
 .pipe(gulp.dest('build/js'));      // save in destination folder
});
  • Creates a task named “minifyjs”
  • Pipes all js files under src/js and merges into one single file “production.js” in build/js folder
  • Minifies the production.js and renames to “production.min.js” in build/js folder

Step 4: Now you are all set to concatenate and minify your js files by passing the taskname to gulp in command line

gulp <taskname>

$ gulp minifyjs
[15:24:30] Using gulpfile ~/Project/gulpfile.js
[15:24:30] Starting 'minifyjs'...
[15:24:30] Finished 'minifyjs' after 151 ms

3. Using gulp for Precompiling CSS 

Here I will talk about precompiling SASS and LESS files

Step 1: Open up the gulpfile.js and add the following  and save.

var sass = require('gulp-sass');
var less = require('gulp-less');

Step 2: For precompiling SASS you would need to install  the plugin gulp-sass locally.

For precompiling LESS you would need to install  the plugin gulp-less locally.

Make sure you are in the root of your project folder.

$sudo npm install gulp-sass --save-dev
$sudo npm install gulp-less --save-dev

This will locally include the precompiling  libraries  in your project folder under folder node_modules and will also add the dependency file and version in package.json.

$cat package.json
{
 "name": "Project",
 "version": "1.0.0",
 "description": "My Project Description",
 "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4",
    "gulp-uglify": "^1.0.0",
    "gulp-rename": "^1.2.0",
    "gulp-concat": "^2.3.4",
    "gulp-less": "^1.3.5",
    "gulp-sass": "^0.7.3"
   }
}


Step 3: 
Open the gulpfile.js and add the following and save:

// Precompile all SASS files
 gulp.task('sass', function(){
 gulp.src('src/sass/*.scss')  // Pipe all SASS files to pre-compiler
 .pipe(sass())                // pre-compile
 .pipe(gulp.dest('build/css')); // Output the css to destination folder
});
// Precompile all LESS files
gulp.task('less', function(){
 gulp.src('src/less/*.less')  // Pipe all LESS files to pre-compiler
 .pipe(less())                // pre-compile
 .pipe(gulp.dest('build/css')); // Output the css to destination folder
});

Step 4: Now you are all set to precompile your LESS or SASS  files by passing the taskname to gulp in command line

gulp <taskname>

$ gulp sass
[15:29:25] Using gulpfile ~/Project/gulpfile.js
[15:29:25] Starting 'sass'...
[15:29:25] Finished 'sass' after 5.8 ms
$ gulp less
[15:31:11] Using gulpfile ~/Project/gulpfile.js
[15:31:11] Starting 'less'...
[15:31:11] Finished 'less' after 8.3 ms

4. Using gulp for Compressing images

Step 1: Open up the gulpfile.js and add the following  and save.

var imgcompress = require('gulp-imagemin');

Step 2: For compressing images you would need to install  the plugin gulp-imagemin locally.

Make sure you are in the root of your project folder.

$sudo npm install gulp-imagemin --save-dev

This will locally include the image compression  libraries  in your project folder under folder node_modules and will also add the dependency file and version in package.json.

$cat package.json
{
 "name": "Project",
 "version": "1.0.0",
 "description": "My Project Description",
 "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4",
    "gulp-uglify": "^1.0.0",
    "gulp-rename": "^1.2.0", 
    "gulp-concat": "^2.3.4",
    "gulp-less": "^1.3.5",
    "gulp-sass": "^0.7.3",
    "gulp-imagemin": "^1.0.1"
   }
}

Step 3: Open the gulpfile.js and add the following and save:

// Compress  all image files
gulp.task('imgmin', function(){
 gulp.src('src/images/*.*')  // Source of all image files
 .pipe(imgcompress())                // compress
 .pipe(gulp.dest('build/css')); // Output the build/images to destination folder
});

Step 4: Now you are all set to compress your image  files by passing the taskname to gulp in command line

gulp <taskname>

$ gulp imgmin
[15:35:30] Using gulpfile ~/Project/gulpfile.js
[15:35:30] Starting 'imgmin'...
[15:35:30] Finished 'imgmin' after 7.7 ms
[15:35:31] gulp-imagemin: Minified 1 image (saved 10.39 kB - 29.7%)

5. Using gulp for Pre-Compiling JSX files (Facebook’s React JSX files)

Step 1: Open up the gulpfile.js and add the following  and save.

var react = require('gulp-react');

Step 2: For precompiling  JSX files you would need to install  the plugin gulp-react locally.

Make sure you are in the root of your project folder.

$sudo npm install gulp-react --save-dev

This will locally include the react jsx precompiler  in your project folder under folder node_modules and will also add the dependency file and version in package.json.

$cat package.json
{
 "name": "Project",
 "version": "1.0.0",
 "description": "My Project Description",
 "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4",
    "gulp-uglify": "^1.0.0",
    "gulp-rename": "^1.2.0", 
    "gulp-concat": "^2.3.4",
    "gulp-less": "^1.3.5",
    "gulp-sass": "^0.7.3",
    "gulp-imagemin": "^1.0.1",
    "gulp-react": "^1.0.2"
   } 
}

Step 3: Open the gulpfile.js and add the following and save:

// Precompile facebook react jsx  to js
gulp.task('react', function(){
  gulp.src('src/jsx/*.jsx')  // Source of all jsx files
 .pipe(react())                // precompile jsx to js
 .pipe(gulp.dest('build/js')); // Output to build/js folder
});

Step 4: Now you are all precompile the JSX  files by passing the taskname to gulp in command line

gulp <taskname>

$ gulp react
[15:35:30] Using gulpfile ~/Project/gulpfile.js
[15:35:30] Starting 'react'...
[15:35:30] Finished 'react' after 17.7 ms

6. Watching for changes and running the task

Step 1: Open up the gulpfile.js and add the following  and save.

//Watching changes
 gulp.task('watch', function() {
 gulp.watch('./src/js/*.js', ['lint','minifyjs']); // Runs the "lint" and "minify" tasks on any change to .js files in source folder
 gulp.watch('./src/sass/*.scss', ['sass']); // Runs the "sass" task on any change to .scss files in source folder
 gulp.watch('./src/less/*.less', ['less']); // Runs the "less" task on any change to .less files in source folder
 gulp.watch('./src/images/*.*', ['imgmin']); // Runs the "imgmin" task on any change to image files in source folder
 gulp.watch('./src/jsx/*.jsx', ['react']); // Runs the "react" task on any change to .jsx files in source folder
});

You do not need to add any variables and include any plugins since watch is built into gulp.

You can keep on adding tasks to your watch list .

This will keep watching for changes and automatically call the specific task based on the file getting changed and reduce the need the run the task manually from command line.

Step 2: 

gulp <taskname>

$ gulp watch

7. Adding the “default” task

Step 1: This is a wrapper task for all the other tasks that we have created. So if you run the command gulp (without passing the specific task name) this would run all the wrapped tasks

Open up the gulpfile.js and add the following  and save.

// Default Task
gulp.task('default', ['lint', 'sass', 'less','minifyjs','imgmin', 'watch']);

Step 2: Now you are all set to run all the tasks by just running gulp command

$ gulp

8. Synchronizing live with Browser 

This would help you to view changes in the browser as soon as you save the changes made in your files, without the need of running gulp again and again and without the need of manually refreshing the browser.

Step 1: Open up the gulpfile.js and add the following  and save.

var browserSync = require('browser-sync')

Step 2: For synching live to browser you would need to install  the plugin browser-sync locally.

Make sure you are in the root of your project folder.

$sudo npm install browser-sync --save-dev

This will locally include the browser-sync plugin  in your project folder under folder node_modules and will also add the dependency file and version in package.json.

$cat package.json
{
 "name": "Project",
 "version": "1.0.0",
 "description": "My Project Description",
 "devDependencies": {
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4",
    "gulp-uglify": "^1.0.0",
    "gulp-rename": "^1.2.0", 
    "gulp-concat": "^2.3.4",
    "gulp-less": "^1.3.5",
    "gulp-sass": "^0.7.3",
    "gulp-imagemin": "^1.0.1",
    "gulp-react": "^1.0.2",
    "browser-sync": "^1.3.6"
   } 
}

Step 3: Open the gulpfile.js and add the following and save:

//Task for Browser-Sync
gulp.task('browsersync', function(){
//Add the files that needs to call browser-sync on change
var modfiles = [
 './*.html',
 './build/css/*.css',
 './build/js/*.js',
 './build/images/*.png'
 ];

//This will call browser-sync on change to any of the files specified in modfiles array.
//Running gulp browsersync will also start the npm server on port as defined below and load the index file form base directory
 browserSync.init(modfiles , {
 port:9090, 
 server: {
 baseDir:"./",
 }
 });
});

You can add this task to the default task

// Default Task
gulp.task('default', ['lint', 'sass', 'less','minifyjs','imgmin', 'watch','browsersync']);

Read more about browsersync at http://www.browsersync.io/

Step 3 :  Now you are ready to run gulp and see changes as you develop , live on your browser.

You can download a sample gulp usage project code from github : https://github.com/nizantz/D3I.git

Posted in Web Technology
0 comments on “Using Gulp – Part 2
1 Pings/Trackbacks for "Using Gulp – Part 2"
  1. […] Part 2 ( Using Gulp Part 2 ) we will talk about linting, concatenating, […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news