gulp.src[globs[,options]]

返回一个stream 可以被piped到别的插件

globs: String or Array

gulp.src('client/js/**/*.js')  // math 'client/js/somedir/somefile.js'" 并且将base解析为client/js
    .pipe(minify())
    .pipe(gulp.dest('build')); //写入 build/somedir/somefile.js

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

gulp.dest(path[,options])

能被pipe进来,并且将会写文件,并且重新输出所有数据,因此你可以将它pipe到多个文件夹

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

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

orchestrator 定义个使用Orchestrator实现的tassk

gulp.task('somename',function(){

})

deps : Array 一个包含任务列表的数组,这些任务会在你当前任务执行之前完成

gulp.task('mytask',['task1','task2','task3'],function(){

})

fn :该函数定义任务所需要执行的一些操作

//接受一个callback
var exec = require('child_process').exec
gulp.task('task1',function(cb){
    exec('jekyll build',function(err){
        if(err) return db(err)
        cb()
    })
})

//返回一个stream
gulp.task('somename',function(){
    var stream = gulp.src('client/**/*.js')
        .pipe(minify())
        .pipe(gulp.dest('build'))
    return stream;
})

//返回一个promise
var Q = require('q')

gulp.task('somename',function(){
    var deferred = Q.defer();

    setTimeout(function(){
        deferred.resolve();
    },1)

    return deferred.promise;
})

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

监视文件,并在文件发生改动时做一些事情

glob: String or Array

opts: Object,传给gaze(fs.watch 封装成支持glob)的参数

tasks :Array

    var watcher = gulp.watch('js/**/*.js',['uglify','reload'])
    watcher.on('change',function(event){
        console.log('File'+event.path+'was'+event.type+',running tasks...')
    })

cb(event) :function

    gulp.watch('js/**/*.js',function(event){
        console.log('File ' +event.path + ' was '+event.type)
    })

event.type: String 发生变动的类型added,changed,deleted

event.path: String 触发该事件按的文件的路径

使用技巧

npm install --save-dev gulp sream-combiner2 del ...
1. 整合 streams 来处理错误
在 stream 中发生一个错误的话,它会被直接抛出,除非已经有一个时间监听器监听着 error 时间。 这在处理一个比较长的管道操作的时候会显得比较棘手?? 不太清楚为什么要这样做
var combiner = require('stream-combiner2')
var uglify = require('gulp-uglify')
var gulp = require('gulp')

gulp.task('test',function(){
    var combined = combiner.obj([
        gulp.src('bootstrap/js/*.js'),
        uglify(),
        gulp.dest('public/bootstrap')
    ]);
    // 任何在上面的 stream 中发生的错误,都不会抛出,
    // 而是会被监听器捕获
    combined.on('error',console.error.bind(console));

    return combined;
})
2. 删除文件夹
var gulp = require('gulp')
var del = require('del')

gulp.task('clean:mobile',function(cb){
    del([
        'dist/report.csv',
        // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
        'dist/mobile/**/*',
        // 我们不希望删掉这个文件,所以我们取反这个匹配模式
        '!dist/mobile/deploy.json'
    ],cb)
})

在管道中删除文件
使用vinyl-paths 模块获取每个stream中每个文件的路径
var gulp = require('gulp')
var stripDebug = require('gulp-strip-debug')
var del = require('del')
var vinyPaths = require('vinyl-paths')

gulp.task('clean:tmp',function(){
    return gulp.src('tmp/*')
        .pipe(stripDebug())
        .pipe(gulp.dest('dist'))
        .pipe(vinyPaths(del))
})

3. 只重新编译更改过的文件
    通过gulp-watch
    var gulp = require('gulp')
    var sass = require('gulp-sass')
    var watch = require('gulp-watch')

    gulp.stask('default',function(){
        return gulp.src('sass/*.scss')
            .pipe(watch('sass/*.scss'))
            .pipe(sass())
            .pipe(gulp.dest('dist'))
    })

results matching ""

    No results matching ""