工作流简化之Gulp

2017-07-22 本文已影响11人卖梦想的男孩

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主要有几个角色

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
});

gulp.watch('xxxx', function(event) {
  //do what you need when all event type happend
});