1,全局安装gulp
npm install gulp --global
2,作为项目的开发依赖(devDependencies)安装:
npm install gulp --save-dev
3,在项目根目录下创建一个名为gulpfile.js的文件:
var gulp=require("gulp");
gulp.task('执行gulp后面跟的名字',function(){
//将你的默认的任务代码放在这
})
4,运行gulp
gulp task函数中第一个参数的名字
gulp API文档
gulp.src(globs[,options])
输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件。将返回一个Vinyl files 的 stream。他可以被piped到别的插件中。
gulp.src("需要操作的文件名")
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest("输出路径名"))
globs 类型:String或Array
所要读取的glob或者包含globs的数组
options
类型:object
options.buffer
类型: Boolean 默认值:true
如果该项被设置为false,那么将会以stream方式返回file.contents,
而不是文件buffer,在处理一些大文件的时候回很有用。注意:xx插件可能并不会
实现对stream的支持。
....
先不了解options里面的参数
gulp.dest(path[,options])
能被pipe进来,并且将会写文件。并且重新输出(emit)所有数据,因此你可以将它pipe到多个文件夹,如果某文件夹不存在,将会自动创建它
gulp.src("./client/templates/*.jade")
.pipe(...)
.pipe(gulp.dest("输出路径名"))
gulp.task(name[,deps],fn)
gulp.task("somename",function(){
//做一些事
})
name
任务的名字,如果你需要在命名中运行你的某些任务,那么,请不要在命令中使用空格
deps
类型 Array
一个包含任务列表的数组,这些任务会在你当前任务运行之前完成
fn
该函数定义任务所要执行的一些操作,通常来说,他会是这种形式 gulp.src().pipe(somePlugin())
注意:
默认的,task将以最大的并发数执行,也就是说,gulp会一次性运行所有的task并且不做任何等待,如果你想要创建一个序列化的task队列,并以特定的顺序执行,你需要做两件事:
1,给出一个提示,来告知task什么时候执行完毕
2,并且再给出一个提示,来告知一个task依赖另一个task的完成
gulp.watch(glob[,opts],tasks) 或 gulp.watch(glob[,opts,cb])
监视文件,并且可以在文件发生改动时候做一些事情,它总会返回一个EventEmitter来发射change事件
gulp.watch(glob[,opts],tasks)
glob
类型 String or Array
一个glob字符串,或者一个包含多个glob字符串的数组,用来指定具体监控哪些文件的变动
opts
类型:Object
tasks
类型 : Array
需要在文件变动后执行的一个或者多个通过 gulp.task()创建的task的名字
gulp.watch(glob[,opts,cb])
cb(event)
类型 : Function
每次变动需要执行的callback
callback会被传入一个名为event的对象,这个对象描述了所监控到的变动
event.type 发生的变动的类型:added,changed或者deleted
event.path 触发了该事件的文件的路径
gulp插件
压缩css gulp-clean-css
压缩JS gulp-uglify
压缩html gulp-htmlmin
压缩html时需要在minifyHtml中传参数{collapseWhitespace:true} 否则不会压缩空白
重命名 gulp-rename 改变输出文件的文件名
gulp-concat 文件合并
gulp-sass 编译sass文件
gulp-autoprefixer 自动处理浏览器前缀
gulp-livereload 自动刷新
fixer 固定器