前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家
2016-01-05 08:50
417 查看
系列目录
前端构建大法 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
相关文章推荐
- javascript判断单选框是否选中
- javascript通过字典思想操作数据
- 实例讲解多个js毫秒倒计时同时进行效果
- 汇总常用的jQuery操作Table tr td方法
- iOS 中的 Deferred Deep Linking(延迟深度链接)
- Lintcode: Remove Node in Binary Search Tree
- 【翻译自mos文章】ACFS 使用inode 架构吗?
- Populating Next Right Pointers in Each Node
- ArcGIS for js简单实现
- [React Testing] Element types with Shallow Rendering
- [React Testing] JSX error diffs -- expect-jsx library
- Part 8 AngularJS filters
- Part 7Handling events in AngularJS
- js jquery前台解析json字符串
- Part 6 AngularJS ng repeat directive
- [React Testing] Intro to Shallow Rendering
- AngularJS基础入门初探
- react native之helloworld
- Node.js使用fs.renameSync报cross-device link not permitted错误
- CSS代码重构与优化之路