005gulp 前端代码构建工具

一. gulp简介

gulp是一种任务自动处理工具，简单地说，gulp是一个工具框架，有很多插件扩展它的功能。

gulp能够自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、
部署文件生成，并监听文件在改动后重复指定的这些步骤。

gulp的优点：

基于流的构建工具，利用流的方式进行文件的处理
代码优于配置，通过简单的配置能够完成很多重复的功能
简单明了，目的明确，一般一个插件只完成一个任务
gulp的gulpfile.js的写法更加通俗易懂，易上手

二. 使用gulp的步骤：

由于gulp是基于node.js的，因此在安装gulp之前需要安装node.js

node.js是一个后端的js运行环境，也就是说：你写一个服务器端的js代码，可以交给node.js来解释执行。

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

1. 安装nodejs

从官网上直接下载安装（路径随意）

打开cmd：

输入 node -v       /* 查看nodejs版本号*/
输入npm -v         /* 查看npm版本号 */
输入D:             /*定位到D盘*/
输入cd  nodejs       /* 定位到安装目录*/
输入dir        /*查看当前定位目录下的文件*/
输入cls           /* 清空内容*/

2. 全局安装gulp

目的：通过全局安装的gulp执行gulp任务，全局安装完gulp之后，就可以使用gulp命令行

输入 npm install gulp -g   /*全局安装gulp*/
输入 gulp -v               /*查看安装的gulp的版本号，出现版本号即为正确安装*/

3. 新建package.json文件

package.json是nodejs项目必不可少的配置文件，存放在项目的根目录下

输入 npm init          /*创建 package.json文件*/
前三项（项目名称，项目版本，项目描述）必须输入，后几项可留空

输入 npm help package.json   /*查看package.json帮助文档*/

4. 项目安装gulp依赖

输入 npm install gulp --save-dev     /*本地安装gulp*/
输入 npm install 插件名 --save-dev   /*安装gulp插件*/
–save : 将配置信息保存至 package.json

-dev：将配置信息保存至package.json 的 devDependencies节点

5. 在项目的根目录下创建gulpfile.js文件

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
  less = require('gulp-less');

//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
        gulp.src('src/less/index.less') //该任务针对的文件
            .pipe(less()) //该任务调用的模块
            .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});

gulp.task('default',['testLess', 'elseTask']); //定义默认任务

//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径


6. 运行gulp

输入$gulp                 /*运行gulp*/
输入gulp default          /*运行gulpfile.js中一个名为default的函数*/
二. gulp的API（在gulpfile.js里面会用到）

1. task 用于定义一个gulp的任务

gulp.task(name, [deps] , fn)
name为任务名称 ‘default’

deps为任务依赖的任务，可有多个，按照顺序执行 [‘task’, ‘task2’]

fn 该任务调用的插件操作

2. src 指定需要处理的源文件的路径

gulp.src(文件路径的模式匹配globs, {options})
globs为需要处理的源文件匹配符路径（字符串或者字符串数组）

eg："src/a.js"                                             匹配具体文件

    "src/*.js"                                             匹配src目录下的所有js文件

    "src/**/*.js"                                         匹配src目录下的 0个或多个子文件夹 下的所有js文件

    "src/{a,b}.js" 或者"src/*.{jpg,png}"     同时匹配多个文件
options：有3个属性buffer read base

buffer：默认true 设置为false时，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

read： 默认为true 设置为false，将不执行读取文件操作，返回null；

base：为string类型 设置输出路径以某个路径的某个组成部分为基础向后拼接。

3. dest 指定处理完之后文件的输出路径

gulp.dest(path,{option})
path为文件的输出路径

options：有2个属性cwd mode

cwd：类型string 默认：process.cwd()：前脚本的工作目录的路径当文件输出路径为相对路径将会用到；

mode：类型：String 默认：0777 指定被创建文件夹的权限；

4. watch 监听文件的变化

gulp.watch(文件路径, [, opts ] , tasks ) 
tasks为当任务为多个时，执行的任务的名称的数组

