gulp安裝
- 全局安裝 gulp：
$ npm install --global gulp
- 作為項目的開發(fā)依賴（devDependencies）安裝：
$ npm install gulp --save-dev
- 在項目根目錄下創(chuàng)建一個名為 gulpfile.js 的文件并導入組件：
var gulp = require('gulp'),//導入gulp modul
minifycss = require('gulp-minify-css'),//css壓縮組件
concat = require('gulp-concat'),//組合組件
uglify = require('gulp-uglify'),//js壓縮組件
rename = require('gulp-rename')//重命名組件
jshint=require('gulp-jshint') //js檢查組件
notify=require('gulp-notify'); //提示組件
gulp.task('default', function() {
// 將你的默認的任務代碼放在這
});
- 運行 gulp：
$ gulp
默認的名為 default 的任務（task）將會被運行逗柴，在這里姜钳，這個任務并未做任何事情琼牧。
想要單獨執(zhí)行特定的任務（task）市咽，請輸入 gulp <task> <othertask>独榴。
gulp.src
- gulp.src(globs[, options])
輸出符合提供的匹配模式或者匹配模式的數(shù)組的文件（.html,[ .js, .css ,.json, .jade ]）,返回一個文件流，它可以被輸（pipe）送到其他插件中
gulp.src('client/templates/*.jade')
.pipe(jade())//jade是源于nodejs的html模板引擎
.pipe(minify())//壓縮
.pipe(gulp.dest('build/minified_templates'));//輸出到名為build下minified_templates的文件夾
- globs
類型： String 或 Array
要操作的文件的路徑或包含文件路徑的數(shù)組 - options
類型：object
通過 glob-stream 所傳遞給 node-glob 的參數(shù)蜈七。gulp還 增加了一些額外的選項參數(shù)：- options.buffer
類型： Boolean
默認值： true
如果該項被設置為 false谣妻，那么將會以流( stream) 方式返回 file.contents,而不是文件緩沖( buffer) 的形式,這在處理一些大文件的時候?qū)苡杏谩?strong>注意：插件可能并不會實現(xiàn)對 stream 的支持搏予。
- options.buffer
- options.read
類型： Boolean
默認值： true
如果該項被設置為 false， 那么 file.contents會返回空值（null）贮尖，也就是并不會去讀取文件蹬蚁。 - options.base
類型： String
默認值： 將會加在 glob 之前 (請看 glob2base)
在一個路徑為 client/js/somedir的目錄中，有一個文件叫 somefile.js
gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 并且將 `base` 解析為 `client/js/`
.pipe(minify())
.pipe(gulp.dest('build')); // 寫入 'build/somedir/somefile.js'
gulp.src('client/js/**/*.js', { base: 'client' })
.pipe(minify())
.pipe(gulp.dest('build')); // 寫入 'build/js/somedir/somefile.js'
gulp.dest
- gulp.dest(path[, options])
能被輸送( pipe) 進來外臂，并且將會寫文件坐儿。并且重新輸出（emits）所有數(shù)據(jù)，因此你可以將它 pipe 到多個文件夾宋光。如果某文件夾不存在挑童，將會自動創(chuàng)建它。
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
文件被寫入的路徑是以所給的相對路徑根據(jù)所給的目標目錄計算而來跃须。類似的站叼，相對路徑也可以根據(jù)所給的 base 來計算。
path
類型： String or Function
文件將被寫入的路徑（輸出目錄）菇民。也可以傳入一個函數(shù)尽楔，在函數(shù)中返回相應路徑投储，這個函數(shù)也可以由 vinyl 文件實例 來提供。-
options
類型： Object- options.cwd
類型： String 默認值： process.cwd()
輸出目錄的 cwd 參數(shù)阔馋，只在所給的輸出目錄是相對路徑時候有效玛荞。 - options.mode
類型： String 默認值： 0777
八進制權(quán)限字符，用以定義所有在輸出目錄中所創(chuàng)建的目錄的權(quán)限呕寝。
- options.cwd
gulp.task
- gulp.task(name[, deps], fn)
定義一個使用 Orchestrator 實現(xiàn)的任務（task）勋眯。
gulp.task('somename', function() {
// 做一些事
});
- name
任務的名字，如果需要在命令行中運行某些任務下梢，那么客蹋，在名字中就不要使用空格。 - deps
類型： Array
一個包含任務列表的數(shù)組孽江，這些任務會在你當前任務運行之前完成讶坯。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// 做一些事
});
注意： 為了任務不在這些前置依賴的任務完成之前運行，請一定要確保你所依賴的任務列表中的任務都使用了正確的異步執(zhí)行方式：使用一個 回調(diào)函數(shù)callback岗屏，或者返回一個 promise 或 stream辆琅。
fn
該函數(shù)定義任務所要執(zhí)行的一些操作。通常來說这刷，它會是這種形式：gulp.src().pipe(someplugin())婉烟。任務異步執(zhí)行
如果fn接受了一個 callback、返回一個 stream暇屋、返回一個 promise隅很，任務就可以異步執(zhí)行。
// 在 shell 中執(zhí)行一個命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
// 編譯 Jekyll
exec('jekyll build', function(err) {
if (err) return cb(err); // 返回 error
cb(); // 完成 task
});
});
gulp.task('somename', function() {
var stream = gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
return stream;
});
var Q = require('q');
gulp.task('somename', function() {
var deferred = Q.defer();
// 執(zhí)行異步的操作
setTimeout(function() {
deferred.resolve();
}, 1);
return deferred.promise;
});
注意： 默認的率碾，task 將以最大的并發(fā)數(shù)執(zhí)行叔营，也就是說，gulp 會一次性運行所有的 task 并且不做任何等待所宰。如果你想要創(chuàng)建一個序列化的 task 隊列绒尊，并以特定的順序執(zhí)行，你需要做兩件事：
- 給出一個提示仔粥，來告知 task 什么時候執(zhí)行完畢婴谱，
- 并且再給出一個提示，來告知一個 task 依賴另一個 task 的完成躯泰。
