Gulp

setup

1. install Node.js

2.

$ npm install gulp -g

4. create a gulpfile.js at the root of project

var gulp = require('gulp');

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

3.

$ npm install --save-dev gulp

Gulp Method

• gulp.task
  定義工作內容
• gulp.watch
  關注指定檔案是否異動
• gulp.src
  指定檔案來源
• gulp.dest
  指定檔案存放位置

task('default', [A, B, ...])

src(files)

watch( 'files', task.A )

pipe(...)

dest(files)

task.A

task.B

pipe(...)

pipe(...)

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

gulp.task('default', function() {
  return gulp.src('img/*')
    .pipe(imagemin())
    .pipe(gulp.dest('min-img'));
});

gulpfile.js

gulp-imagemin

$ npm install --save-dev gulp-imagemin

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

gulp.task('default', function() {
  return gulp.src('img/*')
    .pipe(changed('min-img'))
    .pipe(imagemin())
    .pipe(gulp.dest('min-img'));
});

gulpfile.js

gulp-changed

$ npm install --save-dev gulp-changed

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

gulp.task('img-min', function() {
  return gulp.src('img/*')
    .pipe(changed('min-img'))
    .pipe(imagemin())
    .pipe(gulp.dest('min-img'));
});

gulp.task('watch', function(){
    gulp.watch('img/*',['img-min']);
});

gulp.task('default', ['watch'] );

gulp.watch

var gulp = require('gulp');
/* ... */
var mainBowerFiles = require('main-bower-files');

gulp.task('bower-main-file', function(){
    return gulp.src(mainBowerFiles())
    	.pipe(gulp.dest("./lib"));
});

gulp.task('default', [ 'bower-main-file'] );

main-bower-files

$ npm install --save-dev main-bower-files

var gulp = require('gulp');

gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(express.static(__dirname));
  app.listen(4000);
});

gulp.task('default', ['express'] );

Live Reload(1/3)

$ npm install --save-dev express

• Express

var gulp = require('gulp');

gulp.task('express', function() {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')({port: 4002}));
  app.use(express.static(__dirname));
  app.listen(4000);
});

Live Reload(2/3)

npm install tiny-lr connect-livereload --save-dev

• tiny-lr

• connect-liverelad

var tinylr;

gulp.task('livereload', function() {
  tinylr = require('tiny-lr')();
  tinylr.listen(4002);
});

gulp.task('watch', function() {
  gulp.watch('*.html', function(event){

      var fileName = require('path').relative(__dirname, event.path);

      tinylr.changed({
        body: {
          files: [fileName]
        }
      });
  });
});

gulp.task('default', ['express', 'livereload', 'watch']);

Live Reload(3/3)

gulp-plugins

• gulp-connect
  開啟server
• gulp-concat
  合併程式
• gulp-clean
  清除檔案
• gulp-rename
  重新命名檔案
• gulp-minify-css
  壓縮CSS
• gulp-jshint
  JS Debug
• gulp-uglify
  壓縮 JS

preprocessor

• gulp-compass
   
• gulp-less
   
• gulp-jade
   
• gulp-coffee
   
• gulp-livescript