Task automation with Gulp.js

Posted on: January 13, 2016 by Dimitar Ivanov

What is Gulp

Gulp is a streaming build system for development. It allows you to automate different tasks like CSS minification, javascript compression, less/sass compiling.

Installing Gulp

To install gulp as global package use the -g modifier.

npm install -g gulp

Creating a package.json

automatic - next command will guide you through a bunch of questions and at the end will create a package.json file.
```
npm init
```
manual - create a file named package.json and save it in the project root folder.
```
{
  "name": "your-project-name",
  "version": "1.0.0"
}
```

Create a gulpfile.js

Create a gulpfile.js at the root of your project:

var gulp = require('gulp');

gulp.task('default', function() {
    // place code for your default task here
});

Run Gulp

To run the default task:

gulp

To run a specific task:

gulp minify

Minify CSS

To minify your styles use the gulp-minify-css plugin.

Install Minify Css
```
npm install gulp-minify-css --save-dev
```

Append to gulpfile.js:

var minyfyCss = require('gulp-minify-css');
 
gulp.task('minify', function() {
    return gulp.src('src/css/*.css')
        .pipe(minyfyCss())
        .pipe(gulp.dest('assets/css'));
});

Compress Javascript

To minify your scripts use the gulp-uglify plugin.

Install UglifyJS
```
npm install gulp-uglify --save-dev
```

Amend the gulpfile.js:

var uglify = require('gulp-uglify');
 
gulp.task('compress', function() {
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'));
});

Compile LESS

To compile your less files to css use the gulp-less plugin.

Install Less for Gulp
```
npm install gulp-less --save-dev
```

Append to gulpfile.js:

var less = require('gulp-less');
 
gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

File watcher

To watch for changes use the gulp-watch plugin.

Install file watcher for Gulp
```
npm install gulp-watch --save-dev
```

How to use gulp watch

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

gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(watch('src/less/*.less'))
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

Full example

The final version of package.json:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-less": "^3.0.5",
    "gulp-minify-css": "^1.2.3",
    "gulp-uglify": "^1.5.1",
    "gulp-watch": "^4.3.5"
  }
}

The final version of gulpfile.js:

var gulp = require('gulp');
var less = require('gulp-less');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');

gulp.task('default', ['compress', 'minify', 'less'], function () {

});

gulp.task('less', function() {
    return gulp.src('src/less/*.less')
        .pipe(watch('src/less/*.less'))
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

gulp.task('minify', function() {
    return gulp.src('src/css/*.css')
        .pipe(watch('src/css/*.css'))
        .pipe(minifyCss())
        .pipe(gulp.dest('assets/css'));
});
 
gulp.task('compress', function() {
    return gulp.src('src/js/*.js')
        .pipe(watch('src/js/*.js'))
        .pipe(uglify())
        .pipe(gulp.dest('assets/js'));
});

Conclusion

Using a build system as Gulp can boost your performance with task automation as like as minify CSS, uglify javascript, compile LESS/SASS.

Subscribe to our newsletter

Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.

0 Comments

Comments are closed

Categories