New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2015-5-30 使用gulp #33

Open
hjzheng opened this Issue May 30, 2015 · 3 comments

Comments

Projects
None yet
3 participants
@hjzheng
Owner

hjzheng commented May 30, 2015

为什么使用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

This comment has been minimized.

Owner

hjzheng commented Jun 1, 2015

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精彩文章

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

gulp常见问题

如何拷贝一个目录?

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

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

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

@ittce

This comment has been minimized.

ittce commented Jul 15, 2015

mark

1 similar comment
@dszls

This comment has been minimized.

dszls commented Sep 7, 2015

mark

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment