Gulp

Using Gulp as Task Runner

&

automating tasks.

Contents

  • Introduction to Gulp
  • Installing Gulp.
  • Writing Tasks.
  • Using Plugins. (JSmin)
  • Watching Files.
  • Compiling SASS.
  • Browser Prefixing.
  • Rename.
  • Concat.
  • JSLint.
  • Live Reload.
  • Image Compression.
  • Delete.

Introduction to Gulp

* Task Runner

* lll'ar to Grunt.

* Speed Test Results.

Difference

Grunt

Gulp

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: 'app/styles',
        src: '**/*.scss',
        dest: '../.tmp/styles',
        expand: true,
        ext: '.css'
      }]
    }
  },
  autoprefixer: {
    options: ['last 1 version'],
    dist: {
      files: [{
        expand: true,
        cwd: '.tmp/styles',
        src: '{,*/}*.css',
        dest: 'dist/styles'
      }]
    }
  },
  watch: {
    styles: {
      files: ['app/styles/{,*/}*.scss'],
      tasks: ['sass:dist', 'autoprefixer:dist']
    }
  }
});
grunt.registerTask('default', ['styles', 'watch']);
gulp.task('sass', function () {
  gulp.src('app/styles/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer('last 1 version'))
    .pipe(gulp.dest('dist/styles'));
});

gulp.task('default', function() {
  gulp.run('sass');
  gulp.watch('app/styles/**/*.scss', function() {
    gulp.run('sass');
  });
});

Installing Gulp

Check if node is Installed

Install Gulp Globally

Install Dev Dependencies

node --version || node -v
npm install -global gulp
npm init
{
  "name": "gulp-demo",
  "version": "1.0.0",
  "description": "Some Description goes here.",
  "author": "Yoganandh",
    "dependencies" : {
        "gulp": "*"
    }
}

Writing Tasks

gulpfile.js

var gulp  = require('gulp');

// create a default task and just log a message
gulp.task('default', function() {
    console.log('Gulp Fired.!');
});
  • gulp.task
  • gulp.src
  • gulp.dest
  • gulp.watch

https://github.com/gulpjs/gulp/blob/master/docs/API.md

Using Plugins

JS Minifier

var uglify = require('gulp-uglify');
npm install --save-dev gulp-uglify

Installation

Initilization

...
...pipe(uglify())
...
...

Usage

// grab our gulp packages
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('js-min', function() {
    gulp.src('js/*.js') // files
        .pipe(uglify()) //option {compress: true}
        .pipe(gulp.dest('js/min/')); //folder
});

// create a default task and just log a message
gulp.task('default', ['js-min']);

Watch Files

gulp.watch(['./path/to/files/*.*', './another/path/*.*'], ['task-1', 'task-2']);

Usage

// grab our gulp packages
var gulp = require('gulp');
...
...

gulp.task('watch', function(){
    gulp.watch(['./path/to/files/*.*', '!./ignore/path/to/files/*.*'], ['js-min']);
});

...
...

Compile SASS

Using libsass

var sass = require('gulp-sass');
npm install --save-dev gulp-sass

Installation

Initilization

...
...pipe(sass())
...
...

Usage

// grab our gulp packages
var gulp = require('gulp');
...
var sass = require('gulp-sass');

gulp.task('styles', function() {
    gulp.src('./scss/**/*.scss') // files
        .pipe(sass()) //option {}
        .pipe(gulp.dest('./build/css')); //folder
});

// create a default task and just log a message
gulp.task('default', ['js-min', ... , 'styles']);

Prefix & Minify CSS

var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
npm install --save-dev gulp-autoprefixer gulp-minify-css

Installation

Initilization

...
.pipe(autoprefixer())
.pipe(minifycss())
...
...

Usage

// grab our gulp packages
var gulp = require('gulp');
...
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css')

gulp.task('styles', function() {
    gulp.src('./scss/**/*.scss') // files
        .pipe(sass()) //option {}
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest('./build/css')); //folder
});

// create a default task and just log a message
gulp.task('default', ['js-min', ... , 'styles']);

Rename & Duplicate

var rename = require('gulp-rename');
npm install --save-dev gulp-rename

Installation

Initilization

...
.pipe(rename({
     suffix: '.min'
}))
...
...

Usage

// grab our gulp packages
var gulp = require('gulp');
...
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css')

gulp.task('styles', function() {
    gulp.src('./scss/**/*.scss') // files
        .pipe(sass()) //option {}
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('./build/css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('./build/css'));
});

// create a default task and just log a message
gulp.task('default', ['js-min', ... , 'styles']);

Concat & Condition

var concat = require('gulp-concat');
var gutil = require('gulp-util');
npm install --save-dev gulp-concat gulp-util

Installation

Initilization

...
.pipe(concat('crushed.min.js'))
.pipe(debug ? gutil.noop() : uglify())
...
...

Usage

var gulp = require('gulp');
...
var concat = require('gulp-concat');
var gutil = require('gulp-util');

var debug = true;

gulp.task('js-min', function() {
	gulp.src('./js/**/*.js') // files
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(debug ? gutil.noop() : uglify()) //option {compress: true}
		.pipe(gulp.dest('./build/js/'))
		.pipe(concat('crushed.min.js'))
		.pipe(debug ? gutil.noop() : uglify())
		.pipe(gulp.dest('./build/js/concat'));
});

// create a default task and just log a message
gulp.task('default', ['js-min', ... , 'styles']);

JSHint & Notify

var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var notify = require('gulp-notify');
npm install --save-dev gulp-jshint jshint-stylish gulp-notify

Installation

Initilization

...
.pipe(jshint())
.pipe(jshint.reporter(stylish))
...
...

Usage

var gulp = require('gulp');
...
var concat = require('gulp-concat');
var gutil = require('gulp-util');

var debug = true;

gulp.task('js-lint', function() {
	return gulp.src('./js/**/*.js')
		.pipe(jshint())
		.pipe(jshint.reporter(stylish))
		.pipe(jshint.reporter('fail'))
		.pipe(notify({
			title: 'JSHint',
			message: 'JSHint Passed.'
		}));
});

// create a default task and just log a message
gulp.task('default', ['js-lint', 'js-min', ... , 'styles']);

Gulp

By Mohammed Amine EL JIRARI

Source: ‏‏‎

Gulp

  • 692

More from Mohammed Amine EL JIRARI