0.1.0 • Published 11 years ago
grunt-ne v0.1.0
grunt-ne
三个grunt插件的集合,打包前端资源
开始使用
安装
npm install grunt-ne
配置
添加下面一行到你的grunt.js
:
grunt.loadNpmTasks('grunt-ne');
然后为插件增加像下面这样的配置:
grunt.initConfig({
...
pkg: {
name: "jy",
dist: "dist",
base_uri: "http://static.mail.com/jy"
},
css_version: {
main: {
css_src: "./css",
css_dst: "css",
img_dst: "img",
resource_map_file: "<%= pkg.dist %>/css-resource-map.json"
files: "**/*.css"
}
},
spm: {
root: "./js",
resource_map_file: "<%= pkg.dist %>/js-resource-map.json",
options: {
src: ".",
dist: "../<%= pkg.dist %>/js"
}
},
html_substitute: {
main: {
resource_map: ["<config:css_version.main.options.resource_map_file>"],
src: "./html",
files: "*.html"
}
},
...
});
命令
css_version
读取css_src
中的css文件,分析css文件中的图片引用,把这些图片保持原有目录地移到img_dst
,并把对图片做md5处理后的值作为该图片文件名一部分,css文件中对该图片的引用路径也更改为图片处理后的路径;移动css文件到css_dst
,对css文件压缩并做把md5处理后的值作为该css文件名一部分,最后产出resource_map_file
。
spm
对使用 seajs 组织的模块使用 spm 打包,最后产出resource_map_file
,上线后调用seajs.map(%resource_map%);
,resource_map_file
的内容替换%resource_map%,就能无缝地去加载打包后的资源文件。
html_substitute
根据resource_map
,对模版文件的资源引用的路径替换,暂时只能识别css引用。