gulp是什么昧碉？
gulp是一個基于流的構建工具埃脏，可以自動執(zhí)行指定的任務，簡潔且高效
gulp能做什么
- 開發(fā)環(huán)境下丢郊，想要能夠按模塊組織代碼盔沫，監(jiān)聽實時變化
- css/js預編譯，postcss等方案枫匾，瀏覽器前綴自動補全等
- 條件輸出不同的網頁架诞，比如app頁面和mobile頁面
- 線上環(huán)境下，我想要合并干茉、壓縮 html/css/javascritp/圖片谴忧，減少網絡請求，同時降低網絡負擔
- 等等...
安裝gulp
npm install -g gulp //全局安裝
npm install --save-dev gulp //安裝到當前項目并在package.json中添加依賴
核心API介紹
gulp.task task(name[, deps], fn)
task()方法用于定義任務角虫，傳入名字沾谓、依賴任務數組、函數即可上遥，gulp會先執(zhí)行任務數組搏屑，結束后調用定義的函數争涌，可以通過此手段控制任務的執(zhí)行順利粉楚。
例子：要定義一個任務build來執(zhí)行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()方法用來寫文件，第一個參數表示最終輸出的目錄名继蜡。注意回俐，它無法允許我們指明最終輸出的文件名逛腿，只能指定輸出文件夾名，而且在文件夾不存在的情況下會自動創(chuàng)建仅颇。
例子：把開發(fā)目錄src下的js文件輸出到部署目錄dist下
gulp.src('src/**/*.js')
.pipe(gulp.dest('dist'))
gulp.watch watch(globs[, opts], cb) or watch(globs[, opts], tasks)
watch()方法可以監(jiān)聽文件单默，它接受一個glob或者glob數組以及一個任務數組來執(zhí)行回調
// 當templates目錄下的模板文件發(fā)生變化，自動執(zhí)行編譯任務
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對象可以監(jiān)聽很多事件:
- change 文件變化時觸發(fā)
- end 在watcher結束時觸發(fā)
- error 在出現error時觸發(fā)
- ready 在文件被找到并正被監(jiān)聽時觸發(fā)
- nomatch 在glob沒有匹配到任何文件時觸發(fā)
- Watcher對象也包含了一些可以調用的方法：
- watcher.end() 停止watcher
- watcher.files() 返回watcher監(jiān)聽的文件列表
- watcher.add(glob) 將與指定glob相匹配的文件添加到watcher（也接受可選的回調當第二個參數）
- watcher.remove(filepath) 從watcher中移除個別文件
配置文件 gulpfile.js
gulp流程圖
任務會讓所有的文件匹配js/*.js忘瓦，并且執(zhí)行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'));
});
