文/anMoo韩魔
图片来源网络
Gulp基于Node.js的自动化构建工具
Gulp运行效率比Grunt高，相比之下更有设计感
新建项目
在新建项目之前，电脑中需要安装全局的gulp插件，然后就可以在指定的项目文件中新建gulp项目了。
npm install -g gulp-cli
- 文件夹下-打开终端
npm init - 输入项目名称等信息
(页面中所有引入的js和css都是引用dest文件夹下的压缩文件。)
- 处理CSS
npm install -? (查看group install的命令)
安装css预处理的五个插件：gulp，gulp-sass，gulp-concat，gulp-minify-css，gulp-sourcemaps)
npm install --save-dev gulp gulp-sass gulp-concat gulp-minify-css gulp-sourcemaps
如果需要查看项目安装的所有插件，可以在package.json中的devDependencies中看到。
这需要安装插件的时候使用save-dev命令。
本项目中目前为止安装的插件如下：
安装的插件
- 安装全局gulp插件
npm install -g gulp-cli
安装一个公用指令
- 项目根目录下新建gulpfile.js文件
在gulpfile.js文件中需要引用所有的插件，然后根据需要执行的操作新建任务。
现在需要压缩所有.scss文件，代码如下：
压缩.scss文件
然后在命令行执行gulp style，就可以看到所有文件已经转移到了dest文件夹下:
文件转移
说明我们的项目是完全可以执行的。
然而我们需要的肯定不是单纯的文件转移，我们需要对样式文件进行编译。
项目目录结构举例：
项目目录结构
gulp.src(files[,options])
files: String Array, 必填，需要处理的文件匹配符路径
options: Object，选填，配置选项
base: String，输出路径的基底位置
buffer: Booleab，设置gulp是否缓存文件，在处理大文件时可提高效率
read: Boolean，是否执行文件读取操作
通过对sass插件的引用var sass = require('gulp-sass')来对样式进行编译：
sass插件
经过实验，在
.pipe(sass())后面不能使用分号；，不然程序会报错。编译成功后，就可以在dest文件夹下看到编译后的样式文件了，这里可以使用
sass的语法来验证编译是否成功。同时，我们可以使用
css-minify插件来格式化样式
var cssminify = require('gulp-minify-css')
cssminify
系统会自动将
css格式化，并将相同样式的选择器合并，例如：.index,.select{color:red}
- 链接JS
因为连接起来的js会有命名空间的混淆，所以这里要用到闭包。
通过自定义插件的方式来做一个匿名函数的包裹：
through2.obj.bufferContents每个文件处理时调用
through2.obj.endStream所有文件都处理完后来调用
插件
首先安装through2插件
npm install --save-dev through2
通过定义bufferContents和endStream，在任务中调用through.obj方法
调用
执行
gulp script，得到合并在一起的JS文件，并且每个JS的内容都被包含在自己的作用域中。
闭包
要使合并后的JS有效，还需要编写
registJS函数。（编写的registJS函数属于自定义插件功能，也可以通过gulp自带的插件gulp-insert来完成以上功能，这在后面会有提及）registJS的内容如下：
registJS
当然，通过插件
gulp-insert可以直接完成闭包和registJS的功能。步骤一样是先安装插件
npm install --save-dev gulp-insert在代码中引用插件：
var insert = require('gulp-insert')然后改写上面的代码：
更改以后
gulp-insert使用stream类来才做文件对象，比之前自定义的时候用buffer更好。
- 压缩js
安装gulp-uplify：npm install --save-dev gulp-uglify
引用插件：var uglify = require('gulp-uglify')
调用插件：.pipe(uglify())
gulp-uglify是在生产环境下的压缩。
如果要在开发环境下压缩的话，需要使用另外一个插件browser-sync
安装插件：npm install --save-dev browser-sync
引用插件：var browserSync = require('browser-sync').create();
为了举例，我们新建一个开发环境下的任务default:dev:
gulp.task('default:dev',['script:dev','style:dev'],function(){
browserSync.init({
server:{
baseDir:'./' //新建一个server
},
open:false //防止代码运行时，浏览器自动打开一个页面
})
})
但是这时候的css和js都是已经压缩的，需要安装插件gulp-sourcemaps。
安装插件：npm install --save-dev gulp-sourcemaps
复制原先的style和script任务，把人物名称分别改为：style:dev和script:dev，同时把default:dev的依赖也改成对应的名字['script:dev','style:dev']。
style:dev如下：
style:dev
*注意：在:dev环境下不能使用cssminify()
script:dev如下：
script:dev
运行
default:dev任务后就会在控制台source页面看到没有压缩的css和js供开发人员调试。后期研究：
unit test 框架核心功能的单独调试
- Watch功能
在default:dev任务中添加两行watch的代码：
gulp.watch('scriptPath',['script:dev']); //scriptPath在本项目中为：./script/**/*.js，[ ]中的是需要执行的任务名称,中括号不能删除
gulp.watch('stylePath',['style:dev']); //stylePath在本项目中为：./style/**/*.scss，[ ]中的是需要执行的任务名称,中括号不能删除
同时在script:dev和style:dev两个任务中添加一行代码：
.pipe(browserSync.stream()); //同步浏览器
完成后在命令行启动任务default:dev:
gulp default:dev
这时，在样式文件中修改的内容一旦保存可以直接在显示器显示渲染效果，无需刷新浏览器，这就是watch的功能。
注：以上所有内容都是本人的学习笔记和总结，仅供学习和参考，如果有遗漏或者不当的地方请谅解，请勿转载。
@anMoo韩魔
网友评论