用自动化构建工具Gulp增强你的工作流程

问：为什么要用在项目中使用前端自动化构建工具，gulp或其他等等。

答：先假设你没有使用这等前端自动化构建工具，你是如何构建一个项目的？你肯定是先用一个文件夹装好你的HTML、CSS、JS、图片等等静态资源，然后开始看着设计稿写HTML结构，编辑css样式表，js动态效果以及各种ajax交互。好，当你完成了你的项目，已是黄昏时。。。你提交代码之前，老大交代：css，js，img这些都要给我压缩下才能往上放，你又苦逼地区在线网站压缩css、js、压缩图片，这一切都是你亲力亲为去做的。这些机器式的工作本不该打代码的青年去亲自完成，想办法偷个懒呗，能不能在你一边工作的时候，谁可以替你进行这些工作，到你项目完成，也就直接拥有了这些压缩的静态资源。Gulp可以做到，而且不止是这些~

---

开始使用Gulp：

1、全局安装gulp：

$ npm install --global gulp  或  npm install -g gulp

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

$ npm install --save-dev gulp

note：先在项目根目录下使用npm init命令 根据提示生成一个package.json吧——如果没有的话

3、在项目根目录下创建一个名为gulpfile.js的文件：

var gulp = require('gulp');

gulp.task('default', function() {

    // 这里写你要开启的默认任务

})

4、运行gulp：

$ gulp 或 gulp

Gulp所提供的的API：

1、gulp.src(globs[, options])

告诉Gulp你要将哪些文件执行任务（Gulp使用node-glob来从你指定的glob里面获取文件）

更全面的node-gulp语法点击这里

options.buffer（如果该项被设置为false，那么将会以 stream 方式返回file.contents而不是文件 buffer 的形式。这在处理一些大文件的时候将会很有用。）

options.read （false将不会读取文件）

options.base（string型，将会加在glob前，有点像基地址）

举例子：  gulp.src(['js/**/*.js', '!js/**/*.min.js'])  “ * ” 代表任意，" ! "代表排除

那这句话的意思就是：选中与gulpfile.js同级下的js文件夹，下的所有文件夹里的所有.js后缀的文件，并且排除掉所有文件名尾部为.min的.js文件

截取一小段自己用的配置：

这里定义一个task名为css：

作用是将我指定路径下的scss文件编译成css文件扔进指定文件夹后，再压缩、重命名再扔进另一个指定的文件夹的。

2、dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

options.cwd输出目录的cwd参数，只在所给的输出目录是相对路径时候有效。

options.mode八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

3、gulp.task(name[, deps], fn)