gulp4个基础API

Gulp.src(globs[, options])

此接口会匹配工作目录下指定规则的文件并返回提供给下一个插件管道使用。其中globs就是匹配格式，options是一些额外参数。

gulp.src('src/scss/master.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist’));

以上代码匹配master.scss文件返回给管道给sass插件进行编译操作，编译完成后送入下一个管道给gulp.dest接口输出到dist目录下。

globs
类型：字符串或者数组

此参数为文件匹配规则，例如./src/*/.scss将会匹配工作目录下src目录及子目录下所有scss文件格式的文件。字符匹配规则前带!则会排除此匹配的文件，例如：

gulp.src([
    'src/js/intro.js',
    'src/js/body.js',
    '!src/js/others.js',
    'src/hs/end.js'
]);

此将会按顺序匹配intro.js，body.js，end.js，排除了others.js

options
类型：对象

options.buffer (默认：true)
当设置为false的时候会把file.contents作为数据流(stream)返回而不是整个缓冲文件(buffer files)，这个选项在处理较大文件的时候比较有效。但是：很多插件并不支持数据流处理。

options.read (默认：true)
当设置为false的时候并不会读取文件而且返回file.contents为空。

options.base (默认：匹配规则前的目录地址)
我们直接用代码演示吧：

 

gulp.src('src/js/**/*.js') //如果匹配到src/js/vendors/a.js, 那么base是src/js/
    .pipe(minify())
    .pipe(gulp.dest('dist')); //写入到dist/vendors/a.js

gulp.src('src/js/**/*.js', { base: 'src' }) //如果匹配到src/js/vendors/b.js
    .pipe(minify())
    .pipe(gulp.dest('dist')); //写入到dist/js/vendors/b.js

gulp.dest(path[, options])

此接口直接写入到文件里。(如果文件夹不存在则会创建对应文件夹)

gulp.src('src/js/body.js')
    .pipe(minify())
    .pipe(gulp.dest('dist/js')); //写入到dist/js/body.js

path
类型：字符串或者函数
具体输出目录或者一个函数返回目录

options
类型：对象

options.cwd(默认：process.cwd())
只有当输出路径为相对路径的时候才有效(一般用不到)

options.mode(默认：0777)
新建目录的权限(一般用不到)

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

定义一个需要自动执行的任务

gulp.task('sass', function() {
    gulp.src('src/scss/master.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});
gulp.task('styles',['sass'], function() { 
    gulp.src('./dist/css/public.css') 
        .pipe(minifycss()) 
        .pipe(rename('public.min.css')) 
        .pipe(gulp.dest('dist/css'));
});

通过在终端运行gulp styles执行styles这个任务，此任务前先执行sass任务，完毕后再进行此任务，将public.css复制一份进行压缩并重命名为public.min.css到dist/css目录下。这里需要注意的是前提依赖任务如果有多个，一般它们并不会按照顺序执行，而是异步执行的

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

自动监视文件变化并执行指定的任务。

//监视'src/js/'目录下的所有js文件，如果有变动则立即执行uglify任务
gulp.watch('src/js/**/*/js', ['uglify']);
gulp.watch(glob[, opts, cb])

自动监视文件变化并执行回调函数。

event.type
类型：字符串
事件的类型，值为:added, changed, deleted.

event.path
类型：字符串
触发事件的文件地址

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

第二节：实战项目