首先看一篇文章 Gulp的目标是取代Grunt
根据gulp的文档,它努力实现的主要特性是:
- 易于使用:采用代码优于配置策略,gulp让简单的事情继续简单,复杂的任务变得可管理。
- 高效:通过利用node.js强大的流,不需要往磁盘写中间文件,可以更快地完成构建。
- 高质量:gulp严格的插件指导方针,确保插件简单并且按你期望的方式工作。
- 易于学习:通过把API降到最少,你能在很短的时间内学会gulp。构建工作就像你设想的一样:是一系列流管道。
Gulp通过流和代码优于配置策略来尽量简化任务编写的工作。
别的先不说,通过代码来比较两者(gulp VS grunt) 可以参照我的代码,也可以阅读[该文章] (http://www.techug.com/gulp)。
两者的功能基本类似,gulp是通过代码完成任务,体现了代码优于配置的原则,对程序员更加友好,另外它也可以将多个功能一次性串起来,不需要暂存在本地,体现了对流的使用,这个可以阅读该文章里的例子。
- Gulp官网 http://gulpjs.com/
- Gulp中文网 http://www.gulpjs.com.cn/
- Gulp插件网 http://gulpjs.com/plugins/
- Awesome Gulp https://github.com/alferov/awesome-gulp
-
流控制
- event-stream 事件流,不是插件但很有用
- gulp-if 有条件的运行一个task
- gulp-clone Clone files in memory in a gulp stream 非常有用
- vinyl-source-stream Use conventional text streams at the start of your gulp or vinyl pipelines
-
AngularJS
- gulp-ng-annotate 注明依赖 for angular
- gulp-ng-html2js html2js for angular
- gulp-angular-extender 为angular module添加dependencies
-
文件操作
- gulp-clean 删除文件和目录
- gulp-concat 合并文件
- gulp-rename 重命名文件
- gulp-order 对src中的文件按照指定顺序进行排序
- gulp-filter 过滤文件 非常有用
-
压缩
- gulp-minify-css压缩css
- gulp-uglify 用uglify压缩js
-
工具
- gulp-load-plugins 自动导入gulp plugin
- gulp-load-utils 增强版gulp-utils
- gulp-task-listing 快速显示gulp task列表
- gulp-help 为task添加帮助描述
- gulp-jsdoc 生成JS文档
-
JS/CSS自动注入
- gulp-usemin Replaces references to non-optimized scripts or stylesheets into a set of HTML files
- gulp-inject 在HTML中自动添加style和script标签 Example
- wiredep 将bower依赖自动写到index.html中 Example
- gulp-useref 功能类似与usemin Example
-
浏览器相关
- browser-sync 自动同步浏览器,结合gulp.watch方法一起使用 Example
-
Transpilation
- gulp-babel 将ES6代码编译成ES5 Example
- babelify Browserify transform for Babel
- gulp-traceur Traceur is a JavaScript.next-to-JavaScript-of-today compiler
-
打包
- gulp-browserify 用它和 babelify 实现ES6 module Example
-
编译
-
其他
- gulp-autoprefixer Prefix CSS
- gulp-sourcemaps 生成source map文件
- gulp-rev Static asset revisioning by appending content hash to filenames: unicorn.css → unicorn-d41d8cd98f.css
- gulp-iconfont 制作iconfont Example
- gulp-svg-symbols 制作SVG Symbols, 关于使用SVG Symbol
- gulp-template 模板替换
-
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 (慕课网)
-
BGTSD (youtube)
-
John Papa(付费)
- 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学习指南系列:
- 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的Stream
- Gulp安装及配合组件构建前端开发一体化
- Gulp 入门指南
- Gulp 入门指南 - nimojs
- Gulp入门教程
- Gulp in Action
- Gulp开发教程(翻译)
- Gulp:任务自动管理工具 - ruanyifeng
- Gulp插件
- Gulp不完全入门教程
gulp.src([ files ], { "base" : "." })
不定期更新中 ... ...