项目构建
一个项目是由多个开发者共同开发一个项目，各负责不一样的模块，这就会形成一个完整的项目许多‘代码片断’组成，合并css、javascript，压缩html、css、javascript、images能够加速网页打开速度，提高性能；可是一系列的任务彻底靠手动完成是很费时间成本的，使用gulp--自动构建就能将这些代码片断重组整合一下。javascript
所谓的构建工具是指经过简.单配置就能够帮咱们实现合并、压缩、校验、预处理等一系列任务的软件工具。常见的构建工具：Grunt、gulp、webpack、F.I.S（百度出品）；css
gulp 工做原理
自动化构建实际上是经过不一样的插件实现构建任务，gulp只是按着配置文件的调用去执行这些插件。html
gulp安装
前提：gulp是依赖Node.js运行的，你必须先安装Node.js；java
进入项目根目录执行npm install gulp --save-dev（添加--save-dev会在package.json记录依赖关系）。(注意是本地安装仍是全局安装，npm install gulp –g 为本地安装)，npm uninstall XX (此指令是卸载）webpack
在项目根目录初始化建立package.json文件(用来记录配置项目常规设置)web
npm initnpm
经常使用的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下载咱们项目所需的依赖插件。json
eg： npm install gulp -g 本地安装，gulp -v 检测是否成功download
在项目根目录下建立一个gulpfile.js文件做为GULP的任务程序，定义任务清单。在定义构建任务实现压缩合并，gulp自身并不执行任何步骤，是经过调用具体的插件来完成的。gulp
引入gulp插件----->定制任务清单----->执行命令less
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.^_^