gulp API 簡介

一、gulp API 簡介

            gulp 本身能做的事情非常少，主要是通過插件來提供各種功能，gulp 本身只提供了4個非常簡潔的 API, 掌握這4個 API 你就基本掌握了 gulp 的全部。

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

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

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

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

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

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

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

                    通配符路徑匹配示例：

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

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

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

                            4、"*.scss": * 號匹配當前目錄任意文件，所以這里 *.scss 匹配當前目錄下所有 scss 文件；

                            5、"**/*.scss": 匹配當前目錄及其子目錄下的所有 scss 文件；

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

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

                            1、options.buffer：類型：Boolean  默認：true 設置為 false，將返回 file.content 的流并且不緩沖文件，處理大文件時非常有用；

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

                            3、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 文件

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

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

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

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

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

                            2、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')); 

四、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" 這三個任務都執行了

五、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...');
    });
});