Basic gulp.js plugins
Chapter - 2






Gulp Plugins

It is the second part of the gulp for beginners series which deals in introducing gulp.js and then making you familiar with some basic gulp plugins. This article talks about 3 gulp plugins which are :

  1. gulp-uglify
  2. gulp-concat
  3. gulp-rename

#gulp-uglify

This plugin is used to remove the newlines and comments from the CSS/JS files or in other words it is used to minify the files.


		        

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('ugly' , function() {
	gulp.src('source/*.js')
	.pipe(uglify())
	.pipe(gulp.dest('destination'));
});

                
	            

Run it at bash or command line using the following command


					

$ gulp	ugly	

					
	            

#gulp-concat

this plugin is used to concatenate 2 or more files into a single output file.


		        

var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('scripts' , function() {
	return gulp.src('source/*.js')			//add your custom source here
	.pipe(concat('min.js'))					// name of the output file
	.pipe(gulp.dest('destination4'));		// name of the destination folder comes here
});

                
	            

Run it at bash or command line using the following command


		        

$ gulp	scripts	

                
	            

#gulp-rename

This gulp plugin is used to rename a file. There are 3 ways of renaming a file
a) Rename via string
b) Rename via function
c) Rename via hash
Lets understand them one by one

  • Rename via string :
    							
    
    //rename via string
    var gulp = require('gulp');
    var rename = require("gulp-rename");
    gulp.task('default', function() {
    	gulp.src("maps/main.css")
    	.pipe(rename("css/gulp.min.css"))
    	.pipe(gulp.dest("./destination"));   		// /destination/css/gulp.min.css
    });
    
    							
    							

    Run it at bash or command line using the following command


    							
    
    $ gulp	
    
    							
    							

  • Rename via function :
    									
    
    //rename via function
    var gulp = require('gulp');
    var rename = require("gulp-rename");
    
    
    gulp.task('default', function() {
    	gulp.src("maps/main.css")
    	.pipe(rename(function (path) {
    		path.dirname += "/css";
    		path.basename = "gulp.min";
    		path.extname = ".css"
    	}))
    	.pipe(gulp.dest("./dist")); // ./dist/css/gulp.min.css
    });
    
    									
    									

    Run it at bash or command line using the following command


    									
    
    $ gulp	
    
    									
    									

  • Rename via hash :
    										
    
    //rename via hash
    var gulp = require('gulp');
    var rename = require("gulp-rename");
    
    
    gulp.task('default', function() {
    	gulp.src("maps/main.css" , { base: process.cwd() })
    	.pipe(rename({
    		dirname: "main/css",
    		basename: "gulp",
    		prefix: "rename-",
    		suffix: "-min",
    		extname: ".js"
    	}))
    	.pipe(gulp.dest("./dist")); 		//  ./dist/main/css/rename-gulp-min.js
    						  
    });
    										
    										

    Run it at bash or command line using the following command


    										
    
    $ gulp	
    
    										
    										

Summary

We learned about 3 packages related to gulp which includes uglifying a file using gulp, concating a file using gulp and renaming a file using gulp.