gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
gulp是一个任务自动化的工具集,旨在帮助开发者们处理复杂耗时的编译、处理工作。
安装
npm install gulp-cli -g
npm install gulp -D
touch gulpfile.js
gulp --help
角色定义
gulp主要有几个角色
- 输入流:src
用来输入处理的文件返回文件流 - 输出流:dest
用来将文件流输出到特定的文件 - 任务:task
gulp执行的任务或任务依赖 - 监控:watch
监控文件变动触发相应的task
使用指南
gulp的任务系统定义在guplfile.js中,也可以在运行时通过--gupfile 来指定任务文件,一般约定默认。
-
gulp.src(globs[, options])
globs:指定输入的文件匹配规则(String or Array),支持用!来排除文件
options:用来指定处理文件流的一些设置 -
buffer 开启缓存,false时直接返回文件内容,处理大文件时建议开启。默认true
-
read 读取文件,false时不会读取文件,返回null,默认为true
-
base 指定文件处理的基目录,默认是匹配文件本身的目录
-
gulp.dest(path[, options])
path 文件输出路径(String or Function)
options 文件的输出配置 -
cwd 文件的输出目录,默认process.cwd()。[官方说只有相对路径才有效,个人设置后相对、绝对路径都无效]
-
mode 文件的权限 默认0777
-
gulp.task(name [, deps] [, fn])
定义任务
name 任务名
deps 依赖的其他任务
fn 任务执行的回调,函数支持callback参数,如果callback返回的非null或undefined则任务出错了,将停止任务 -
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
监控文件改变触发task or cb
glob 文件流同src
opts https://github.com/shama/gaze
cb 触发事件 -
type
事件类型 added, changed, deleted or renamed -
path
文件路径
var watcher = gulp.watch('xxxx',['task1','task2']);
watcher.on('event_type', function(event) {
//do what you need when event_type happend
});
or
gulp.watch('xxxx', function(event) {
//do what you need when all event type happend
});
官网 http://gulpjs.com
API https://github.com/gulpjs/gulp/blob/master/docs/API.md
网友评论