Introduce Gulp

Gulp is an open source, a streaming build system, extensible, powerfull and efficient JS task runner buit on NodeJS

Introduce Gulp(cont)

Easy to Use

By preferring code over configuration, gulp keeps things simple and makes complex tasks manageable.

Efficient

Using the power of node streams, gulp gives you fast builds that don't write intermediary files to disk.

High Quality

By enforcing strict plugin guidelines, we ensure that plugins stay simple and work as expected.

Easy to Learn

Using node best practices and maintaining a minimal API surface, your build works exactly as you would imagine.

Introduce Gulp(cont)

Using Gulp

Installation

1. Install gulp globally

2. Install Gulp in devDependencies

3. Create a gulpfile.js

Using Gulp(cont)

Installation

//Install gulp globally in CLI
$ npm i -g gulp


//Install gulp in your project devDependencies
$ npm i --save-dev gulp

// add gulp package
var gulp  = require('gulp');
    
// create a default task and just log a message
gulp.task('default', function() {
  return console.log('Gulp is running!')
});

Add default task in gulpfile.js file:

Using Gulp(cont)

Installation

Run 'gulp' in CLI:

And here is result:

//Run gulp
$ gulp

Using Gulp(cont)

Top level functions

gulp.task(name[, deps], fn)

gulp.src(globs[, options])

//gulp task example
gulp.task('work', ['gitclone', 'code', 'pullrequest', 'timing'], function() {
  //TODO
});

//get source files
gulp.src(['src/js/plugins/*.js', 'src/js/main.js'])


//We can use .pipe() for chaining it’s output into other plugins.

Using Gulp(cont)

Top level functions

gulp.dest(path[, options])

gulp.watch(glob[, opts], tasks)

//Copy any html files from src folder to public folder
gulp.src('src/*.html').pipe(gulp.dest('public'));

//Watching js files and call reload task
var watcher = gulp.watch('js/**/*.js', ['reload']);

//listen change event
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type);
});

Using Gulp(cont)

Concatenating files

Install gulp-concat plugin in devDependencies:

Or declare in package.json for npm install:

Example:

npm install gulp-concat --save-dev

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

// Concat js files
gulp.task('concat', function() {
    return gulp.src('src/js/*.js').pipe(concat('main.js'))
           .pipe(gulp.dest('public/js'));
});

"gulp-concat": "~2.6.0"

Using Gulp(cont)

Processor jade files

Install gulp-jade plugin in devDependencies:

Or declare in package.json for npm install:

Example:

npm install gulp-jade --save-dev

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

gulp.task('jade', function() {
    var options = {pretty: true};
    gulp.src('src/view/*.jade')
        .pipe(jade(options)
        .pipe(gulp.dest('public/'));
});

"gulp-jade": "~1.0.1"

Using Gulp(cont)

Using gulp-jshint

Install gulp-jshint plugin in devDependencies:

Or declare in package.json for npm install:

Example:

npm install gulp-concat --save-dev

var jshint = require('gulp-jshint');
 
gulp.task('lint', function() {
  return gulp.src('src/js/*.js')
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter('default'))
});

"gulp-jshint": "~1.11.2"

Using Gulp(cont)

Minify javascrip files

Install gulp-uglify plugin in devDependencies:

Or declare in package.json for npm install:

Example:

npm install gulp-uglify --save-dev

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

// Concat js files
gulp.task('uglify', function() {
    return gulp.src('src/js/*.js').pipe(uglify())
           .pipe(gulp.dest('public/js'));
});

"gulp-uglify": "~1.2.0"

Using Gulp(cont)

Build LESS files

Install gulp-less plugin in devDependencies:

Or declare in package.json for npm install:

Example:

npm install gulp-less --save-dev

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

"gulp-less": "~3.0.3"

Using Gulp(cont)

Preprocess SCSS

Install gulp-ruby-sass plugin in devDependencies:

Or declare in package.json for npm install:

Example:

npm install gulp-ruby-sass --save-dev

var sass = require('gulp-ruby-sass');

gulp.task('sass', function() {
    return sass('src/scss/style.scss', {style: 'compressed'})
        .pipe(gulp.dest('public/css'));
});

"gulp-ruby-sass": "~1.0.5"

