gulp note
前几天公司一个同事说了gulp用着太爽了,比grunt语法好很多。然后就猴急的尝试了下,并在公司之前的一个项目上做了实验。觉得有下面几点优点:
- 更像是就是js语法,写起来很顺
- 代码执行顺序更清晰
- 代码量更少,主要是因为grunt各种大小括号换行导致其看起来很臃肿。
- gulp.watch 太好用了。。
当然有几点grunt也是有优点,比如本省就支持在代码上面添加banner,但是gulp需要使用插件。
最后,推荐小伙伴也尝试着去使用gulp。下面是我自己的一些笔记。
gulp常用插件
- less的编译gulp-less
- 自动添加css前缀gulp-autoprefixer
- 压缩cssgulp-minify-css
- js代码校验gulp-jshint
- 给代码头部添加公司等之类的注释 gulp-header
- 替换文本,用于修改版本号之类的 gulp-replace
- 合并js文件gulp-concat
- 压缩js代码gulp-uglify
- 压缩图片gulp-imagemin
- 自动刷新页面gulp-livereload
- 图片缓存,只有图片替换了才压缩gulp-cache
- 更改提醒gulp-notify
- 清除文件del
安装插件和grunt一样就用npm了,不啰嗦。
使用及api
当然和grunt一样需要创建任务文件,gulp的是gulpfile.js。
- 加载插件
与grunt不同插件需要用require引用加载。
1 | var gulp = require('gulp'), |
gulp.src(globs[,options])
src指定需要处理的源文件的路径,借助unix的管道思想(pipe),前一级输出直接变成
后一级的输入,gulp.src返回当前文件流至可用插件;
- globs:需要处理的源文件匹配路径(必填)
可以是具体指定文件:”seca/a.js”
还有:"*"
匹配所有文件"src/*.js"
(包含src下的所有js文件)"**"
匹配0个或者多个子文件夹"src/**/*.js"
(匹配多个子文件夹的js文件)"{}"
匹配多个属性"src/{a,b}.js"
!
排除文件 (!src/a.js不包含src下的a.js文件)
- options 可选参数 opject 有3个属性buffer、read、base
options.buffer boolean类型,默认为true。当设置为false时,返回file.content的流
并且不缓冲文件,处理大文件时非常有用。
options.read: 类型:Boolean 默认:true 设置false,将不执行读取文件操作,返回null;
options.base: 类型:String 设置输出路径以某个路径的某个组成部分为基础向后拼接,具体看下面示例:
1 | gulp.src('client/js/**/*.js') |
gulp.dest(path[,options])
dest是在处理完后指定最后的输出路径。
path 必填,string 或则function 指定文件输出路径,或者定义函数返回文件输出路径亦可
options 可选,有两个属性,cwd,mode
options.cwd: 类型:String 默认:process.cwd():前脚本的工作目录的路径 当文件输出路径为相对路径将会用到;
options.mode: 类型:String 默认:0777 指定被创建文件夹的权限;
gulp.task(name[,deps],fn)
定义gulp任务
name必填,string,指定任务名称
deps可选,stringArray,指定该任务依赖的任务(被依赖的任务需要返回当前任务的事件流=)
1 | gulp.task('testLess', function () { |
fn 必填:function该任务调用的插件操作。
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
watch 用于监听文件变化,文件一修改就会执行指定的任务
glob:需要处理的源文件匹配符路径。
opts:可选:Object
tasks:必填,StringArray 需要执行的任务名称数组
cb(event) 可选:Function每个文件变化时执行的毁掉函数
1 | gulp.task('watch1', function () { |
主要就是task+dest+src+watch,然后再就是各种插件的使用,就ok了,上手很快,感觉3个小时左右就可以了。