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
• Speed than grunt

Difference

Writing Task

gulpfile.js

• gulp.task
• gulp.src
• gulp.dest
• gulp.watch
• gulp.run

var gulp  = require('gulp');

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

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

Using Plugins

js-minifier

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

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']);

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

Compile Sass

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

// 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']);

Prefix & Minify CSS

// 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']);

JSHint & Notify

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']);

thx