Using Gulp(cont)

Minify CSS file

Install gulp-minify-css plugin in devDependencies:

Or declare in package.json for npm install:

Example:

npm install gulp-minify-css --save-dev

var minifyCss = require('gulp-minify-css');
 
gulp.task('minify-css', function() {
  return gulp.src('src/stylesheets/*.css')
    .pipe(minifyCss({compatibility: 'ie8'}))
    .pipe(gulp.dest('public/stylesheets'));
});

"gulp-minify-css": "~1.2.0"

Using Gulp(cont)

Compress images

Install gulp-imagemin

Example:

//From CLI:
npm install gulp-imagemin --save-dev

//Or declare in package.json
"gulp-imagemin": "~2.3.0"

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

gulp.task('imagemin', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin({ 
        optimizationLevel: 3, 
        progressive: true, 
        interlaced: true }))
    .pipe(gulp.dest('public/assets/img'));
});

Using Gulp(cont)

Compress images with cache

Install gulp-cache

Example:

//From CLI:
npm i gulp-cache --save-dev

//Or declare in package.json:
"gulp-cache": "~0.2.10"

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

gulp.task('imagemin', function() {
  return gulp.src('src/images/**/*')
    .pipe(cache(imagemin({ 
        optimizationLevel: 3, 
        progressive: true, 
        interlaced: true })))
    .pipe(gulp.dest('public/assets/img'));
});

Using Gulp(cont)

Live reload

Install gulp-livereload

Example:

//From CLI
npm i gulp-livereload--save-dev

//Or declare in package.json
"gulp-livereload": "~3.8.0"

var livereload = require('gulp-livereload'),

gulp.task('watch', function() {
  livereload.listen();

  gulp.watch(['src/js/**', 'src/scss/**', 'src/images/**'])
      .on('change', livereload.changed);
});

Using Gulp(cont)

Rename files

Install gulp-rename

Example:

//From CLI:
npm i gulp-rename --save-dev

//or declare in package.json
"gulp-rename": "~1.2.2"

var rename = require("gulp-rename");
 
//rename via string 
gulp.src("./src/readme.txt")
  .pipe(rename("guide/README.md"))
  .pipe(gulp.dest("./public")); // ./public/guide/README.md 

//Can use hash
//.pipe(rename({dirname: "/", basename: "", prefix: "", suffix: "", extname: ".md"}))

Using Gulp(cont)

Build coffe script files

Install gulp-coffee

Example:

//From CLI:
npm i gulp-coffe --save-dev

//or declare in package.json
"gulp-coffee": "~2.3.1"

var coffee = require('gulp-coffee');
 
gulp.task('coffee', function() {
  gulp.src('./src/js/*.coffee')
    .pipe(coffee({bare: true}))
    .pipe(gulp.dest('./public/js/'));
});

Using Gulp(cont)

Upload files to FTP or SFTP:

Install gulp-ftp

Example:

//Install in devDependencies from CLI:
npm i gulp-ftp --save-dev

//or in package.json for npm install
"gulp-ftp": "~1.0.4"

var ftp = require('gulp-ftp');
 
gulp.task('deployFfp', function () {
    return gulp.src('src/*')
        .pipe(ftp({
            host: 'www.yourdomain.com',
            user: 'yourusername',
            pass: 'yourpassword'
        }));
});

Using Gulp(cont)

Run web server with gulp-connect

Install gulp-connect

Example:

//From CLI:
npm i gulp-connect --save-dev

//Or declare in package.json
"gulp-connect": "*"

var connect = require('gulp-connect');
 
gulp.task('server', function () {
  connect.server({
    root: ['public'],
    port: 3000,
    livereload: true
  });
});

Using Gulp(cont)

Using browser-sync from browsersync.io in gulp

Install browser-sync

Example:

//From CLI
npm install browser-sync --save-dev

//or declare in package.json:
"browser-sync": "~2.7.13"

var browserSync = require('browser-sync').create();

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            port: 3000, 
            baseDir: "public"
        }
    });
});

Using Gulp(cont)

Put all together

Gulp vs Grunt

//TODO

Installation

Syntax

Speed

Plugins

Gulp vs Grunt

//TODO

Installation

Syntax

Speed

Plugins