mz-gulp v1.0.7

mz-gulp

基于gulp的开发，针对前端项目一整套构建任务计划

• 支持JS/CSS/IMG的 合并、美化、文件重命名、移动至发布目录
• 支持将新的文件名自动替换到目标html、css中，无需手动调整
• 支持base64处理图片，替换css中的引用
• 默认开启监控模式，检测到源文件修改后，自动构建并发布到制定的发布目录

命令行安装使用

前提是安装了node哦

step1： 全局安装 gulp

npm install -g gulp

step2： 加载运行依赖

npm install mz-gulp --save-dev

step3： 启动任务

gulp

相关说明

prj.config

• base64 ===> true表示支持将img(jpg/png)生成base64格式，并写入到对应的css文件中,默认为false
• deployDir ===> js/img/css等部署的目录，默认为assets， 目录未写时，将自动创建该目录
• htmlDeployDir ===> html部署目录的输出位置

源文件目录结构

• --src/css ===> 样式
• --src/html ===> html
• --src/js ===> js脚本/tpl模板
• --src/img ===> 图片等资源

gulpfile.js

• 串行执行 ===> gulp默认任务串行启动，但以并行方式运行，结果并不能按启动顺序，依次得到结果; 但mz-gulp是可以串行运行的。
  如下代码,优先执行clean，最后RevCollector，前一个的执行结果是后一个的条件

  series.registerSeries("default", "clean", "tpl", "js", "img", "css", "RevCollector");

• 版本变更记录: assets/manifest/*.json
  json中记录了原始文件名称和新变更后结果名称 , 可为控制版本更新策略提供依据，真他妈好用!

模板语言

• 默认使用了 gulp-template-module ， 使用的是seajs合并方式
• 格式： 模板语言统一以 .tpl结尾; 具体可参考 src/js/a.tpl ; 输出目录查看 assets/js/tpl-xxx.js
• 关闭模板：可手动注释 gulpfile中的 tpl 任务即可