转载

前端构建大法 Gulp 系列 (三)：gulp的4个API 让你成为gulp专家

系列目录

前端构建大法 Gulp 系列 (一)：为什么需要前端构建
前端构建大法 Gulp 系列 (二)：为什么选择gulp
前端构建大法 Gulp 系列 (三)：gulp的4个API 让你成为gulp专家
前端构建大法 Gulp 系列 (四)：gulp实战

gulp 本身能做的事情非常少，主要是通过插件来提供各种功能，gulp本身只提供了4个非常简洁的API, 掌握这4个API你就基本掌握了gulp的全部。

一、gulp.task

gulp 是基于task的方式来运行

定义

gulp.task(name [, deps, fn])注册一个task, name 是task的名字，deps是可选项，就是这个task依赖的tasks, fn是task要执行的函数

示例

gulp.task('js', ,['jscs', 'jshint'], function(){  return gulp     .src('./src/**/*.js')     .pipe(concat('alljs'))     .pipe(uglify())     .pipe(gulp.dest('./build/'));                  });

提示

上例中

jscs和jshint先运行，随后再运行js的task.
jscs和jshint是并行执行的，而不是顺序执行

二、gulp.src

定义

gulp.src(globs[, options])

与globs 匹配的文件，可以是string或者一个数组

示例

gulp.src(['client/*.js', '!client/b*.js', 'client/c.js'])   # !是排除某些文件  gulp.task('js',['jscs', 'jshint'],function(){  return gulp     .src('./src/**/*.js', {base:'./src/'})             .pipe(uglify())     .pipe(gulp.dest('./build/'));               });

options.base 是指多少路径被保留，比如上面的 ./src/users/list.js 会被输出到 ./build/users/list.js

提示

如果我们需要文件保持顺序，那么出现在前面的文件就写在数组的前面

  gulp.src(['client/baby.js', 'client/b*.js', 'client/c.js'])

上面baby.js就出现在最上面。

三、 gulp.dest

定义

gulp.dest(path[, options]) 就是最终文件要输出的路径，options一般不用

四、gulp.watch

定义

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。

示例

gulp.task('watch-js', function(){    gulp.watch('./src/**/*.js',['jshint','jscs']);  });  gulp.task('watch-less', function(){  gulp.watch('./src/**/*.less',function(event){    console.log('less event'+event.type+' '+event.path)  });  });

最后

gulp就是如此的简单，你只需要掌握这四个API就够了，剩下的就是熟悉相关的plugin了。

参考链接 https://github.com/gulpjs/gulp/blob/master/docs/API.md

正文到此结束

所属分类：编程技术

本文标签： 目录 API http UI ask cat src client js build https 插件 git list ip GitHub
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二