├── .gitignore ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 CUF 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # use-gulp 2 | 3 | #### 为什么使用gulp? 4 | 首先看一篇文章 [Gulp的目标是取代Grunt](http://www.infoq.com/cn/news/2014/02/gulp) 5 | >根据gulp的文档，它努力实现的主要特性是： 6 | > - 易于使用：采用代码优于配置策略，gulp让简单的事情继续简单，复杂的任务变得可管理。 7 | > - 高效：通过利用node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。 8 | > - 高质量：gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。 9 | > - 易于学习：通过把API降到最少，你能在很短的时间内学会gulp。构建工作就像你设想的一样：是一系列流管道。 10 | 11 | > Gulp通过**流和代码优于配置**策略来尽量简化任务编写的工作。 12 | 13 | 别的先不说，通过代码来比较两者（gulp VS grunt） 14 | 可以参照我的代码，也可以阅读[该文章] (http://www.techug.com/gulp)。 15 | 16 | - [Gruntfile.js](https://github.com/hjzheng/angular-cuf-nav/blob/master/Gruntfile.js) 17 | - [gulpfile.js](https://github.com/hjzheng/html2js-gulp-for-cuf/blob/master/gulpfile.js) 18 | 19 | 两者的功能基本类似，gulp是通过代码完成任务，体现了代码优于配置的原则，对程序员更加友好，另外它也可以将多个功能一次性串起来，不需要暂存在本地，体现了对流的使用，这个可以阅读[该文章](http://www.techug.com/gulp)里的例子。 20 | 21 | 另外，经常会有人问，为什么gulp比grunt快，这个可以参考这篇[文章](http://jaysoo.ca/2014/01/27/gruntjs-vs-gulpjs/) 或者我本人在segmentfault上得回答[编译同样的scss，为什么gulp的速度几乎是grunt的两倍?](http://segmentfault.com/q/1010000003951849/a-1020000003952258) 22 | 23 | #### 关于NodeJS流(stream) 24 | 因为gulp是基于流的方式工作的，所以想要进一步深入gulp，我们应该先学习NodeJS的流, 当然即使对流不熟悉，依然可以很方便的使用gulp。 25 | - 资料 26 | - [NodeSchool stream-adventure](https://github.com/substack/stream-adventure) 27 | - [stream-handbook](https://github.com/substack/stream-handbook) 28 | - 相关视频 29 | - [How streams help to raise Node.js performance](https://www.youtube.com/watch?v=QgEuZ52OZtU&list=PLPlAdM3UjHKok9rS8_RTQTSLtRBThk1ni&index=2) 30 | - [Node.js streams for the utterly confused](https://www.youtube.com/watch?v=9llfAByho98&index=1&list=PLPlAdM3UjHKok9rS8_RTQTSLtRBThk1ni) 31 | 32 | #### 常用资料 33 | - Gulp官网 http://gulpjs.com/ 34 | - Gulp中文网 http://www.gulpjs.com.cn/ 35 | - Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn 36 | - Gulp插件网 http://gulpjs.com/plugins/ 37 | - Awesome Gulp https://github.com/alferov/awesome-gulp 38 | - StuQ-Gulp实战和原理解析 http://i5ting.github.io/stuq-gulp/ 39 | - glob用法 https://github.com/isaacs/node-glob 40 | 41 | 42 | #### gulp常用插件 43 | 44 | - **流控制** 45 | - [event-stream](http://www.atticuswhite.com/blog/merging-gulpjs-streams/) 事件流，不是插件但很有用 46 | - [gulp-if](https://github.com/robrich/gulp-if) 有条件的运行一个task 47 | - [gulp-clone](https://github.com/mariocasciaro/gulp-clone) Clone files in memory in a gulp stream 非常有用 48 | - [vinyl-source-stream](https://github.com/hughsk/vinyl-source-stream) Use conventional text streams at the start of your gulp or vinyl pipelines 49 | 50 | - **AngularJS** 51 | - [gulp-ng-annotate](https://github.com/Kagami/gulp-ng-annotate) 注明依赖 for angular 52 | - [gulp-ng-html2js](https://github.com/marklagendijk/gulp-ng-html2js) html2js for angular 53 | - [gulp-angular-extender](https://libraries.io/npm/gulp-angular-extender) 为angular module添加dependencies 54 | - [gulp-angular-templatecache](https://github.com/miickel/gulp-angular-templatecache) 将html模板缓存到$templateCache中 55 | 56 | - **文件操作** 57 | - [gulp-clean](https://github.com/peter-vilja/gulp-clean) 删除文件和目录, 请用[del](https://github.com/sindresorhus/del)来代替它[Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-11-10) 58 | - [gulp-concat](https://github.com/wearefractal/gulp-concat) 合并文件 59 | - [gulp-rename](https://github.com/hparra/gulp-rename) 重命名文件 60 | - [gulp-order](https://github.com/sirlantis/gulp-order) 对src中的文件按照指定顺序进行排序 61 | - [gulp-filter](https://github.com/sindresorhus/gulp-filter) 过滤文件 非常有用 [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/blob/master/2015-11-10/gulpfile.js) 62 | - [gulp-flatten](https://github.com/armed/gulp-flatten) 当拷贝文件时，不想拷贝目录时使用 [segmentfault](http://segmentfault.com/q/1010000004266922) 63 | 64 | - **压缩** 65 | - [gulp-clean-css](https://github.com/scniro/gulp-clean-css)压缩css 66 | - [gulp-uglify](https://github.com/terinjokes/gulp-uglify) 用uglify压缩js 67 | - [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) 压缩图片 68 | - [gulp-htmlmin](https://github.com/jonschlinkert/gulp-htmlmin) 压缩html 69 | - [gulp-csso](https://github.com/ben-eb/gulp-csso) 优化CSS 70 | 71 | 72 | - **工具** 73 | - [gulp-load-plugins](https://github.com/jackfranklin/gulp-load-plugins) 自动导入gulp plugin 74 | - [gulp-load-utils](https://www.npmjs.com/package/gulp-load-utils) 增强版gulp-utils 75 | - [gulp-task-listing](https://github.com/OverZealous/gulp-task-listing) 快速显示gulp task列表 76 | - [gulp-help](https://github.com/chmontgomery/gulp-help) 为task添加帮助描述 77 | - [gulp-jsdoc3](https://github.com/mlucool/gulp-jsdoc3) 生成JS文档 78 | - [gulp-plumber](https://github.com/floatdrop/gulp-plumber) Prevent pipe breaking caused by errors from gulp plugins [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-11-10) 79 | - [yargs](https://github.com/bcoe/yargs) 处理 process.argv 80 | - [run-sequence](https://github.com/OverZealous/run-sequence) 顺序执行 gulp task，gulp 4.0 已经支持该功能 `gulp.series(...tasks)` 81 | - [gulp-notify](https://github.com/mikaelbr/gulp-notify) gulp plugin to send messages based on Vinyl Files 82 | - [gulp-shell](https://github.com/sun-zheng-an/gulp-shell) 非常有用 83 | - [gulp-grunt](https://github.com/gratimax/gulp-grunt) 在gulp中运行grunt task 84 | 85 | - **JS/CSS自动注入** 86 | - [gulp-usemin](https://github.com/zont/gulp-usemin) Replaces references to non-optimized scripts or stylesheets into a set of HTML files 87 | - [gulp-inject](https://github.com/klei/gulp-inject) 在HTML中自动添加style和script标签 [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-8-17/bower-dependence-inject) 88 | - [wiredep](https://github.com/taptapship/wiredep) 将bower依赖自动写到index.html中 [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-8-17/bower-dependence-inject) 89 | - [gulp-useref](https://github.com/jonkemp/gulp-useref) 功能类似与usemin [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-8-17/bower-dependence-inject) 新版本用法有变化，详见gulp-useref的README.md 90 | 91 | - **代码同步** 92 | - [browser-sync](https://github.com/BrowserSync/browser-sync) 自动同步浏览器，结合gulp.watch方法一起使用 [Example 1](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-5-30/gulp-babel-test) [Example 2](https://github.com/hjzheng/es6-practice/blob/master/gulpfile.js) 93 | - [gulp-nodemon](https://github.com/JacksonGariety/gulp-nodemon) server端代码同步 94 | 95 | - **Transpilation** 96 | - [gulp-babel](https://github.com/babel/gulp-babel) 将ES6代码编译成ES5 [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-5-30/gulp-babel-test) 97 | - [babelify](https://github.com/babel/babelify) Browserify transform for Babel 98 | - [gulp-traceur](https://github.com/sindresorhus/gulp-traceur) Traceur is a JavaScript.next-to-JavaScript-of-today compiler 99 | 100 | - **打包** 101 | - [gulp-browserify](https://www.npmjs.com/package/gulp-browserify) 用它和 babelify 实现ES6 module [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-5-30/gulp-es6-module) 102 | 103 | - **编译** 104 | - [gulp-less](https://github.com/plus3network/gulp-less) 处理less [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-7-23/gulp-less-bootstrap) 105 | - [gulp-sass](https://github.com/dlmanning/gulp-sass) 处理sass 106 | 107 | - **代码分析** 108 | - [gulp-jshint](https://github.com/spalger/gulp-jshint) JSHint检查 [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-11-10) 109 | - [gulp-jscs](https://github.com/jscs-dev/gulp-jscs) 检查JS代码风格 [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-11-10) 110 | 111 | - **特别推荐** 112 | - [gulp-changed](https://github.com/sindresorhus/gulp-changed) 只传输修改过的文件 113 | - [gulp-cached](https://github.com/wearefractal/gulp-cached) 将文件先cache起来，先不进行操作 114 | - [gulp-remember](https://github.com/ahaurw01/gulp-remember) 和gulp-cached一块使用 115 | - [gulp-newer](https://github.com/tschaub/gulp-newer) pass through newer source files only, supports many:1 source:dest 116 | 117 | - **其他** 118 | - [webpack-stream](https://github.com/shama/webpack-stream) gulp与webpack [Example](https://github.com/hjzheng/angular-es6-practice/blob/master/gulp/scripts.js) 119 | - [gulp-autoprefixer](https://github.com/sindresorhus/gulp-autoprefixer) Prefix CSS 120 | - [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) 生成source map文件 121 | - [gulp-rev](https://github.com/sindresorhus/gulp-rev) Static asset revisioning by appending content hash to filenames: unicorn.css → unicorn-d41d8cd98f.css 122 | - [gulp-rev-replace](https://github.com/jamesknelson/gulp-rev-replace) [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-11-10) 123 | - [gulp-iconfont](https://github.com/nfroidure/gulp-iconfont) 制作iconfont [Example](https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-7-24/gulp-test-iconfont) 124 | - [gulp-svg-symbols](https://github.com/Hiswe/gulp-svg-symbols) 制作SVG Symbols, [关于使用SVG Symbol](http://isux.tencent.com/zh-hans/16292.html) 125 | - [gulp-template](https://github.com/sindresorhus/gulp-template) 模板替换 126 | - [gulp-dom-src](https://github.com/cgross/gulp-dom-src) 将html中的script，link等标签中的文件转成gulp stream。 127 | - [gulp-cheerio](https://github.com/KenPowers/gulp-cheerio) Manipulate HTML and XML files with Cheerio in Gulp. 128 | - [require-dir](https://www.npmjs.com/package/require-dir) 利用它我们可以将 gulpfile.js 分成多个文件，具体用法可以参考这个[Splitting a gulpfile into multiple files](http://macr.ae/article/splitting-gulpfile-multiple-files.html) 129 | - [gulp-nodemon](https://github.com/JacksonGariety/gulp-nodemon) 强烈推荐, 监控你的node应用,并重现启动server 130 | 131 | #### gulp入门视频 132 | 133 | - **Learning Gulp** (youtube) 134 | - [Learning Gulp #1 - Installing & Introducing Gulp ](https://www.youtube.com/watch?v=wNlEK8qrb0M) 135 | - [Learning Gulp #2 - Using Plugins & Minifying JavaScript](https://www.youtube.com/watch?v=Kh4eYdd8O4w) 136 | - [Learning Gulp #3 - Named Tasks ](https://www.youtube.com/watch?v=YBGeJnMrzzE) 137 | - [Learning Gulp #4 - Watching Files With Gulp ](https://www.youtube.com/watch?v=0luuGcoLnxM) 138 | - [Learning Gulp #5 - Compiling Sass With Gulp ](https://www.youtube.com/watch?v=cg7lwX0u-U0) 139 | - [Learning Gulp #6 - Keep Gulp Running With Plumber ](https://www.youtube.com/watch?v=rF6niaDKcxE) 140 | - [Learning Gulp #7 - Handling Errors Without Plumber ](https://www.youtube.com/watch?v=o24f4imRbxQ) 141 | - [Learning Gulp #8 - LiveReload With Gulp ](https://www.youtube.com/watch?v=r5fvdIa0ETk) 142 | - [Learning Gulp #9 - Easy Image Compression](https://www.youtube.com/watch?v=oXxMdT7T9qU) 143 | - [Learning Gulp #10 - Automatic Browser Prefixing ](https://www.youtube.com/watch?v=v259QplNDKk) 144 | - [Learning Gulp #11 - Gulp Resources & What's Next ](https://www.youtube.com/watch?v=vGCzovUFBIY) 145 | 146 | - **Get started with gulp**(youtube) 147 | - [Get started with gulp Part 1: Workflow overview and jade templates](https://www.youtube.com/watch?v=DkRoa2LooNM&index=8&list=PLhIIfyPeWUjoySSdufaqfaSLeQDmCCY3Q) 148 | - [Get started with gulp Part 2: gulp & Browserify](https://www.youtube.com/watch?v=78_iyqT-qT8&index=9&list=PLhIIfyPeWUjoySSdufaqfaSLeQDmCCY3Q) 149 | - [Get started with gulp Part 3: Uglify & environment variables](https://www.youtube.com/watch?v=gRzCAyNrPV8&index=10&list=PLhIIfyPeWUjoySSdufaqfaSLeQDmCCY3Q) 150 | - [Get started with gulp Part 4: SASS & CSS minification](https://www.youtube.com/watch?v=O_0S6Z9FIKM&index=11&list=PLhIIfyPeWUjoySSdufaqfaSLeQDmCCY3Q) 151 | - [Get started with gulp Part 5: gulp.watch for true automation](https://www.youtube.com/watch?v=nsMsFyLGjSA&list=PLhIIfyPeWUjoySSdufaqfaSLeQDmCCY3Q&index=12) 152 | - [Get started with gulp Part 6: LiveReload and web server](https://www.youtube.com/watch?v=KURMrW-HsY4&list=PLhIIfyPeWUjoySSdufaqfaSLeQDmCCY3Q&index=13) 153 | 154 | - **Gulp in Action** (慕课网) 155 | - [Gulp in Action(一)](http://www.imooc.com/video/5692) 156 | - [Gulp in Action(二)](http://www.imooc.com/video/5693) 157 | - [Gulp in Action(三)](http://www.imooc.com/video/5694) 158 | 159 | - **BGTSD** (youtube) 160 | - [BGTSD - Part 20: Gulp and Babel Basics ](https://www.youtube.com/watch?v=Mo2xqBPbnlQ) 161 | - [BGTSD - Part 21: TypeScript and Gulp Basics ](https://www.youtube.com/watch?v=5Z82cpVP_qo) 162 | 163 | - **John Papa**(付费) 164 | - [JavaScript Build Automation With Gulp.js](http://www.pluralsight.com/courses/javascript-build-automation-gulpjs) 165 | 166 | #### gulp精彩文章 167 | - [Using GulpJS to Generate Environment Configuration Modules](http://www.atticuswhite.com/blog/angularjs-configuration-with-gulpjs/) 168 | - [Introduction to Gulp.js](http://stefanimhoff.de/2014/gulp-tutorial-1-intro-setup/) 169 | - [Merging multiple GulpJS streams into one output file](http://www.atticuswhite.com/blog/merging-gulpjs-streams/) 170 | - [Getting ES6 modules working thanks to Browserify, Babel, and Gulp](http://advantcomp.com/blog/ES6Modules/) 171 | - Gulp学习指南系列： 172 | - [Gulp学习指南之入门](http://segmentfault.com/a/1190000002768534) 173 | - [Gulp学习指南之CSS合并、压缩与MD5命名及路径替换](http://segmentfault.com/a/1190000002932998) 174 | - [6 Gulp Best Practices](http://blog.rangle.io/angular-gulp-bestpractices/?utm_source=javascriptweekly&utm_medium=email) :star: 175 | - Automate all Imports (gulp-inject, wiredep, useref and angular-file-sort) 176 | - Understand directory structure requirements 177 | - Provide distinct development and production builds (browser-sync) 178 | - Inject files with gulp-inject and wiredep ( gulp-inject and wiredep ) 179 | - Create production builds with gulp-useref (gulp-useref) 180 | - Separate Gulp tasks into multiple files ```require('require-dir')('./gulp')``` 181 | - [Gulp 范儿 -- Gulp 高级技巧](http://csspod.com/advanced-tips-for-using-gulp-js/) :star: 182 | - [Gulp 错误管理](http://csspod.com/error-management-in-gulp/) :star: 183 | - [探究Gulp的Stream](http://segmentfault.com/a/1190000003770541) :star: 184 | - [Gulp安装及配合组件构建前端开发一体化](http://www.dbpoo.com/getting-started-with-gulp/) 185 | - [Gulp入门指南](https://github.com/nimojs/gulp-book) 186 | - [Gulp入门指南 - nimojs](https://github.com/nimojs/blog/issues/19) 187 | - [Gulp入门教程](http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/) 188 | - [Gulp开发教程（翻译）](http://www.w3ctech.com/topic/134) 189 | - [Gulp：任务自动管理工具 - ruanyifeng](http://javascript.ruanyifeng.com/tool/gulp.html) 190 | - [BrowserSync — 你值得拥有的前端同步测试工具](http://segmentfault.com/a/1190000003787713) 191 | - [Essential Plugins for Gulp](http://ipestov.com/essential-plugins-for-gulp/) :star: 192 | - [10 things to know about Gulp](http://engineroom.teamwork.com/10-things-to-know-about-gulp/?utm_source=javascriptweekly&utm_medium=email) :star: 193 | - [Writing a gulp plugin](https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/README.md) :star: 194 | - [Gulp Plugin 开发](https://segmentfault.com/a/1190000000704549) :star: 195 | - [前端 | 重构 gulpfile.js](https://segmentfault.com/a/1190000002880177) 196 | - [gulp使用经验谈](http://www.qiqiboy.com/post/61) 197 | - [Splitting a gulpfile into multiple files](http://macr.ae/article/splitting-gulpfile-multiple-files.html) :star: 198 | - [Make your Gulp modular](http://makina-corpus.com/blog/metier/2015/make-your-gulp-modular) 199 | - [gulp 传参数 实现定制化执行任务](http://yijiebuyi.com/blog/d64c5d28eb539941bf3b855d333850cc.html) 使用 `gulp.env` 200 | 201 | #### gulp和ES6 202 | - [在gulp中使用ES6](http://segmentfault.com/a/1190000004136053) :star: 203 | - [Using ES6 with gulp](https://markgoodyear.com/2015/06/using-es6-with-gulp/) 204 | 205 | #### gulp和babelify 206 | - [Example](https://gist.github.com/hjzheng/0ff59d37aa23fbd831e081138c6f24f9) 207 | 208 | #### debug gulp task 209 | - [Debugging Gulp.js Tasks](http://www.greg5green.com/blog/debugging-gulp-js-tasks/) 210 | - [Debug command line apps like Gulp](https://github.com/s-a/iron-node/blob/master/docs/DEBUG-NODEJS-COMMANDLINE-APPS.md) 211 | 212 | #### gulp项目结构应用实例 213 | - [gulp-AngularJS1.x-seed](https://github.com/hjzheng/gulp-AngularJS1.x-seed) :star: 自己写的一个开发环境(gulp + AngularJS1.x) 214 | - [gulp模式](https://github.com/johnpapa/gulp-patterns) 215 | - [gf-skeleton-angularjs](https://github.com/gf-rd/gf-skeleton-angularjs) 216 | - [generator-hottowel](https://github.com/johnpapa/generator-hottowel) 217 | - [generator-gulp-angular](https://github.com/swiip/generator-gulp-angular#readme) 218 | - [generator-gulper](https://github.com/leaky/generator-gulper) 219 | 220 | #### gulp常见问题 [segmentfault之gulp](http://segmentfault.com/t/gulp?type=newest) 221 | 222 | - [如何拷贝一个目录?](http://stackoverflow.com/questions/25038014/how-do-i-copy-directories-recursively-with-gulp) 223 | ```js 224 | gulp.src([ files ], { "base" : "." }) 225 | ``` 226 | 227 | #### gulp 4.0 相关 228 | 目前 gulp 4.0 还没有正式release，先推荐几篇文章让大家热热身。 229 | 230 | - [Gulp 4.0 前瞻](http://segmentfault.com/a/1190000002528547) 231 | - [Gulp 4.0 API 文档](https://github.com/cssmagic/blog/issues/55) 232 | - [是时候升级你的gulp到4.0了](http://www.alloyteam.com/2015/07/update-your-gulp/) 233 | - [Migrating to gulp 4 by example](https://blog.wearewizards.io/migrating-to-gulp-4-by-example) 234 | 235 | 不定期更新中 ... ... 236 | --------------------------------------------------------------------------------