2015-5-30 使用gulp

[hjzheng]

为什么使用gulp?

首先看一篇文章 Gulp的目标是取代Grunt

根据gulp的文档，它努力实现的主要特性是：

• 易于使用：采用代码优于配置策略，gulp让简单的事情继续简单，复杂的任务变得可管理。
• 高效：通过利用node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
• 高质量：gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
• 易于学习：通过把API降到最少，你能在很短的时间内学会gulp。构建工作就像你设想的一样：是一系列流管道。

Gulp通过流和代码优于配置策略来尽量简化任务编写的工作。

别的先不说，通过代码来比较两者（gulp VS grunt）
可以参照我的代码，也可以阅读该文章
Gruntfile.js
gulpfile.js

两者的功能基本类似，gulp是通过代码完成任务，体现了代码优于配置的原则，对程序员更加友好，另外它也可以将多个功能一次性串起来，不需要暂存在本地，体现了对流的使用，这个可以阅读该文章里的例子。

一些资料

Gulp官网 http://gulpjs.com/
Gulp中文网 http://www.gulpjs.com.cn/
Gulp插件 http://gulpjs.com/plugins/
Awesome Gulp https://github.com/alferov/awesome-gulp

[hjzheng]

gulp常用插件

event-stream 事件流，不是插件但很有用
gulp-clean 删除文件和目录
gulp-concat 合并文件
gulp-if 有条件的运行一个task
gulp-minify-css压缩css
gulp-ng-annotate 注明依赖 for angular
gulp-ng-html2js html2js for angular
gulp-uglify 用uglify压缩js
gulp-load-plugins 自动导入gulp plugin
gulp-load-utils 增强版gulp-utils
gulp-angular-extender 为angular module添加dependencies
gulp-usemin Replaces references to non-optimized scripts or stylesheets into a set of HTML files
browser-sync 自动同步浏览器，结合gulp.watch方法一起使用 Example
gulp-babel 将ES6代码编译成ES5 Example
vinyl-source-stream Use conventional text streams at the start of your gulp or vinyl pipelines
gulp-browserify 用它和 babelify 实现ES6 module Example
babelify Browserify transform for Babel
gulp-autoprefixer Prefix CSS
gulp-task-listing 快速显示gulp task列表
gulp-rename 重命名文件
gulp-less 处理less Example
gulp-sourcemaps 生成source map文件
gulp-rev Static asset revisioning by appending content hash to filenames: unicorn.css → unicorn-d41d8cd98f.css
gulp-clone Clone files in memory in a gulp stream 非常有用
gulp-filter 过滤文件 非常有用
gulp-iconfont 制作iconfont Example
gulp-inject 在HTML中自动添加style和script标签 Example
gulp-traceur Traceur is a JavaScript.next-to-JavaScript-of-today compiler
gulp-useref 功能类似与usemin Example
wiredep 将bower依赖自动写到index.html中 Example
gulp-jsdoc 生成JS文档
gulp-order 对src中的文件按照指定顺序进行排序
gulp-help 为task添加帮助描述

gulp入门视频

Learning Gulp (youtube)
Learning Gulp #1 - Installing & Introducing Gulp
Learning Gulp #2 - Using Plugins & Minifying JavaScript
Learning Gulp #3 - Named Tasks
Learning Gulp #4 - Watching Files With Gulp
Learning Gulp #5 - Compiling Sass With Gulp
Learning Gulp #6 - Keep Gulp Running With Plumber
Learning Gulp #7 - Handling Errors Without Plumber
Learning Gulp #8 - LiveReload With Gulp
Learning Gulp #9 - Easy Image Compression
Learning Gulp #10 - Automatic Browser Prefixing
Learning Gulp #11 - Gulp Resources & What's Next

Get started with gulp(youtube)
Get started with gulp Part 1: Workflow overview and jade templates
Get started with gulp Part 2: gulp & Browserify
Get started with gulp Part 3: Uglify & environment variables
Get started with gulp Part 4: SASS & CSS minification
Get started with gulp Part 5: gulp.watch for true automation
Get started with gulp Part 6: LiveReload and web server

Gulp in Action (慕课网)
Gulp in Action(一)
Gulp in Action(二)
Gulp in Action(三)

BGTSD (youtube)
BGTSD - Part 20: Gulp and Babel Basics
BGTSD - Part 21: TypeScript and Gulp Basics

John Papa(付费)
JavaScript Build Automation With Gulp.js

gulp精彩文章

• Using GulpJS to Generate Environment Configuration Modules
• Merging multiple GulpJS streams into one output file
• Getting ES6 modules working thanks to Browserify, Babel, and Gulp
• Gulp学习指南系列：
  • Gulp学习指南之入门
  • Gulp学习指南之CSS合并、压缩与MD5命名及路径替换
• 6 Gulp Best Practices ⭐
  • Automate all Imports (gulp-inject, wiredep, useref and angular-file-sort)
  • Understand directory structure requirements
  • Provide distinct development and production builds (browser-sync)
  • Inject files with gulp-inject and wiredep ( gulp-inject and wiredep )
  • Create production builds with gulp-useref (gulp-useref)
  • Separate Gulp tasks into multiple files require('require-dir')('./gulp')
• Gulp 范儿 -- Gulp 高级技巧 ⭐
• Gulp 错误管理

gulp模式 一个完整的gulp项目应用例子

gulp常见问题

如何拷贝一个目录?

gulp.src([ files ], { "base" : "." })

不定期更新中 ... ...

该文章已经迁移到这里 https://github.com/Platform-CUF/use-gulp

[ittce]

mark

[dszls]

mark