1.1、說明:src方法是指定需要處理的原始檔的路徑,gulp借鑑了unix作業系統的管道(pipe)思想,前一級的輸出,直接變成後一級的輸入,gulp.src返回當前檔案流至可用外掛程式;
1.2、globs: 需要處理的原始檔匹配符路徑。型別(必填):string or stringarray;
萬用字元路徑匹配示例:
「src/a.js」:指定具體檔案;
「*」:匹配所有檔案 例:src/*.js(包含src下的所有js檔案);
「**」:匹配0個或多個子資料夾 例:src/**/*.js(包含src的0個或多個子資料夾下的js檔案);
「{}」:匹配多個屬性 例:src/.js(包含a.js和b.js檔案) src/*.(src下的所有jpg/png/gif檔案);
「!」:排除檔案 例:!src/a.js(不包含src下的a.js檔案);
var gulp = require('gulp'),less = require('gulp-less');
gulp.task('testless', function
() /*.less'])
.pipe(less())
.pipe(gulp.dest('./css'));
});
1.3、options: 型別(可選):object,有3個屬性buffer、read、base;
options.buffer: 型別:boolean 預設:true 設定為false,將返回file.content的流並且不緩衝檔案,處理大檔案時非常有用;
options.read: 型別:boolean 預設:true 設定false,將不執行讀取檔案操作,返回null;
options.base: 型別:string 設定輸出路徑以某個路徑的某個組成部分為基礎向後拼接,具體看下面示例:
gulp.src('client/js/**/*.js').pipe(minify())
.pipe(gulp.dest('build')); //
writes 'build/somedir/somefile.js'
gulp.src('client/js/**/*.js', )
.pipe(minify())
.pipe(gulp.dest('build')); //
writes 'build/js/somedir/somefile.js'
2.1、說明:dest方法是指定處理完後檔案輸出的路徑;
gulp.src('./client/templates/*.jade').pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
2.2、path: 型別(必填):string or function 指定檔案輸出路徑,或者定義函式返回檔案輸出路徑亦可;
2.3、options: 型別(可選):object,有2個屬性cwd、mode;
options.cwd: 型別:string 預設:process.cwd():前指令碼的工作目錄的路徑 當檔案輸出路徑為相對路徑將會用到;
options.mode: 型別:string 預設:0777 指定被建立資料夾的許可權;
3.1、說明:task定義乙個gulp任務;
3.2、name: 型別(必填):string 指定任務的名稱(不應該有空格);
3.3、deps: 型別(可選):stringarray,該任務依賴的任務(注意:被依賴的任務需要返回當前任務的事件流,請參看下面示例);
gulp.task('testless', function() );
gulp.task('minicss', ['testless'], function () );
3.4、fn: 型別(必填):function 該任務呼叫的外掛程式操作;
4.1、說明:watch方法是用於監聽檔案變化,檔案一修改就會執行指定的任務;
4.2、glob: 需要處理的原始檔匹配符路徑。型別(必填):string or stringarray;
4.3、opts: 型別(可選):object 具體參看
4.4、tasks: 型別(必填):stringarray 需要執行的任務的名稱陣列;
4.5、cb(event): 型別(可選):function 每個檔案變化執行的**函式;
gulp.task('watch1', function() );
gulp.task('watch2', function
() );
});
gulp教程記錄
gulp gulp能夠做什麼東西?以前這些工作都是人工做的 等等。gulp的配置檔案gulpfile.js 其實整個gulp的配置檔案,基本上都是在做一些任務的配置,比如建立任務,監聽任務等等 結合gulp的api gulp只有5個方法 gulp的使用 通過npm建立乙個專案 我的叫做gulp st...
gulp入門教程
gulp是什麼?在前端開發中,你是否有遇到以下這些問題?1 需要手動合併雪碧圖 2 需要手動壓縮js css 3 每次編寫完 後,需要手動重新整理瀏覽器看效果 4 手動壓縮 gulp的主要作用就是幫助我們自動完成上面的那些繁瑣的工作。安裝gulp gulp是基於node.js的,所以你需要先安裝no...
Gulp入門教程
gulp 是乙個 當前 非常流行的 構建工具,gulp 構建工具,是提供乙個基礎平台,上面可以編寫各種任務,比如,壓縮 的任務,編譯css檔案,轉換,web伺服器等等 任務.基本的使用方式 var gulp require gulp gulp.task default function consol...