项目构建gulp

1、简介

所谓构建工具是指通过简单配置，就可以帮助我们实现合并、压缩、校验、预处理等一系列的软件工具。
常用的构建工具有：Grunt、Gulp、F.I.S（百度出品）等。
其中gulp是基于nodejs开发的工具，借助gulp插件实现不同的构建任务
全局安装：cnpm install gulp -g

1.1 gulp和webpack的区别

gulp是工具链、构建工具，可以配合各种插件做js压缩、css压缩、less编译等，替代手工实现自动化工作。

构建工具
自动化
提高效率用

webpack是文件打包工具，可以把js、css文件等打包成一个文件或多个文件，主要用于模块化方案

打包工具
模块化识别
编译模块代码方案用

2、基本使用

1).本地安装

进入项目根目录执行npm install gulp –save-dev（添加–save-dev会在package.json记录依赖关系）。要出现package.json需要先npm init

2).任务清单

在项目目录中创建gulpfile.js文件（配置文件）

var gulp = require('gulp');       //引入本地安装的gulp
//定义任务
gulp.task('less',function(){
    console.log('学习gulp')；
    //借助gulp.src来指定less文件位置 
});

返回值gulp是一个对象，借助此对象可以实现任务清单订制，通过一系列的方法。
例如上述代码，在项目中打开终端，输入gulp less就会执行gulpfile.js下的less方法（此时终端输入的gulp是全局的gulp）

3).定义任务

Gulp自身并不执行任何任务，是通过调用具体插件来完成的。
以编译LESS为例，安装npm install gulp-less –save-dev，如下图定义任务
这里写图片描述
.pipe管道——上一次的输出结果为这一次的输入，gulp.dest进行存储

4).执行任务

输入命令 gulp less 之后，less文件就会被编译成了css文件

这里写图片描述

3、gulp的API

gulp.task() 定义各种不同的任务，不同任务间存在依赖关系时，可以指定依赖

gulp.task('less',['依赖1'，'依赖2'],function (){

});

gulp.src() 需要构建资源的路径，字符串或数组（可以正则方式书写）
gulp.pipe() 管道，将需要构建的资源“输送”给插件。
gulp.dest() 构建任务完成后资源存放的路径（会自动创建）
gulp.watch()

4、常用gulp插件

gulp-less 编译LESS文件
gulp-autoprefixer 添加CSS私有前缀
gulp-cssmin 压缩CSS
gulp-rname重命名
gulp-imagemin 图片压缩
gulp-uglify 压缩Javascript
gulp-concat 合并
gulp-htmlmin 压缩HTML
gulp-rev 添加版本号，版本号为MD5加密的字符
gulp-rev-collector 内容替换
gulp-useref 进行资源合并
gulp-if 条件

补充

gulp.src多个路径的时候用数组 gulp.src(['./index.html','./views/*.html'])，还可以指定文件夹 gulp.src(['./index.html','./views/*.html'],{base:'./'}) {base:’./’})表示压缩后的文件之前在views中的还是放在views中
node管理包的网站https://www.npmjs.com/
htmlmin 有参数 htmlmin({collapseWhitespace:true}) 合并代码
记录版本号 gulp-rev

gulp.task('css',function(){
    gulp.src('./public/less/main.less')
    .pipe(less())
    .pipe(cssmin())
    .pipe(autoprefixer())
    .pipe(rev())
    .pipe(gulp.dest('./release/public/css'))
    //收集对应关系
    .pipe(rev.manifest())
    .pipe(gulp.dest('./release/rev'));
})

.pipe(rev())是改名字，rev.manifest()存储修改过的名字之间的对应关系
5. 压缩处理js的话需要借助useref，且需要在html文件中做标记，

<!-- build:js ./libs/angular.min.js -->
    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/angular-route/angular-route.js"></script>
<!-- endbuild -->

在需要合并的地方加注释，build:js ./libs/angular.min.js对应endbuild
./libs/angular.min.js 是处理后的路径/名字

要删除代码时可以在代码中注释build:remove 和endbuild
6. 创建任务时可以注入依赖

gulp.task('demo',['css','image'],function(){
    console.log(11)
})

表示依赖css和image任务
7. 替换（当版本号改变时对应html文件中的引入也要改变）

gulp.task('rev',['css','image','useref'],function () {
    gulp.src(['./release/rev/*.json','./index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('./release'))
})

当文件名改变后再执行rev
8. 现在执行的每一步可以用一行完成gulp.task('default',['rev','other']); 因为rev依赖css 、image、useref，所以这句代码可以将所有的都执行完。终端只需输入gulp即可
问题：替换并不能很好的执行，因为三个依赖是异步执行的，可能会出现依赖未执行完就执行下边的替换逻辑。解决：将每个任务的方法return 出来，使其成为同步执行

gulp.task('css',function(){
    return  gulp.src('./public/less/main.less')
                .pipe(less())
                .pipe(cssmin())
                .pipe(autoprefixer())
                .pipe(rev())
                .pipe(gulp.dest('./release/public/css'))
                //收集对应关系
                .pipe(rev.manifest())
                .pipe(gulp.dest('./release/rev'));
})

案例：服务器中www豆瓣一刻

var gulp = require('gulp'),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    autoprefixer = require('gulp-autoprefixer'),
    rev = require('gulp-rev'),
    imagemin = require('gulp-imagemin'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    revCollector = require('gulp-rev-collector');

// 处理css
gulp.task('css',function(){
    return gulp.src('./public/less/main.less')
    .pipe(less())
    .pipe(cssmin())
    .pipe(autoprefixer())
    .pipe(rev())
    .pipe(gulp.dest('./release/public/css'))
    //收集对应关系
    .pipe(rev.manifest())
    .pipe(rename('css-manifest.json'))
    .pipe(gulp.dest('./release/rev'));
})

// 处理图片
gulp.task('image',function (){
    return gulp.src(['./public/images/**/*','./uploads/*'],{base:'./'})
    .pipe(imagemin())
    .pipe(rev())
    .pipe(gulp.dest('./release'))
    .pipe(rev.manifest())
    .pipe(rename('image-manifest.json'))
    .pipe(gulp.dest('./release/rev'));

})

// 处理js
gulp.task('useref',function (){
    return gulp.src('./index.html')
        .pipe(useref())
        .pipe(gulpif('*.js',uglify()))
        .pipe(gulpif('*.js',rev()))    
        .pipe(gulp.dest('./release'))
        .pipe(rev.manifest())
        .pipe(rename('js-manifest.json'))
        .pipe(gulp.dest('./release/rev'));
})

// 其他
gulp.task('other',function(){
    gulp.src(['./api/*','./public/fonts/*','./public/libs/*','./views/*.html'],{base:'./'})
        .pipe(gulp.dest('./release'));

})
// 替换

gulp.task('rev',['css','image','useref'],function () {
    gulp.src(['./release/rev/*.json','./release/index.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('./release'))
})

gulp.task('default',['rev','other']);


//直接在中断gulp可以出来
/*gulp.task('default',function () {
    console.log('默认')

})*/
//依赖
/*gulp.task('demo',['css','image'],function(){
    console.log(11)
})*/