gulp API 簡介

1、gulp API 簡介

            gulp 自己能作的事情很是少，主要是經過插件來提供各類功能，gulp 自己只提供了4個很是簡潔的 API, 掌握這4個 API 你就基本掌握了 gulp 的所有。

                    一、gulp.src(globs[, options])

                    二、gulp.dest(path[, options])

                    三、gulp.task(name[, deps], fn)

                    四、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

2、gulp.src(globs[, options])

                說明：返回當前指定文件流至可用插件。

                globs：須要處理的源文件匹配符路徑。類型(必填)：String or StringArray。

                    通配符路徑匹配示例：

                            一、"src/index.js": 指定具體文件；

                            二、"{}": 匹配多個屬性。例：src/{a,b}.js(包含 a.js 和 b.js 文件)  src/*.{jpg,png,gif}(包含 src 下的全部 jpg/png/gif 文件)；

                            三、"!": 排除指定文件。例：!src/index.js(不包含 src 下的 index.js 文件)；

                            四、"*.scss": * 號匹配當前目錄任意文件，因此這裏 *.scss 匹配當前目錄下全部 scss 文件；

                            五、"**/*.scss": 匹配當前目錄及其子目錄下的全部 scss 文件；

                            六、"*.+(scss|sass)": + 號後面會跟着圓括號，裏面的元素用 | 分割，匹配多個選項。這裏將匹配 scss 和 sass 文件;

                options：類型(可選)：Object，有3個屬性 buffer、read、base。

                            一、options.buffer：類型：Boolean  默認：true 設置爲 false，將返回 file.content 的流而且不緩衝文件，處理大文件時很是有用；

                            二、options.read：類型：Boolean  默認：true 設置 false，將不執行讀取文件操做，返回null；

                            三、options.base：類型：String  設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接；

示例：

gulp.src(['js/*.js','css/*.css','*.html'])   // 使用數組的方式來匹配多種文件
gulp.src(['src/*.js','!src/b*.js'])  // 匹配全部js文件，但排除掉以 b 開頭的 js 文件gulp.src(['!src/b*.js','src/*.js'])  // 不會排除任何文件，由於排除模式不能出如今數組的第一個元素中
gulp.src('src/js/**/*.js', { base: 'src' })  // 保留 src 路徑後的全部路徑名稱
gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])  // 匹配 less 目錄下和子目錄下的全部 less 文件，但排除 less 目錄下 extend 和 page 目錄下的全部 less 文件

3、gulp.dest(path[, options])

                說明：dest 方法是指定處理完後文件輸出的路徑。

                path： 類型(必填)：String or Function 指定文件輸出路徑，或者定義函數返回文件輸出路徑亦可。

                options：類型(可選)：Object，有2個屬性 cwd、mode。

                            一、options.cwd：類型：String  默認：process.cwd()：前腳本的工做目錄的路徑，只在所給的輸出目錄是相對路徑時候有效；

                            二、options.mode：類型：String  默認：0777 指定被建立文件夾的權限；

PS：咱們給 gulp.dest() 傳入的路徑參數，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，它生成文件的文件名使用的是導入到它的文件流自身的文件名，因此生成的文件名是由導入到它的文件流決定的，即便咱們給它傳入一個帶有文件名的路徑參數，而後它也會把這個文件名當作是目錄名。要想改變文件名，可使用 gulp-rename 插件。

示例：

 // 最終生成的文件路徑爲 dist/foot.js/jquery.js，而不是 dist/foot.js
gulp.src('script/jquery.js')    
        .pipe(gulp.dest('dist/foot.js'));
        
 // 最後生成的文件路徑爲 dist/**/*.js
 // 若是 **/*.js 匹配到的文件爲 jquery/jquery.js ,則生成的文件路徑爲 dist/jquery/jquery.js
gulp.src('script/**/*.js')    // 有通配符開始出現的那部分路徑爲 **/*.js
        .pipe(gulp.dest('dist')); 

 // 最後生成的文件路徑爲 dist/avalon.js      
gulp.src('script/avalon/avalon.js')  // 沒有通配符出現的狀況    
        .pipe(gulp.dest('dist'));  
        
// 假設匹配到的文件爲 script/util/underscore.js
// 則最後生成的文件路徑爲 dist/util/underscore.js
gulp.src('script/**/underscore.js')   // 有通配符開始出現的那部分路徑爲 **/underscore.js
        .pipe(gulp.dest('dist')); 

// 假設匹配到的文件爲 script/zepto.js        
//則最後生成的文件路徑爲 dist/zepto.js         
gulp.src('script/*')  // 有通配符出現的那部分路徑爲  *         
        .pipe(gulp.dest('dist')); 
        
//設該模式匹配到了文件 app/src/css/normal.css 
// 用 dist 替換掉 base 路徑，最終獲得 dist/css/normal.css  
gulp.src('app/src/**/*.css')   // 此時 base 的值爲 app/src,也就是說它的 base 路徑爲 app/src                 .pipe(gulp.dest('dist'));

// 假設匹配到的文件爲 script/lib/jquery.js
// 生成的文件路徑爲 build/jquery.js
gulp.src('script/lib/*.js')   // 沒有配置 base 參數，此時默認的 base 路徑爲 script/lib
        .pipe(gulp.dest('build')); 
        
 // 假設匹配到的文件爲 script/lib/jquery.js    
 // 此時生成的文件路徑爲 build/lib/jquery.js  
gulp.src('script/lib/*.js', {base:'script'}) // 配置了 base 參數，此時 base 路徑爲 script
        .pipe(gulp.dest('build')); 

4、gulp.task(name[, deps], fn)

                說明：task 方法定義一個 gulp 任務。

                name：類型(必填)：String，指定任務的名稱（不該該有空格）。

                deps：類型(可選)：StringArray，該任務依賴的任務（注意：被依賴的任務須要返回當前任務的事件流），爲一個數組。當前定義的任務會在全部依賴的任務執行完畢後纔開始執行。若是沒有依賴，則可省略這個參數。

                fn：類型(必填)：Function，該任務調用的插件操做。

示例：

// 定義一個沒有依賴的任務
gulp.task('css', function () {
    return gulp.src(['less/style.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

// 定義一個有依賴的任務
gulp.task('mincss', ['css'], function () {          // 執行完 css 任務後再執行 mincss 任務
    return gulp.src(['css/*.css'])
        .pipe(minifyCss())
        .pipe(gulp.dest('./dist/css'));
});

// 定義一個有多個依賴的默認任務
gulp.task('default', ['css','concat','minifyCss']);  // 只要執行 default 任務就至關於把 "css"，"concat"，"minifyCss" 這三個任務都執行了

5、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

                說明：watch 方法是用於監聽文件變化，文件一修改就會執行指定的任務。

                glob：須要處理的源文件匹配符路徑。類型(必填)：String or StringArray。

                opts：類型(可選)：Object，爲一個可選的配置對象，一般不須要用到。

                tasks：類型(必填)：StringArray，須要執行的任務的名稱數組。

                cb(event)：類型(可選)：Function 每一個文件變化執行的回調函數。每當監視的文件發生變化時，就會調用這個函數,而且會給它傳入一個對象，該對象包含了文件變化的一些信息，type 屬性爲變化的類型，能夠是 added, changed, deleted；path 屬性爲發生變化的文件的路徑。

示例：

gulp.task('watch-less', function () {    gulp.watch('less/**/*.less', ['css']);});gulp.task('watch-js', function () {    gulp.watch('js/**/*.js', function (event) {        // 輸出發生改變文件的一些信息        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');    });});