文/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
文件,代码如下:
然后在命令行执行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')
来对样式进行编译:
经过实验,在
.pipe(sass())
后面不能使用分号;
,不然程序会报错。编译成功后,就可以在dest文件夹下看到编译后的样式文件了,这里可以使用
sass
的语法来验证编译是否成功。同时,我们可以使用
css-minify
插件来格式化样式
var cssminify = require('gulp-minify-css')
系统会自动将
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
的内容如下:当然,通过插件
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
如下:
*注意:在:dev环境下不能使用cssminify()
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
的功能。
注:以上所有内容都是本人的学习笔记和总结,仅供学习和参考,如果有遗漏或者不当的地方请谅解,请勿转载。