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.^_^