问:为什么要用在项目中使用前端自动化构建工具,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)