问：为什么要用在项目中使用前端自动化构建工具，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 <task> <otherTask>
Gulp所提供的的API：
1、gulp.src(globs[, options])
告诉Gulp你要将哪些文件执行任务（Gulp使用node-glob来从你指定的glob里面获取文件）
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)
网友评论