gulp，主要用来前端项目开发过程中自动构建项目，自身的api比较简单，一般搭配着多种插件来使用，以最大限度满足项目的构建需要。
gulp跟grunt、webpack的功能差不多，grunt算是gulp的前辈吧，稍早先用grunt的可能比较多点，webpack目前比较火的原因可能也跟其与react天生一对有关，哥俩好。
本文暂不涉及grunt及webpack的知识，主要介绍两个主题，前一部分先简单介绍gulp的工作原理，后一部分将介绍我是怎么使用gulp的，可以概括为：用gulp构建angular项目中我主要涉及的需求、实现思路及插件。
流(stream)
在使用gulp之前，你先要了解下其工作原理，gulp核心思想之一便是：流。
通过gulp.src方法，将文件以流的形式返回、输出。
管道(pipe)
管道可以看成是流的运输工具吧，通过.pipe方法，可以将输入的流流转到他处进行其他操作，比如最简单的，将其写入文件。
dest
大部分构建任务的最后一步处理可能都是写文件，或者写文件夹。通过gulp.dest方法，将初始文件进行相应的处理后，写入一个新文件(文件夹)中，或者覆盖原有文件。
task
gulp.task可以用来定义一个任务，第一个参数为任务名称，第二个参数表示当前任务要执行的动作，为一个函数。
基本构建需求
先说一般情况下最简单前端项目构建需求，可能包括js合并、压缩、混淆，css合并、压缩，然后支持开发和发布两套指令。
先介绍一个插件：gulp-load-plugins，它可以根据package.json文件，识别gulp插件，在代码中调用后，会将以gulp为前缀的gulp插件添加到返回的对象列表中，根据后面的名字驼峰表示法可以拿到此插件的导出对象。这个插件的好处在于如果代码中用到的gulp插件太多，可以不用一个个的写require代码来引用插件模块。
- 文件合并
gulp-cancat插件可以用于合并多个文件； - 文件压缩、混淆
文件压缩的插件可能比较多，可以根据需要自己选择，目前js处理，选用gulp-uglify，其可对js文件进行压缩及混淆两步处理；
css文件，选用gulp-minify-css来进行压缩处理； - 两套指令
工作当中的指令是能够同时支持项目开发需要及发布需要，比较合适的方案是结合if条件判断及gulp-if插件俩个配合来实现。
进一步扩展
拿一个简单的angular项目来举例，需求可就不止上面这些。
- js依赖注入
使用gulp-ng-annotate插件可以方便在angular项目开发过程中动态依赖注入； - 重命名
使用gulp-rename插件可以重命名文件； - 生成.map文件
使用gulp-sourcemaps插件可以生成.map文件，可以用于混淆后的js文件快速定位问题； - less文件编译
使用gulp-less插件可以对项目中的.less文件进行编译成正常可使用的.css文件； - 自动添加浏览器前缀
使用gulp-autoprefixer，可以给样式表动态自动添加浏览器前缀； - 动态引用资源
使用gulp-inject，可以给指定的入口文件，如index.html，动态插入引用的资源文件，由于最终引用的资源文件可能不时的在更换文件名或者版本号来避免浏览器缓存等，因此使用动态插入引用既可以避免出错又提高工作效率； - html打包js
使用gulp-angular-templatecache，可以将项目中用到的html文件打包为js文件，生成的js文件包含html模版文件的cache，使用时只需要写入依赖即可；
最后
上述这些插件的合理使用可以基本服务一个angular项目的正常构建需要，但是当项目日益庞大，所需要的需求日加复杂的情况下，可能就需要在使用已有的插件搭配工作下进行自己的一些逻辑处理，下文将再对此做一个简单的思路介绍。
☜☜☜ wechat 『『『 reward 点击扫码打赏 ~~~ ^_^ 』』』alipay ☞☞☞ 