use-gulp

为什么使用gulp?

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

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

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

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

别的先不说,通过代码来比较两者(gulp VS grunt)
可以参照我的代码,也可以阅读[该文章] (http://www.techug.com/gulp)。

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

另外,经常会有人问,为什么gulp比grunt快,这个可以参考这篇文章 或者我本人在segmentfault上得回答编译同样的scss,为什么gulp的速度几乎是grunt的两倍?

关于NodeJS流(stream)

因为gulp是基于流的方式工作的,所以想要进一步深入gulp,我们应该先学习NodeJS的流, 当然即使对流不熟悉,依然可以很方便的使用gulp。

常用资料

gulp常用插件

gulp入门视频

gulp精彩文章

  • Using GulpJS to Generate Environment Configuration Modules
  • Introduction to Gulp.js
  • Merging multiple GulpJS streams into one output file
  • Getting ES6 modules working thanks to Browserify, Babel, and Gulp
  • Gulp学习指南系列:
  • 6 Gulp Best Practices :star:
    • 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
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      - [Gulp 范儿 -- Gulp 高级技巧](http://csspod.com/advanced-tips-for-using-gulp-js/) :star:
      - [Gulp 错误管理](http://csspod.com/error-management-in-gulp/) :star:
      - [探究Gulp的Stream](http://segmentfault.com/a/1190000003770541) :star:
      - [Gulp安装及配合组件构建前端开发一体化](http://www.dbpoo.com/getting-started-with-gulp/)
      - [Gulp入门指南](https://github.com/nimojs/gulp-book)
      - [Gulp入门指南 - nimojs](https://github.com/nimojs/blog/issues/19)
      - [Gulp入门教程](http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/)
      - [Gulp开发教程(翻译)](http://www.w3ctech.com/topic/134)
      - [Gulp:任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html)
      - [BrowserSync — 你值得拥有的前端同步测试工具](http://segmentfault.com/a/1190000003787713)
      - [Essential Plugins for Gulp](http://ipestov.com/essential-plugins-for-gulp/) :star:
      - [10 things to know about Gulp](http://engineroom.teamwork.com/10-things-to-know-about-gulp/?utm_source=javascriptweekly&utm_medium=email) :star:
      - [Writing a gulp plugin](https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/README.md) :star:
      - [Gulp Plugin 开发](https://segmentfault.com/a/1190000000704549) :star:
      - [前端 | 重构 gulpfile.js](https://segmentfault.com/a/1190000002880177)
      - [gulp使用经验谈](http://www.qiqiboy.com/post/61)
      - [Splitting a gulpfile into multiple files](http://macr.ae/article/splitting-gulpfile-multiple-files.html) :star:
      - [Make your Gulp modular](http://makina-corpus.com/blog/metier/2015/make-your-gulp-modular)
      - [gulp 传参数 实现定制化执行任务](http://yijiebuyi.com/blog/d64c5d28eb539941bf3b855d333850cc.html) 使用 `gulp.env`

      #### gulp和ES6
      - [在gulp中使用ES6](http://segmentfault.com/a/1190000004136053) :star:
      - [Using ES6 with gulp](https://markgoodyear.com/2015/06/using-es6-with-gulp/)

      #### gulp和babelify
      - [Example](https://gist.github.com/hjzheng/0ff59d37aa23fbd831e081138c6f24f9)

      #### debug gulp task
      - [Debugging Gulp.js Tasks](http://www.greg5green.com/blog/debugging-gulp-js-tasks/)
      - [Debug command line apps like Gulp](https://github.com/s-a/iron-node/blob/master/docs/DEBUG-NODEJS-COMMANDLINE-APPS.md)

      #### gulp项目结构应用实例
      - [gulp-AngularJS1.x-seed](https://github.com/hjzheng/gulp-AngularJS1.x-seed) :star: 自己写的一个开发环境(gulp + AngularJS1.x)
      - [gulp模式](https://github.com/johnpapa/gulp-patterns)
      - [gf-skeleton-angularjs](https://github.com/gf-rd/gf-skeleton-angularjs)
      - [generator-hottowel](https://github.com/johnpapa/generator-hottowel)
      - [generator-gulp-angular](https://github.com/swiip/generator-gulp-angular#readme)
      - [generator-gulper](https://github.com/leaky/generator-gulper)

      #### gulp常见问题 [segmentfault之gulp](http://segmentfault.com/t/gulp?type=newest)

      - [如何拷贝一个目录?](http://stackoverflow.com/questions/25038014/how-do-i-copy-directories-recursively-with-gulp)
      ```js
      gulp.src([ files ], { "base" : "." })

gulp 4.0 相关

目前 gulp 4.0 还没有正式release,先推荐几篇文章让大家热热身。

原文use-gulp不定期更新中 … …