How to use gulpjs to Minify css, js and convert less, scss to css

Gulp is a task runner which uses Node.js. For example concats javascript and CSS, minifies CSS and javascript.

Gulp plug-ins are designed to do one thing only.
Gulp has basic functionality such as file watching built-in
Gulp uses leaner, simpler JavaScript code.
Gulp Tasks are executed with maximum concurrency.

Gulp has 5 functions:

gulp.task(name, function(){ ... })

It registers the function with a name.

gulp.run(tasks...)

Runs all tasks with maximum concurrency.

gulp.watch(glob, function(){})

Runs a function when a file that matches the glob changes.

gulp.src(' ')

Takes a file system glob and starts emitting files that match and returns a readable stream. This is piped to other streams.

gulp.dest(folder):

This returns a writable stream. File objects piped to this are saved to the file system.

Installing Nodejs:

$ sudo apt-get install -y nodejs

Node is a program using the Google Chrome’s V8 JavaScript engine, which can parse and execute code written in JavaScript.

Installing npm:

$ sudo apt-get install npm

npm is the default package manager for Node.js. It also allows users to install Node.js applications that are available on the npm registry.

Use npm to install npm modules

Install Gulp:

Install gulp using -g at the end so gulp will available for all ur projects.

$ sudo npm install gulp -g

To install gulp in local environment.

$ npm install gulp --save-dev

Lets check whether they installed are not

$ npm -v
1.3.10

$ gulp -v
[11:50:15] CLI version 3.8.10
[11:50:15] Local version 3.8.10]

Now we need to install and configure plug-ins to perform specific tasks by using gulp.

To concatenate all source javascript or css files.

$ npm install gulp-concat --save-dev

Uglify package implements a general-purpose JavaScript parser/compressor/beautifier toolkit. A code generator which outputs JavaScript code from an AST, also providing the option to get a source map

$ npm install gulp-uglify --save-dev

Strip-debug Useful for making sure you didn't leave any logging in production code.

$ npm install gulp-strip-debug --save-dev

I think you installed everything perfectly without any problem.

copy below gulpfile.js in your project directory.

// include gulp

var gulp = require('gulp');

// include plug-ins to do task. gulp-concat, gulp-uglify,gulp-strip-debug

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

var stripDebug = require('gulp-strip-debug');

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

// Task to concat all JS files, strip debugging and minify

gulp.task('scripts', function() {

  gulp.src('js/*.js')                            // define source directory where ur js files

    .pipe(concat('script.js'))              //define concatination & name for out put file

    .pipe(stripDebug())                     //Useful for making sure you didn't leave any logging in production code.

    .pipe(uglify())                              // make outputfile compress/beautifier

    .pipe(gulp.dest('js/dest/'));          // define destination dir to store files

});

Run gulp file using

$ gulp scripts

Thats it just above little code made your all javascript files code in one single file.

Change .Less files to .css

$ npm install gulp-less
//include gulp-less

var gulp = require('gulp');

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

gulp.task('lesscss', function(){

    gulp.src('style/*.less')

        .pipe(less('stylecss.css'))

        .pipe(gulp.dest('style/css/'));

});

Run using below command

$ gulp lesscss

Concate all css files.

gulp.task('css', function() {

  gulp.src('css/*.css')

    .pipe(concat('styles.css'))

         .pipe(minifyCSS())                           // by compleate css will be in single line

         .pipe(gulp.dest('css/styles/'));

  });

Above all gulp tasks can be run in single gulp command, For that at the end of the file add default tasks to gulpfile.js.

gulp.task('default', ['lesscss','css','scripts'], function() {});

For all gulp plugins visit http://gulpjs.com/plugins/

Happy Coding.

Share this Blog post

Facebook X Linkedin