项目的性能优化迫在眉睫了,图片/js/css/的压缩合并势在必行,一直知道这是一个优化点却从未去做。新需求,总会有形无形地促使人去学习新知识以完成任务。
gulp
,这么神奇好玩的东西,赶紧搞起来!
gulp初识
是啥?能啥?
基于 node.js
,是前端开发过程中的一种代码构建工具,自动化项目的构建利器。
基于流,管道 pipe
思想;前一级的输出、直接变成后一级的输入,简化操作。
能自动化地完成:
- 文件合并
gulp-concat
- 文本拷贝
gulp-copy
- 文本替换
gulp-replace
- 图片压缩
gulp-imagemin
- css 压缩
gulp-cssmin
- js 压缩
gulp-uglify
安装 gulp
前提,安装好 node.js
。
全局方式安装 gulp
:
|
|
全局安装后,还必须在要使用 gulp
的项目中再单独安装一次;切换至项目文件夹位置,进行安装:
|
|
一般地,安装时需要把 gulp
写进项目 package.json
文件的依赖话,加上 --save-dev
:
|
|
这样,就可以在该项目中应用 gulp
了。比如,我在文件夹 gulp_test1
下的 git bash
命令中安装完后,就会自动生成 node_modules
目录结构。
gulp开始使用
新建 gulpfile.js
文件:
在文件夹 gulp_test1
下,新建 gulpfile.js
文件,打开该文件编辑、输入以下代码(定义任务):
|
|
这时,完整的目录结构是这样的:
最后,在存放 gulpfile.js
的文件夹下(即 node_modules
下),通过命令行执行,成功结果如下:
|
|
‘gulp task1’ gulp + 任务名,即为执行该指定任务;只有 gulp
,则默认执行名为 `default
的任务。