%20(2).svg)
项目简介
本项目是基于Grunt的前端环境搭建与资源管理系统，旨在帮助前端开发者迅速搭建前端环境，高效管理前端资源，从而提升开发效率。它将开发和发布代码分离，支持快速切换开发、线上、线上调试模式，还具备生产环境代码一键编译发布等功能。
项目的主要特性和功能
- 环境管理：开发与发布代码分离，便于代码管理与定位；支持快速切换开发、线上、线上调试模式，可迅速定位问题；支持生产环境代码一键编译发布；能快速切换和配置CDN。
- CSS管理：CSS可按需加载，控制页面加载量；实时编译监听Less代码；可配置CSS图片资源URL；支持CSS浏览器差异自动补全；对CSS进行排序和压缩优化；提供CSS语法检查。
- JS管理：JS可根据配置列表拼接，控制页面加载；对JS进行拼接和压缩优化；支持JS动态导入；提供JS语法检查。
- 图片管理：支持PNG图片压缩，后续计划实现图片资源文件CDN可配置、CSS sprite图片自动拼接和JPG图片资源压缩。
- 移动端优化：提供公共第三方组件包，后续计划开发可用于子系统的service包和集成Webpack。
安装使用步骤
安装依赖
- 安装node.js，安装入口。
- 安装grunt运行环境（需要网络）：
shell $ npm install -g grunt-cli - 安装npm依赖包：
shell $ npm install
基本操作
- 运行grunt：
shell $ grunt - 在html页面中导入入口文件： ```html
3. 在cross.list.js中配置页面css和js依赖，示例如下：js
module.exports = {
'commonCss.css' : [
'module/reset.css',
'module/common.less'
],
'commonJs.js' : [
'widget/jquery.cookie.js',
'module/dialog.js',
'module/validation.js',
'service/user.js',
]
}
4. 在html页面中导入依赖：html
``` 5. 运行html页面。
其他操作
开发模式下，开启开发模式监听
shell
$ grunt watch
开发模式监听包括配置文件监听、Less编译监听、CSS语法检查（可自行开启和关闭）、JavaScript语法检查（可自行开启和关闭）。
开发模式(dev)/线上模式(online)/线上调试模式切换(onlinedev)
在/dist/v2016**/ued.import.js文件中修改如下配置，即可实现切换：
js
var Config = {
mode: 'online' // dev/online/onlinedev
};
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】