Gulp Plugin 入门

最近在学习 Gulp，刚开始看的时候一头雾水，看了几篇文章之后稍微有点理解是怎么运行的了，几乎都是依赖各种 plugin。其中一篇《前端从零单排之 Gulp》里提到了几个基本的 plugin，觉得很实用：

1. Less compile (gulp-less)
2. Autoprefixer (gulp-autoprefixer)
3. Minify CSS (gulp-minify-css)
4. JSHint (gulp-jshint)
5. Concatenation (gulp-concat)
6. Uglify (gulp-uglify)
7. Compress images (gulp-imagemin)
8. LiveReload (gulp-livereload)
9. Clean files for a clean build (gulp-clean)
10. Caching of images so only changed images are compressed (gulp-cache)
11. Notify of changes (gulp-notify)
12. EJS Generator (gulp-ejs)
13. gulp-watch
14. main-bower-files

---

1. Less compile (gulp-less)

自动编译 LESS 文件的插件。

2. Autoprefixer (gulp-autoprefixer)

自动分析 CSS 代码并编译成带有兼容前缀的 CSS：

a {
    display: flex;
}

compiles to:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

同时，也会自动去除没有必要的已经失效的前缀，比如：

a {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

compiles to:

a {
    border-radius: 5px;
}

3. Minify CSS (gulp-minify-css)

自动压缩 CSS 文件的插件。

4. JSHint (gulp-jshint)

著名的 JavaScript 代码纠察工具 gulp 插件。

5. Concatenation (gulp-concat)

JavaScript Concatenation 文件合并插件，将多个 JS 文件合并编译成一个文件。

6. Uglify (gulp-uglify)

Minify JavaScript with UglifyJS2，JS 压缩插件。

7. Compress images (gulp-imagemin)

图片压缩插件，Minify PNG, JPEG, GIF and SVG images.

8. LiveReload (gulp-livereload)

实时监听刷新插件。

9. Clean files for a clean build (gulp-clean)

清除文件的插件，用于生成新文件之前。

10. Caching of images so only changed images are compressed (gulp-cache)

缓存插件？还没搞懂，以后再补充。

11. Notify of changes (gulp-notify)

gulp plugin to send messages based on Vinyl Files or Errors to Mac OS X, Linux or Windows using the node-notifier module. Fallbacks to Growl or simply logging

12. EJS Generator (gulp-ejs)

A plugin for Gulp that parses ejs template files

13. gulp-watch

File watcher that uses super-fast chokidar and emits vinyl objects.

14. main-bower-files

Get main files from your installed bower packages.

---

Comments: