What's Gulp.js?

(前端) 工程的建構工具

為何需要使用建構工具?

除去很多除去很多重複且繁瑣的人肉工作

操作例如

• 合併靜態檔案
• 壓縮檔案大小
• 打包應用程式
• 編譯模組
• 測試、部署
• ... 

諸多建構工具

• C - Make
• 解決跨平台而生：Java - Ant, Ruby: Rake, Node: Grunt

Grunt vs Gulp

常拿來比較的建構工具

雖然我沒用過 Grunt

在處理 Task 原理不同

Pipeline Streaming

Read in data and output data.

Everything can be processed in memory.

Gulp

1. 易於學習使用
2. 高效能
3. Configuration file 簡易

Grunt

1. much wider community support
2. number of plugins

Install

$ npm install -g gulp

語法介紹

1. Task
2. Source / Pipeline / Destination
3. Dependency tasks
4. Watch

1. Task

// gulpfile.js

var gulp = require('gulp');

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

$ gulp task1

2. Source / Pipeline / Destination

// gulpfile.js

var gulp = require('gulp'),
    gulpConvert = require('gulp-convert');

gulp.task('yml2json', function(){
  return gulp.src('documents/*.yml').pipe(gulpConvert({
    from: 'yml',
    to: 'json'
  })).pipe(gulp.dest('documents'));
});

$ gulp yml2json

[22:15:11] Using gulpfile ~/code/gulpfile.js
[22:15:11] Starting 'yml2json'...
[22:15:11] Finished 'yml2json' after 47 ms

LiveScript version

// gulpfile.js

var gulp = require('gulp'),
    gulpConvert = require('gulp-convert');

gulp.task('yml2json', function(){
  return gulp.src('documents/*.yml').pipe(gulpConvert({
    from: 'yml',
    to: 'json'
  })).pipe(gulp.dest('documents'));
});

# gulpfile.ls

require! { gulp, gulpConvert }

gulp.task \yml2json, ->
  gulp.src \documents/*.yml
  .pipe gulpConvert { from: \yml, to: \json }
  .pipe gulp.dest \documents

3. Dependency tasks

# gulpfile.ls
gulp.task \publish, <[ cleanDist usemin productionexpress mobileusemin htmlmin copy ]>

// gulpfile.js
gulp.task('publish', ['cleanDist', 'usemin', 'productionexpress', 'mobileusemin', 'htmlmin', 'copy']);

$ gulp publish

[17:30:03] Using gulpfile ~/code/gulpfile.js
[17:30:03] Starting 'cleanDist'...
[17:30:03] Starting 'usemin'...
[17:30:03] Starting 'productionexpress'...
[17:30:03] Listening on port: 1609
[17:30:03] Finished 'productionexpress' after 3.89 ms
[17:30:03] Starting 'mobileusemin'...
[17:30:03] Starting 'htmlmin'...
[17:30:03] Starting 'copy'...
[17:30:03] Finished 'cleanDist' after 20 ms
[17:30:33] Finished 'htmlmin' after 30 s
[17:30:33] Finished 'usemin' after 30 s
[17:30:33] Finished 'copy' after 30 s
[17:30:34] Finished 'mobileusemin' after 30 s
[17:30:34] Starting 'publish'...
[17:30:34] Finished 'publish' after 8.27 μs

4. Watch

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was running tasks...');
});

# gulpfile.ls

require! { gulp, \gulp-livereload, \tiny-lr }
server = tiny-lr!

gulp.task \html, ->
  gulp.src \views/*.html
  .pipe gulp-livereload server

gulp.task \watch, ->
  server.listen 35799, ->
    gulp.watch \views/*.html, <[ html ]>
    gulp.watch \views/**/*.html, <[ html ]>

我們拿來應用在專案上

API / F2E / Mobile

舉例

• Watch Html, CSS, JS
• Compile Stylus  -> CSS
• Compile LiveScript -> JS
• Minify html, css, js files
• Convert file: Yaml -> JSON
• ...