gulp基本使用-文檔

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

1.一、說明：src方法是指定須要處理的源文件的路徑，gulp借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，gulp.src返回當前文件流至可用插件；

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

通配符路徑匹配示例：

「src/a.js」：指定具體文件；

「*」：匹配全部文件    例：src/*.js(包含src下的全部js文件)；

「**」：匹配0個或多個子文件夾    例：src/**/*.js(包含src的0個或多個子文件夾下的js文件)；

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

「!」：排除文件    例：!src/a.js(不包含src下的a.js文件)；

JavaScript

 

1 2 3 4 5 6 7 8 9

var gulp = require('gulp'),     less = require('gulp-less');   gulp.task('testLess', function () {     //gulp.src('less/test/style.less')     gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])         .pipe(less())         .pipe(gulp.dest('./css')); });

1.三、options：  類型(可選)：Object，有3個屬性buffer、read、base；

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

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

options.base：  類型：String  設置輸出路徑以某個路徑的某個組成部分爲基礎向後拼接，具體看下面示例：

JavaScript

 

1 2 3 4 5 6 7

gulp.src('client/js/**/*.js')   .pipe(minify())   .pipe(gulp.dest('build'));  // Writes 'build/somedir/somefile.js'   gulp.src('client/js/**/*.js', { base: 'client' })   .pipe(minify())   .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'

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

2.一、說明：dest方法是指定處理完後文件輸出的路徑；

JavaScript

 

1 2 3 4 5

gulp.src('./client/templates/*.jade')   .pipe(jade())   .pipe(gulp.dest('./build/templates'))   .pipe(minify())   .pipe(gulp.dest('./build/minified_templates'));

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

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

options.cwd：  類型：String  默認：process.cwd()：前腳本的工做目錄的路徑 當文件輸出路徑爲相對路徑將會用到；

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

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

3.一、說明：task定義一個gulp任務；

3.二、name：  類型(必填)：String 指定任務的名稱（不該該有空格）；

3.三、deps：  類型(可選)：StringArray，該任務依賴的任務（注意：被依賴的任務須要返回當前任務的事件流，請參看下面示例）；

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

gulp.task('testLess', function () {     return gulp.src(['less/style.less'])         .pipe(less())         .pipe(gulp.dest('./css')); });   gulp.task('minicss', ['testLess'], function () { //執行完testLess任務後再執行minicss任務     gulp.src(['css/*.css'])         .pipe(minifyCss())         .pipe(gulp.dest('./dist/css')); });

3.四、fn：  類型(必填)：Function 該任務調用的插件操做；

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

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

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

4.三、opts：  類型(可選)：Object 具體參看https://github.com/shama/gaze；

4.四、tasks：  類型(必填)：StringArray 須要執行的任務的名稱數組；

4.五、cb(event)：  類型(可選)：Function 每一個文件變化執行的回調函數；

JavaScript

 

1 2 3 4 5 6 7 8 9

gulp.task('watch1', function () {     gulp.watch('less/**/*.less', ['testLess']); });   gulp.task('watch2', function () {     gulp.watch('js/**/*.js', function (event) {         console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');     }); });