eg：
	gulp.task('uglify',function(){
 		//do something
	});
	
	gulp.task('reload',function(){
 	//do something
	});
	
	gulp.watch('js/**/*.js', ['uglify','reload']);
	watcher.on('change', function(event) {
		console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
	});

	gulp.watch(glob, [,opts], cb(event))
	cb(event)为每个变化执行的回调函数
  
eg：

	gulp.watch('js/**/*.js', function(event){
 		//变化类型 added为新增,deleted为删除，changed为改变
	console.log(event.type);
		 //变化的文件的路径
	console.log(event.path);
	});
三. gulp常见插件的使用

1. gulp-uglify 压缩javascript文件，减小文件大小

(1) 输入 npm install gulp-uglify –save-dev 安装插件

(2) 在gulpfile.js中引入

var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
gulp.src('js/*.js') // 要压缩的js文件
 .pipe(uglify())
.pipe(gulp.dest('dist/js')); //压缩后的路径
});

  //压缩多个文件
   var gulp = require('gulp'),
  uglify = require('gulp-uglify');
  gulp.task('jsmin', function () {
 //多个文件以数组形式传入
 gulp.src(['src/js/index.js','src/js/detail.js'])
     .pipe(uglify())
     .pipe(gulp.dest('dist/js'));
});

var gulp = require('gulp'),
uglify= require('gulp-uglify');

匹配符“!”，“*”，“**”，“{}”
gulp.task('jsmin', function () {
 //压缩src/js目录下的所有js文件
 //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）
gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
 .pipe(uglify())
 .pipe(gulp.dest('dist/js'));
});
详细介绍：https://www.npmjs.com/package/gulp-uglify)

2. gulp-rename 重命名文件流中的文件

用 gulp.dest() 方法写入文件时，文件名使用的是文件流中的文件名，如果要想改变文件名，那可以在之前用 gulp-rename 插件来改变文件流中的文件名。

(1) 安装gulp-rename

npm install gulp-rename --save-dev
(2) 运用

var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require("gulp-uglify");
gulp.task('rename', function () {
gulp.src('js/jquery.js')
 .pipe(uglify()) //压缩
 //会将jquery.js重命名为jquery.min.js
 .pipe(rename('jquery.min.js'))        //给所有文件加min后缀  .pipe(rename({ suffix: '.min' }))
 .pipe(gulp.dest('js'));
});
详细介绍：(https://www.npmjs.com/package/gulp-rename)[https://www.npmjs.com/package/gulp-rename](https://www.npmjs
.com/package/gulp-rename)

3. gulp-minify-css 压缩css文件时并给引用url添加版本号避免缓存

(1) 安装

npm install gulp-minify-css --save-dev
(2) 运用

var gulp = require('gulp'),
cssmin = require('gulp-minify-css');
 //确保已本地安装gulp-make-css-url-version [npm install gulp-make-css-url-version --save-dev]
cssver = require('gulp-make-css-url-version');
gulp.task('testCssmin', function () {
gulp.src('src/css/*.css')
 .pipe(cssver()) //给css文件里引用文件加版本号（文件MD5）
 .pipe(cssmin())
 .pipe(gulp.dest('dist/css'));
});
详细介绍：https://www.npmjs.com/package/gulp-minify-css/

4. gulp-htmlmin

压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作。

(1) 安装

npm install gulp-htmlmin --save-dev
(2) 运用

var gulp = require('gulp'),
htmlmin = require('gulp-htmlmin');
gulp.task('testHtmlmin', function () {
 var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
 //省略布尔属性的值 <input checked="true"/> ==> <input />
collapseBooleanAttributes: true,
 //删除所有空格作属性值 <input id="" /> ==> <input />
removeEmptyAttributes: true,
 //删除<script>的type="text/javascript"
removeScriptTypeAttributes: true,
 //删除<style>和<link>的type="text/css"
removeStyleLinkTypeAttributes: true,
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
 };
gulp.src('src/html/*.html')
 .pipe(htmlmin(options))
 .pipe(gulp.dest('dist/html'));
});
详细介绍：https://github.com/kangax/html-minifier#user-content-options-quick-reference

5. gulp-concat

用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等，这样就能减少页面的http请求数了。

(1)安装

npm install gulp-concat --save-dev
(2) 运用

