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-collect": {
main: {
css_src: "./css",
css_dst: "css",
img_dst: "img",
resource_map_file: "<%= pkg.dist %>/css-resource-map.json",
files: "*.css"
}
},
"spm-build": {
root: "./js",
resource_map_file: "<%= pkg.dist %>/js-resource-map.json",
resource_map: {
"bootstrap-dropdown": "ui.js"
},
options: {
src: ".",
dist: "../<%= pkg.dist %>/js"
}
},
"html-replace": {
main: {
resource_map: ["<config:css-collect.main.resource_map_file>"],
src: "./html",
files: "*.html"
}
},
...
});
命令
css-collect
读取css_src
中的css文件,分析css文件中的图片引用,把这些图片保持原有目录地移到img_dst
,并把图片的md5值作为该图片文件名一部分,css文件中对该图片的引用路径也更改为图片处理后的路径;移动css文件到css_dst
,对css文件压缩并做把css 的md5值作为该css文件名一部分,最后产出resource_map_file
。
spm-build
对使用 seajs 组织的模块使用 spm 打包,最后产出resource_map_file
,上线后比如在freemarker模板里如下使用, 就能无缝地去加载打包后的资源文件。
seajs.config({
...
map: <#include {path to resource map file}>
...
});
html-replace
根据resource_map
,对模版文件的资源引用的路径替换,暂时只能识别css引用。