安装指南:
(1) 全局安装: $ npm install --global gulp
项目的开发依赖安装: $ npm install --save-dev gulp
(2) 在项目根目录下创建名为gulpfile.js 的配置文件 AMD规范
var gulp = require('gulp');
gulp.task('default',function(){//默认的任务代码}) //default为任务名
(3) 运行gulp //执行全部任务
gulp <task> <othertask> //单独执行特定任务
更多功能参数: .src .watch .dest CLI
gulp.src(globs[,options]) 输出符合所提供的匹配模式或者匹配模式的数组的文件。将返回一个Vinyl files的stream,它可以呗piped到别的插件中去。
gulp.src('client/template/*.jade',{buffer:true,read:true,base:'client'})
.pipe(jade())
.pipe(minify())
.pipe(gulp.dest('build/minified_templates'));
gulp.dest(path,[,options]); //重新输出(emits)所有数据,并且可以pipe到多个文件夹
gulp.task(name,[,deps],fn); //定义一个使用Orchestrator实现的任务task deps: 一个包含任务列表的数组,这些任务将会在你当前任务运行之前完成。 确保异步执行方式:使用一个callback , 或者返回一个 promise 或 stream。
task在gulp中是以最大的并发数执行。如果你想创建一个序列化的task队列,并以特定顺序执行,你将要:给出提示,告知task什么时候完成,告知依赖任务你需要等待被依赖的任务完成。
gulp.watch(glob[,opts],tasks) 或者 gulp.watch(golb[,opts,cb]); //监控文件、当文件发生变化时,返回一个EventEmitter来发射change事件。CB为回调函数 tasks是回调任务列表。
var watcher=gulp.watch('js/**/*.js',['default','reload']); watcher.on('change',function(e){console.log(e)});
gulp.watch('js/**/*.js',function(e){console.log(e)});
CLI(命令行界面):
-v or --version 显示全局或者项目本地安装的gulp版本号。
--require
--gulpfile
--cwd
-T or --tasks
--tasks-simple
--color
--no-color
--silent 禁止所有gulp日志
GULP的插件:
gulp-load-plugins:自动加载插件 自动读取package.json中依赖的插件
gulp-rename :重命名插件
gulp-uglify :js文件压缩
gulp-minify-css : css文件压缩
gulp-minify-html :html文件压缩
gulp-jshint :js代码检查格式
gulp-concat :文件合并
gulp-less , gulp-sass :文件编译
等等。。。
总结:
gulpjs是一个前端构建工具、配置参数简单、api简单。使用的是nodejs的stream来读取和操作数据、速度更快。
基于NPM进行配置。