gulp自动化构建的常用功能和组件总结

一、使用gulp的原因

gulp是基于Node.js的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成等功能。

gulp 和 grunt 非常类似，但是后者对I/O的操作更为频繁，容易产生许多中间态的临时文件，从而影响其他任务最重操作结果，相比之下，gulp的流概念运用管道去处理单个任务，显得非常简洁有效率。

二、gulp常用的插件总结

至于如何安装gulp，如何配置gulp，请参考gulp的入门文档：传送门

（一）gulp-concat和gulp-uglify

一般来说，这两个插件通常一起使用，它们的功能是：

• gulp-concat：用于合并js、css文件；
• gulp-uglify ：用于压缩js文件，减少体积。

（二）gulp-autoprefixer

CSS3的一些酷炫功能很多时候是需要添加浏览器私有前缀来达到兼容效果的，但是很多时候在写CSS爽的飞起时，经常会漏掉一两个属性忘记添加前缀，那么使用gulp-autoprefixer就可以自动为属性添加浏览器前缀了。

（三）gulp-csso

既然js需要压缩，那么css自然也有相应的压缩插件，gulp-csso就是为此诞生

（四）parallel（）方法

这个并不是插件，就是gulp提供的一个方法，可以平行地运行多个task，我们都知道gulp是通过每个单一的task来组成总体任务的，而使用parallel()可以平行地执行多个task

（五）gulp-html-minify

用于压缩html文件，去掉html文件的换行空格等

（六）gulp-html-replace

很多时候我们用gulp合并了静态文件，那么html中那些静态文件如js、css的引用地址就需要修改，我们当然可以在输出的文件中找出来修改，但显然利用gulp的插件来完成更加高效。比如<link>中的href地址，需要修改时，就需要我们用一组指定的注释去包裹它，如：

<!--build:css-->
<link rel="stylesheet" href="./css/first.css">
<link rel="stylesheet" href="./css/second.css">
<!--endbuild-->

那么只需要在gulpfile.js中做相应配置就能把href自动改成指定的地址。

const {src, dest, pipe, parallel} = require("gulp")
const htmlreplace = require("gulp-html-replace")

function html(){
  return src("./foo/*.html")
  .pipe(htmlreplace({
    css:"css/min.css"
  }))
  .pipe(dest("./dest"))
}
exports.default = html

三、使用示例

const {src, dest, pipe, parallel} = require("gulp")

const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const autoprefixer = require('gulp-autoprefixer')
const csso = require('gulp-csso')
const htmlminify = require("gulp-html-minify")
const htmlreplace = require("gulp-html-replace")

function js(){
  return src("./foo/**/*.js")
  .pipe(uglify()) //压缩js文件
  .pipe(concat('min.js')) //合并js文件，并输出为min.js的文件
  .pipe(dest('./dest/js'))
}

function css(){
  return src("./foo/*.css")
  .pipe(autoprefixer({
    browsers:['last 2 versions','> 5%', 'firefox > 10', 'ie 6-8']
  }))  //自动添加css属性的浏览器私有前缀,下面分别是压缩、合并
  .pipe(csso()) 
  .pipe(concat('min.css'))
  .pipe(dest('./dest/css'))
}

function html(){
  return src("./foo/*.html")
  .pipe(htmlreplace({
    css:"css/min.css"
  }))//替换html中css的地址为css/min.css，下面紧接着是压缩html
  .pipe(htmlminify())
  .pipe(dest("./dest"))
}

exports.default = parallel(js,css,html) //平行运行这三个任务