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:

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

                   It registers the function with a name.

2. gulp.run(tasks...)

              Runs all tasks with maximum concurrency.

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

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

4. gulp.src(' ')

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

5. gulp.dest(folder):

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

Installing Nodejs:

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

Installing 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.

  To install gulp in local environment.

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 concatinate all source javascript or css files.

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

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

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

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

Change .Less files to .css

//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

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.