gulp详细教程——前端自动化构建工具

项目构建

　　一个项目是由多个开发者共同开发一个项目，各负责不同的模块，这就会造成一个完整的项目许多‘代码片段’组成，合并css、javascript，压缩html、css、javascript、images可以加速网页打开速度，提升性能；但是一系列的任务完全靠手动完成是很费时间成本的，使用gulp--自动构建就能将这些代码片段重组整合一下。

　　所谓的构建工具是指通过简.单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。常见的构建工具：Grunt、gulp、webpack、F.I.S（百度出品）；

gulp 工作原理

自动化构建其实是通过不同的插件实现构建任务，gulp只是按着配置文件的调用去执行这些插件。

gulp安装

　　前提：gulp是依赖Node.js运行的，你必须先安装Node.js；

　　进入项目根目录执行npm install gulp --save-dev（添加--save-dev会在package.json记录依赖关系）。(注意是本地安装还是全局安装，npm install gulp –g 为本地安装)，npm uninstall XX     (此指令是卸载）

　　在项目根目录初始化创建package.json文件(用来记录配置项目常规设置)

　　   npm init

常用的gulp插件

gulp-less 编译less文件

gulp-autoprefixer 增加CSS私有前缀 （-webkit-   -moz-   -o-） 

gulp-cssmin 压缩CSS

gulp-rname重命名

gulp-imagemin 图片压缩

gulp-uglify 压缩Javascript

gulp-concat 合并多文件为一个

gulp-useref      在HTML做build标记合并

gulp-htmlmin 压缩HTML

gulp-rev 添加版本号

gulp-rev-collector 内容替换

Demo实战

在使用到那种方式构建都需要使用npm下载我们项目所需的依赖插件。

eg：  npm install  gulp -g     本地安装，gulp -v 检测是否成功download

在项目根目录下创建一个gulpfile.js文件作为GULP的任务程序，定义任务清单。在定义构建任务实现压缩合并，gulp自身并不执行任何步骤，是通过调用具体的插件来完成的。

引入gulp插件----->定制任务清单----->执行命令

1.引入

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');
// npm install完成download相应的插件时候，将其引入，我这里是将所有都引入进来了

2

处理cssgulp.task('css', function () {

gulp.task('css', function () {

return gulp.src('./less/main.less')
        .pipe(less())  //转换成css
        .pipe(cssmin())    //压缩
        .pipe(autoprefixer())  //增加私有前缀
        .pipe(rev())　　　　//增加随机的版本号
        .pipe(gulp.dest('./result/css'))   //存储
        .pipe(rev.manifest())
        .pipe(rename('css-manifest.json'))  //创建css-manifest.json文件记录随机增加的版本号，以便后期在HTML文件更改样式的路径
　　　　　.pipe(gulp.dest('./result/rev')); });  //将css-manifest.json存储
})

一些转换后的效果

压缩image// 处理图片

gulp.task('image', function () {

    return gulp.src(['./images/**/*', './uploads/*'], {base: './'})   //base是更改src里面的路径之中的./ 替换成下面存储的路径./result
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//紧跟其后的不变
        .pipe(imagemin())
        .pipe(rev())
        .pipe(gulp.dest('./result')) // 存储的路径为./result/images...    ./result/uploads/
　　　　　.pipe(rev.manifest())
        .pipe(rename('image-manifest.json'))
        .pipe(gulp.dest('./result/rev'));

});

压缩JS

// 处理js
gulp.task('useref', function () {

    return gulp.src('./*.html')
        .pipe(useref())    //在HTML寻找build标记
        .pipe(gulpif('*.js', uglify()))  //判断是不是JS，是则压缩
        .pipe(gulpif('*.js', rev()))　　　//判断是不是JS，是则增加版本号
        .pipe(gulp.dest('./result'));
        .pipe(rev.manifest())            //存储增加的版本信息
        .pipe(rename('js-manifest.json'))
        .pipe(gulp.dest('./result/rev'));

});

替换(前面更换的版本号在HTML并没有跟换样式JS的路径的，增加了版本号之后，需要将HTML中的路径替换一下)

gulp.task('rev', ['css', 'image', 'useref'], function () {

    gulp.src(['./result/rev/*.json', './result/index.html'])
        .pipe(revCollector())     //替换
        .pipe(gulp.dest('./result'));

});

做到这一步，基本上gulp自动构建算完成的了，还是要根据需求去选择具体的步骤。

demo中遇到的error

在处理JS的过程中。报了

Gulp throwing error: File not found with singular glob

出现这样原因主要是因为，在HTML中做标记build之间的 angular.js 文件不存在，之前是被增加了版本号，文件名更改过。注意一下就好了。

After renaming my file I am getting the following error when running the gulp build task，angular.js file no longer exists as i changed it to angular.min.js but for some reason it is cearching for the old file.

Tailing: If thers  is mistake in the article,please give us some advice.^_^