gulp是什么？
gulp是一個基于流的構建工具，可以自動執行指定的任務，簡潔且高效
gulp能做什么
- 開發環境下，想要能夠按模塊組織代碼，監聽實時變化
- css/js預編譯，postcss等方案，瀏覽器前綴自動補全等
- 條件輸出不同的網頁，比如app頁面和mobile頁面
- 線上環境下，我想要合并、壓縮 html/css/javascritp/圖片，減少網絡請求，同時降低網絡負擔
- 等等...
安裝gulp
npm install -g gulp //全局安裝
npm install --save-dev gulp //安裝到當前項目并在package.json中添加依賴
核心API介紹
gulp.task task(name[, deps], fn)
task()方法用于定義任務，傳入名字、依賴任務數組、函數即可，gulp會先執行任務數組，結束后調用定義的函數，可以通過此手段控制任務的執行順利。
例子：要定義一個任務build來執行css、js、imgs這三個任務，我們可以通過指定一個任務數組而不是函數來完成。
gulp.task('build', ['css', 'js', 'imgs']);
gulp.src src(globs[, options])
src()方法輸入一個glob或者glob數組，然后返回一個可以傳遞給插件的數據流
Gulp使用node-glob來從你指定的glob里面獲取文件：
-
app.js精確匹配 -
*.js能匹配js后綴的文件 -
**/*.js能匹配多級目錄下的js文件（也包含當前目錄下） -
!js/app.js精確排除
例子：js目錄下包含了壓縮和未壓縮的js文件，我們想要壓縮還沒有被壓縮的文件
gulp.src(['js/**/*.js', '!js/**/*.min.js'])
gulp.dest dest(path[, options])
dest()方法用來寫文件，第一個參數表示最終輸出的目錄名。注意，它無法允許我們指明最終輸出的文件名，只能指定輸出文件夾名，而且在文件夾不存在的情況下會自動創建。
例子：把開發目錄src下的js文件輸出到部署目錄dist下
gulp.src('src/**/*.js')
.pipe(gulp.dest('dist'))
gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks)
watch()方法可以監聽文件，它接受一個glob或者glob數組以及一個任務數組來執行回調
// 當templates目錄下的模板文件發生變化，自動執行編譯任務
gulp.task('watch', function (event) {
gulp.watch('templates/*.tmpl.html', ['artTemplate']);
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});
Gulp.watch()的另一個非常好的特性是返回watcher對象
- watcher對象可以監聽很多事件:
- change 文件變化時觸發
- end 在watcher結束時觸發
- error 在出現error時觸發
- ready 在文件被找到并正被監聽時觸發
- nomatch 在glob沒有匹配到任何文件時觸發
- Watcher對象也包含了一些可以調用的方法：
- watcher.end() 停止watcher
- watcher.files() 返回watcher監聽的文件列表
- watcher.add(glob) 將與指定glob相匹配的文件添加到watcher（也接受可選的回調當第二個參數）
- watcher.remove(filepath) 從watcher中移除個別文件
配置文件 gulpfile.js
gulp流程圖
任務會讓所有的文件匹配js/*.js，并且執行JSHint，然后打印輸出結果，取消文件縮進，最后把他們合并起來，保存為build/app.js，整個過程如下圖所示：
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat');
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
