前端构建工具之Gulp使用记录

安装指南：

(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进行配置。