- 支持LESS、SASS转CSS,支持CSS自动添加前缀;
- 支持JS校验、压缩;支持图片压缩;
- 支持静态资源版本管理;
# 全局安装gulp
npm i -g gulp
# shell 切换至工作目录(`gulpfile.js`存放目录)
cd xxx/xx
# 安装依赖
npm i
# 开发构建(在 localhost:3333 端口、支持热重启)
npm run dev
# 生产构建
npm run build
src/
为开发目录
embedded/
**'embedded'**项目目录
pcHome/
**'pcHome'**项目目录
popup/
**'popup'**项目目录
css/
压缩后输出至 dist/popup/img/
fonts/
存放字体文件,构建后会复制到 dist/popup/js/
img/
压缩后输出至 dist/popup/img/
js/
压缩后输出至 dist/popup/js/
less/
处理后输出至 src/popup/js/
lib/
存放第三方库,构建后会复制到 dist/popup/js/
index.html
dist/
最后输出目录(开发阶段不用管它)
rev/
静态文件版本管理对照表存放目录(gulp脚本生成,可以不用管它)
- 开发目录默认为
src
,由gulpfile.js
内的DEVELOPMENT_PATH
变量定义;
- 必须给定项目目录,请修改
gulpfile.js
内的PROJECT_NAME
变量;
- 不推荐自定义其他目录,否则要修改
gulpfile.js
内的G_PATH
变量;
shell
下切换到工作目录(gulpfile.js
存放目录),执行如下命令
gulp sprite
:合成雪碧图
gulp watch:less
:实时编译LESS
gulp watch:sass
:实时编译SASS
gulp watch:browser
:开发构建,等同 npm run dev
gulp build
:生产构建,等同 npm run build
gulpfile.js
内有详细注释。
- 已修复无法压缩
jpg jpeg
图片的BUG。
- 阅读
gulp-imagemin
源码后发现这个插件只能传入plugins
(Array Object),不可传入options
(Original Object)。