前端构建工具gulp

一 前端构建工具gulp入门

1. 全局安装：npm install --global gulp ，通过npm -v 查看版本号，可检测是否安装成功。

2. 作为项目的开发依赖：npm install --save-dev gulp (这个不安装 gulp执行失败)
插入解释：
npm安装插件

之前：先通过 npm init 命令创建package.json文件。该文件包含了一些应用的基本信息（有些是必须的）。

   npm安装插件：命令提示符执行npm install <name> [-g] [--save-dev]；
1. <name>：node插件名称。例：npm install gulp-less --save-dev
2. -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；  非全局安装：将会安装在当前定位目录；  全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
3. --save：将保存配置信息至package.json（package.json是nodejs项目配置文件）；

4.-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。

5. 为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。
 
3. 在项目根目录下创建一个名为 gulpfile.js 的文件
文件内容可以是一些要执行的task：
var gulp=require('gulp');//引入gulp模块
//创建任务
gulp.task('task名称',function(){
/**
* 这里是task的要执行的逻辑内容
*/
});
 

二 gulp APIs

1.gulp.task(name[, deps], fn) ：定义任务  name 任务名称  deps 依赖任务名称（array） fn 回调函数

————It registers the function with a name.
You can optionally specify some dependencies if other tasks need to run first.
1.1 name：string类型，指定任务的名称，不可以包含空格
1.2 deps：可选，StringArray类型，指定任务依赖，即指定该任务执行之前需要执行的一些任务
1.3 fn ：必填，指定该任务调用的插件操作
1.4 具体用法：
var gulp=require('gulp');//引入gulp模块
//创建任务
gulp.task('task名称',function(){
/**
* 这里是task的要执行的逻辑内容
*/
});
1.5 task的执行：npm 任务名  其他任务名 （应该是可以并列写，然后依次执行指定的task）
*task名称如果是default，则执行 gulp 命令，会直接执行该task。
*如果这个task的执行需要依赖其他task,可以在taskname后以数组的形式增加依赖的tasks
如：一个包含任务列表的数组，这些任务会在mytask任务运行之前完成。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
 // do something ... 
});

2.gulp.run(tasks...) : 尽可能多的运行多个task  

————Runs all tasks with maximum concurrency

使用 .run() 方法关联和运行我们上面定义的任务
具体用法：
gulp.task('default', function(){
   gulp.run('lint', 'sass', 'scripts');
   gulp.watch('./js/*.js', function(){
       gulp.run('lint', 'sass', 'scripts');
   });
});

3.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]) : 当glob的内容发生改变时,做一些操作

————Runs a function when a file that matches the glob changes

3.1gulp.watch(glob [, opts], tasks)
glob:要监听的文件的路径
opts:传给gaze的参数，object类型
tasks:在文件变动后执行的一个或多个task 形如：['compress','styles','scripts']
具体用法：(http://www.cnblogs.com/ayseeing/p/4118574.html)
 var watcher=gulp.watch('public/**/*.js',['reload']);
 watcher.on('事件名',function(event){
 console.log('事件类型: ' + event.type); // added, changed, or deleted
    console.log('事件路径: ' + event.path); // The path of the modified file
 })
 3.1.1 watcher 监听(on)的事件可以是：change/end/error/ready 在文件被找到并正被监听时触发 /nomatch
 3.1.2 watcher 的方法：.end() 停止监听，以便停止后面的任务 /.files() 返回监听的文件列表 /.add() /.remove()
   3.2 gulp.watch(glob [, opts, cb])
   glob/opts与3.1基本一样
   cb: cb(event) 当监听到某个文件发生改变是会触发的回调函数。
   具体用法: 
   gulp.watch('js/**/*.js', function(event) {
 console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
3.3 callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：
3.3.1 event.type: added / changed / deleted
3.3.2 event.path: 出发以上某个事件的文件的路径

4.gulp.src(globs[,options]) : 指需要处理的文件的路径，路径可以是多个文件以数组的形式，也可以是模式匹配（正则表达式）

————This returns a readable stream.
Takes a file system glob (like grunt) and starts emitting files that match.
This is piped to other streams
4.1 globs:
通配符路径匹配示例：
“src/a.js”：指定具体文件；
“*”：匹配所有文件    例：src/*.js(包含src下的所有js文件)；
“**”：匹配0个或多个子文件夹    例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
“{}”：匹配多个属性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
“!”：排除文件    例：!src/a.js(不包含src下的a.js文件)；
4.2 options:可以是 buffer、read和base。
具体用法：
无options用法：gulp.src('public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('dest'));
有options用法：gulp.src('public/**/*.js',{base:'public'})
.pipe(uglify())
.pipe(gulp.dest('dest'));//路径为：dest/**/*.js
bsse说明:base制定目标路径的某一部分，然后将该部分的后面部分拼接到dest目的地路径的后面，构成最终文件输出的路径。

5.gulp.dest(path[, options]) : 设置执行转换后生成的文件的路径

————This returns a writable stream
File objects piped to this are saved to the file system
5.1 path  可以是string 或者 function，只要最终是以路径的形式表示即可
5.2 option  可以是 cwd、mode(文件权限，默认0777)

三：知识梳理：

1. pipe()是stream模块里传递数据流的一个方法，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。
2. npm 安装/卸载 (多)插件操作
2.1 安装插件：cnpm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
2.2 卸载插件：cnpm uninstall gulp-autoprefixer gulp-cache gulp-concat gulp-imagemin gulp-jshint gulp-livereload gulp-minify-css gulp-notify gulp-rename gulp-ruby-sass gulp-uglify del

四：问题总结：

虽然成功安装所有常用插件，但是到了gulpfile.js里引入它们后，到命令行里运行还是会提示说某某模块
不存在，原因是一开始“成功安装的那些插件”本身也是有依赖于一些其它插件的，而在项目根目录执行npm install并没有把那些插件的依赖一并安装，因此，可以找到提示的相应模块文件夹，然后在它的根目录执行 cnpm install (这个就可以通过该目录下的package.json文件安装该插件的所有依赖模块了)。然后再去命令行执行
gulp 任务名称 就没有再报错了。

5：学习地址:

gulp学习1：https://segmentfault.com/a/1190000002580846（sf 原文翻译加作者笔记）
gulp学习2：http://www.ydcss.com/archives/424(主要讲gulp API的用法,文章结束有附带一些插件用法的文章)
glob学习1：https://segmentfault.com/a/1190000004481856（sf 原文翻译加作者笔记）
glob学习2：https://github.com/isaacs/node-glob(官方英文文档)
gulp插件大全: http://gulpjs.com/plugins/(官方英文文档)