1. Gulp的介绍

参考网址：http://www.gulpjs.com.cn/ gulp 中文网
用自动化构建工具增强你的工作流程！
它是一个流式的构建系统（工具）
现在在前端开发这一块底层框架构建这里有很多很多的这种底层构建工具，像国内的有百度出的 FIX ，用腾讯之前出的 NodeJS ，像国外是 Gulp 等其他的，这些构建工具都是可以更好的帮助我们构建底层的工作流程的，工作流程就是一些必须要走的流程，这些流程一直都是必须的，所以我们就应该有一套可以帮助我们构建底层工作流程的工具来实现我们更多自动化的东西，Gulp 就是这样的一种工具
它是一个流式的构建工具，如果是你需要拿到一个文件将它修改之后再编译然后再把它放回去，就这样它会基于文件夹的这种 I/O（输入/输出），如果项目工作量特别大的话那整个一个开发量、整个一个运行编译的时间会特别长，但是 Gulp 它是有一个类似于 Linux 系统的管道的概念，是整个一个流式下来，既出又进 进来 出 作为下一个的进，I/O 又 I，它没有那种再去写的形式，只要各种像 jquery 那样 . . . 就可以把任务从一开始一直输送到最后，而且对于 Gulp 来说，它现在整个开源的圈子给它贡献的插件也非常的多，它的配置也是较为简单的，看下官网的示例，再进行调试，基本就可以跑通了，
但是 Gulp 也有自己的缺点： 在官网上有些插件是跟不上的，但是我们常用的它基本上都有了；还有就是它是基于流的，如果说网上的这些插件不符合 Team 的要求，这个时候就需要你自己去开发一些 基于流式的编译工具以及一些插件，如果你对 NodeJS 的流不是非常熟悉那么开发起来会很困难
还有一个底层的构建工具 npm ，它就像一个原始的构建工具一样，它也可以进行一些构建
我们把这些构建大致可以分为两方面：一种是前端构建，一种是可以集成到 php 也好、NodeJS 也好，像国内的 FIX 它能集成 php 它能集成 Node ，会生成一些 map 文件，然后不用在前端在 require 的时候分析依赖，它会自动分析好这些依赖跟后端进行相关的配合

2. Gulp的安装

参考连接：http://www.gulpjs.com.cn/ Gulp 中文网
点击上述网址中的 【开始使用】按钮，跳转至下面的网址中
http://www.gulpjs.com.cn/docs/getting-started/ 入门指南 - gulp.js 中文文档 | gulp.js 中文网

  1. 全局安装 gulp，并查看是否安装成功 ``` $ npm install —global gulp $ gulp -v
  2. 2. 在桌面新建一个 gulptest 项目文件夹，并在命令行中进入该文件夹目录下

$ cd Desktop $ cd gulptest

  2. 3. 项目初始化

$ npm init

  2. 4. 作为项目的开发依赖（devDependencies）安装：

$ npm install —save-dev gulp

  2. 5. 此时运行 gulp

$ gulp

  1. 会报如下图所示的错误
  3. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-14495060ac55073d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  4. 是因为没有创建与工具匹配的 gulpfile 文件
  7. 6. 在项目根目录下创建一个名为 gulpfile.js 的文件：
  8. 6. 此时运行 gulp

$ gulp

  1. 会报如下图所示的错误
  3. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-fff2df7f6653f3b7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  4. 是因为这个模块需要自己手动引入的
  7. 8. 编辑 gulpfile.js 文件

var gulp = require(‘gulp’); gulp.task(‘default’, function() { console.log(‘ok’); });

  2. 4. 运行 gulp

$ gulp

  1. 命令行中显示如下
  3. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-164543a72dfc39cc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  4. 成功输出了 ok ，证明已经安装好了<br />
  5. #3.  Gulp 的使用<br />
  6. 参考链接：[https://gulpjs.com/plugins/](https://gulpjs.com/plugins/)    Gulp 插件官网
  9. 1. 在项目中新建如下结构的文件夹
  11. > js -> index.js<br />
  12. js -> main.js<br />
  13. build  ->  all.min.js（这个 .js 文件内容是 index 和 main 两个 js 文件压缩合并后的）<br />
  14. index.html
  17. 2. 编辑文件<br />
  18. index.html
  1. index.js

var index = {}; index = { test:function(argument) { console.log(‘test’); } } index.test();

  1. main.js

var main = main || {}; main.test = function(argument) { console.log(‘main test’); } main.test();

  1. gulpfile.js

var gulp = require(‘gulp’); //引入压缩插件 var uglify = require(‘gulp-uglify’); //引入合并插件 var concat = require(‘gulp-concat’); //这个变量可以作为下面的 gulp.src() 的参数 // var paths = { // scripts: [‘js/index.js’, ‘js/main.js’] // } gulp.task(‘default’, function() { //这里是找到了 js 目录下的所有的 js 文件 //这里的参数也可以写成上面定义的 paths 对象 gulp.src(‘js/*.js’) //将上面找到的两个 js 文件作为 输入 进行压缩，压缩完之后直接将这个东西 输出 作为下一步的 输入 // I/O/I .pipe(uglify()) //将上一步压缩好的文件 合并至 all.min.js 文件中 输出 作为下一步的 输入 .pipe(concat(‘all.min.js’)) //将上一步 合并好的文件放到 build 文件夹中 //这个就是基于流式的方式 .pipe(gulp.dest(‘build’)); });

  2. 3. 需要在命令行中装 gulpfile.js 中两个引入的包

$ cnpm install gulp-uglify —save-dev $ cnpm install gulp-concat—save-dev

  2. 4. 运行 gulp

gulp

  1. 命令行中显示如下，表示执行成功了
  3. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-8976955ab3b2f989.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  6. 5. 此时查看 all.min.js 文件，已经成功压缩并合并了<br />
  7. all.min.js

var index={};(index={test:function(t){console.log(“test”)}}).test(); var main=main||{};main.test=function(n){console.log(“main test”)},main.test();

```

  1. 使用 gulp 这个工具时，要考虑你的团队是否是趋于 流式 的工作模式，如果不是的话采用这个工具就会需要自己去写一些基于流式的插件