gulp模組的方法

1. src()
gulp模組的src方法，用於產生資料流。它的參數表示所要處理的文件，這些指定的文件會轉換成資料流。

js/app.js 指定确切的文件名
js/*.js 某个目录所有后缀名为js的文件
js/**/*.js 某个目录及其所有子目录中所有后缀名为js的文件
！js/app.js 除了js/app.js以外所有文件
*.+(js css)匹配项目根目录下，所有后缀名为js或css的文件

src方法的參數也可以是數組，用來指定多個成員

gulp.src(['js/**/*.js','!js/**/*.min.js'])

2 dest()
dest方法將管道的輸出寫入文件，同時將這些輸出繼續輸出，所以可以依序呼叫多次dest方法，將輸出寫入多個目錄。如果有目錄不存在，將會重建。

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

dest方法也可以接受第二個參數，表示配置物件

gulp.dest('build',{
 cwd:'./app',
 mode:'0644'})

配置物件有兩個欄位。 cwd欄位指定寫入路徑的基準目錄，預設是目前目錄；mode欄位指定寫入檔案的權限，預設是0777.
3.task()
task方法用於定義具體的任務。它的第一個參數是任務名，第二個參數是任務函數。

gulp.task('greet',function(){
  console.log('Hello world');
});

task方法也可以指定按順序執行的一組任務

gulp.task('build',['css','js','imgs']);

指定任務build，它由css，js，imgs三個任務所組成。 task方法會並發執行這三個任務。注意，每個任務都是非同步調用，所以沒有辦法保證js任務的開始運行的時間。

如果希望各個任務嚴格按照順序運行，可以把掐一個任務寫成後一個任務的依賴模組。

gulp.task('css',['greet'],function(){
  //deal with css here});

css任務依賴greet任務，所以css一定會在greet運行完成後在運行。

task方法的回呼函數，也可以接受一個函數作為參數，這對執行非同步任務非常有用.

//执行shell命令var exec=require('child_process').exec;
gulp.task('jekyll',function(cb){//build jekyllexec('jekyll build',function(err){
 if(err) return cb(err);//return error
 cb();//finished task})
})

如果一個任務的名字為default，就表示它是預設任務，在命令列直接輸入gulp命令，就會執行該任務。

gulp.task('default',function(){
  //default task})//或者gulp.task('default',['styles','jshint','watch']);

執行的時候，直接使用gulp，就會執行styles，jshint，watch三個任務。

4 watch()
watch方法用來指定需要監視的檔案。一旦這些文件發生變動，就執行指定任務。

gulp.task('watch',function(){
  gulp.watch('templates/*.tmpl.html',['build']);
});

程式碼指定，一旦templates目錄中的範本檔案發生變化，就會執行build任務。

watch方法也可以用回呼函數，取代指定的任務

gulp.watch('templates/*.tmpl.html',function(event){
 console.log('Event type: '+event.type);
 console.log('Event path: '+event.path);
});

另一種寫法是watch方法所監控的檔案發生變化時(修改、增加、刪除檔案)，就會觸發change事件，可以對change事件指定回呼函數

var watcher=gulp.watch('templates/*.tmpl.html',['build']);
watcher.on('change',function (event){ console.log('Event type: '+event.type); console.log('Event path: '+event.path);
});

除了change事件，watch方法還可能觸發以下事件
end 回呼函數運行完畢時觸發
#error 發生錯誤時觸發
ready 當開始監聽檔案時觸發
nomatch 沒有符合的監聽檔案時觸發

watcher對象也包含其他一些方法
watcher.end() 停止watcher對象，不會再呼叫任務或回呼函數
watcher.files() 傳回watcher物件監視的檔案
watcher.add(glob)增加所要監視的文件，它也可以附件第二個參數，表示回呼函數
watcher.remove(filepath) 從watcher物件移除一個監聽的檔案

5.gulp-livereload模組
gulp-livereload模組用於自動刷新瀏覽器，反映原始碼的最新變更。它除了模組以外，還需要在瀏覽器中安裝插件，用於配合原始碼變更。

var gulp=require('gulp'),
     less=require('gulp-less'),
     livereload=require('gulp-livereload'),
     watch=require('gulp-watch');
gulp.task('less',function(){
   gulp.src('less/*.less')
        .pipe(watch("less/*.less") )
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(livereload());
})

程式碼用來監視less文件，一旦編譯完成，就會自動刷新瀏覽器。

6 gulp-load-plugins模組

一般情況下，gulpfile.js中的模組需要一個個載入

var gulp=require('gulp'),
    jshint=require('gulp-jshint'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');
 gulp.task('js',function(){  return gulp.src('js/*.js')
           .pipe(jshint())
           .pipe(jshint.reporter('default'))
           .pipe(uglify())
           .pipe(concat('app.js'))
           .pipe(gulp.dest('build'));
})

程式碼中除了gulp模組以外，還載入另外三個模組

這種載入的寫法比較麻煩，使用gulp-load-plugins模組，可以載入package.json檔案中所有的gulp模組。

var gulp=require('gulp'),
 gulpLoadPlugins=require('gulp-load-plugins'),
 plugins=gulpLoadPlugins();
 gulp.task('js',function(){ return gulp.src('js/*.js')
  .pipe(plugins.jshint())
  .pipe(plugins.jshint.reporter('default'))
  .pipe(plugins.uglify())
  .pipe(plugins.concat('app.js'))
  .pipe(gulp.dest('build'));
})

本文說明了gulp模組的方法，更多相關內容請關注php中文網。

相關推薦：

js將html產生為圖片，並儲存在本機

js中函數的三種定義方式

JS 中的''真假''

#

以上是gulp模組的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！