​类似 Gulp 这样的工具可以说是前端利器，基本前端开发都离不开他，类似的解决方案还有 Grunt 和 Webpack 等，不过我用 Gulp 比较多一些，所以我只能谈谈 Gulp 了。

​Gulp 上面优秀的插件特别多，我使用的有这些： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import gulp from 'gulp'
import babel from 'gulp-babel'
import uglify from 'gulp-uglify'
import ngAnnotate from 'gulp-ng-annotate'
import concat from 'gulp-concat'
import cleanCSS from 'gulp-clean-css'
import imagemin from 'gulp-imagemin'
import minifyHtml from 'gulp-minify-html'
import ngTemplate from 'gulp-ng-template'
import plumber from 'gulp-plumber'
import sass from 'gulp-sass'
import usemin from 'gulp-usemin'
import runSequence from 'gulp-run-sequence'
import eslint from 'gulp-eslint'

  • gulp-uglify

    对 JavaScript 进行压缩的插件，可以有效减少 JavaScript 的文件大小。

  • gulp-ng-annotate

    对 Angular 的代码进行转换，因为使用上面的 gulp-uglify 对 Angular 的代码进行压缩时会破坏 Angular 文件的依赖注入功能，导致无法正常工作，这个基本上是 Angular 开发必备的了。

  • gulp-concat

    文件合并，前端合并文件以减少请求是非常重要的优化技巧。

  • gulp-clean-css

    字如其名，对css 进行合并压缩。

  • gulp-imagemin

    对图片进行压缩。

  • gulp-minify-html

    对html文件进行压缩。

  • gulp-ng-template

    这个也是 Angular 里面比较响当当的一个插件了，他的作用是将 Angular 模板存到 templateCache ，可以提升模板加载速度。

  • gulp-plumber

    这个貌似也是 Gulp 必不可少的插件之一了，可以避免 Gulp 出错导致整个进程崩掉。

  • gulp-sass

    编译 sass 代码为 css，非常方便。

  • gulp-run-sequence

    可以让 Gulp 的任务顺序执行，有些时候我们希望 Gulp 执行了一些任务完成之后才来执行下一个任务，这时候这个插件就派上用场了。

  • gulp-usemin

    这个是用来从工作环境到生产环境进行部署的工具。

  • gulp-eslint

    eslint 代码检查。