前端開發建構工具---Gulp介紹

What is gulp?

gulp 是一個基于Nodejs的任務運作器(合并、壓縮、編譯等任務)，類似Grunt，但gulp的原則是保持簡單，使任務檔案更像代碼而不是配置。

Why gulp?

• 易用： 代碼優于配置的原則拆分複雜的任務使其簡單化，編寫出易讀的任務程式并保持可控性
• 易學：核心API少，易于上手
• 高效：基于流的操作無需将輸出寫入臨時檔案，加快建構速度
• 高品質：插件編寫遵從單一責任原則------插件很簡單并且隻做一件事情

How  to use?

首先安裝gulp

$ npm install gulp

$ cd project_path
$ npm install gulp --save-dev  //添加項目開發依賴
           

接下來介紹4個核心API：

1. gulp.task(name[, deps], fn)     建立任務
2. gulp.src(glob [, options])       傳回可讀檔案流
3. gulp.dest(path)      傳回可寫檔案流
4. gulp.watch(glob [, opts], tasks)      監視檔案變化并且運作相應任務

這裡以幾個基本任務(合并、重命名、壓縮js檔案)為例：

1、安裝相應插件：

$ npm install gulp-concat --save-dev  //合并插件
 $ npm install gulp-rename --save-dev  //重命名插件
 $ npm install gulp-uglify--save-dev  //js壓縮插件
           

2、編寫gulpfils.js：

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify');

gulp.task('process-scripts', function() {
    return gulp.src('src/scripts/*.js')  // 擷取src/scripts/檔案夾下的所有js檔案
    .pipe(concat('main.js'))  // 合并後的檔案命名為main.js
    .pipe(gulp.dest('dest/scripts/'))  // 輸出main.js到desc/scripts檔案夾下
    .pipe(rename({suffix: '.min'}))  // 重命名main.js為main.js.min
    .pipe(uglify())  // 壓縮main.js.min
    .pipe(gulp.dest('dest/scripts/'))  //<span style="font-family: Arial, Helvetica, sans-serif;"> 輸出main.js到/desc/scripts檔案夾下</span>
})
           

3、運作任務：

$ gulp