var gulp = require('gulp'),
concat = require("gulp-concat");
gulp.task('concat', function () {
gulp.src('js/*.js') //要合并的文件
 .pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
 .pipe(gulp.dest('dist/js'));
});
详细介绍：https://www.npmjs.com/package/gulp-concat/

6. gulp-imagemin 压缩图片文件

详细介绍：https://github.com/sindresorhus/gulp-imagemin

7. gulp-jshint 检测JavaScript代码中错误和潜在问题

详细介绍：https://www.npmjs.com/package/gulp-jshint

8.gulp-rev 给文件增加MD5值

结果如下：

“css/unicorn.css”: “css/unicorn-d41d8cd98f.css”,
“js/unicorn.js”: “js/unicorn-273c2cin3f.js”

(1) 安装：

npm install gulp-rev --save-rev
(2) 运用

var gulp = require('gulp');
var rev = require('gulp-rev');

gulp.task('default', function () {
return gulp.src('assets/css/*.css')
        .pipe(rev())
        .pipe(gulp.dest('dist/css'))  
        .pipe(rev.manifest())//生成一个json文件，记录添加MD5值前后文件名的对应关系
        .pipe(gulp.dest('dist/rev'));
});
9. gulp-rev-recollector 替换掉html文件中的引用路径

本插件必须在gulp-rev安装成功后，用.pipe(rev.manifest())生成了对应的json文件才能替换html文件中的引用路径

(1) 安装

npm install gulp-rev-recollector --save-dev
(2) 运用

var revCollector = require('gulp-rev-collector'); 
gulp.task('rev', ['使用gulp-rev的函数名'] , function () {
    return gulp.src(['rev/**/*.json', 'templates/**/*.html'])
    .pipe( revCollector({
               replaceReved: true,
               dirReplacements: {
                                         'css': '/dist/css',
                                         '/js/': '/dist/js/',
                                         'cdn/': function(manifest_value) {
                                          return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' +     
                                           manifest_value;
                 }
   }
 }) )
 .pipe( gulp.dest('dist') );
});
注意：由于gulp完成各个task是异步的，因此执行gulp-rev-recollector之前需要执行gulo-rev，解决方法：见代码第二行红色部分

10.gulp-autoprefixer 针对不同的浏览器，给CSS文件添加相应的前缀

(1) 安装

npm install gulp-autoprefixer --save-dev
(2) 运用

//引入插件
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
//默认执行任务
gulp.task('default', function () {
//找到src目录下app.css，为其补全浏览器兼容的css
return gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
//输出到dist文件夹
        .pipe(gulp.dest('dist'));
});
11. gulp-watch-path 若文件有改动，针对改动的文件进行压缩

(1) 安装

npm install gulp-watch-path --save-dev
(2) 运用

var watchPath=require('gulp-watch-path');
gulp.task('auto-css',function(){ 
     gulp.watch('static/css/**/*.css', function (event) { 
        var paths = watchPath(event, 'static/', 'dist/') 
        /* 
        paths 
            { srcPath: 'src/js/log.js', 
              srcDir: 'src/js/', 
              distPath: 'dist/js/log.js', 
              distDir: 'dist/js/', 
              srcFilename: 'log.js', 
              distFilename: 'log.js' } 
        */ 
        //gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath) 
        //gutil.log('Dist ' + paths.distPath) 
        gulp.src(paths.srcPath)
        .pipe(minifycss()) 
        .pipe(gulp.dest(paths.distDir)) 
    }) 
});
12. 压缩图片gulp-imagemin

可以压缩gif，png和jpg。

用这个插件压缩jpg图片，体积压缩得越小，图片就越不清晰，所以不建议把jpg图片压缩质量设置得过低，60%-80%为宜。

而把png24压缩成png8，提及一般可以减少50%以上。

图片质量，优化等级进行设置

http://www.ydcss.com/archives/26

三. 在使用时应注意

安装的插件和gulp不需要上传到代码托管工具上，只需要上传package.json 这个文件即可， package.json 这个文件记录了项目中依赖的 glup 插件。
将代码下载下来之后，只需要在这个项目文件夹下面，输入命令 npm install，NPM 会自动读取 package.json 文件，将 gulp 和有关插件下载下来。