一、打包js
npm init
npm install requirejs --save
npm install jquery@1.11.1 --save
拷贝 requirejs目录下的r.js到根目录
再创建基本目录,包含js/main.js及js/test.js与index.html及buid.js
build.js
({
dir:'./one',//输出路径
paths:{
jquery:'node_modules/jquery/dist/jquery.min',
test:'js/test',
index:'css/index.css'
},
name: 'js/main',// 模块入口
optimize: 'none',//是否压缩 默认是压缩的,去掉不要就是压缩
})
js/main.js
require.config({
baseUrl:'node_modules/',
paths:{
'jquery':'jquery/dist/jquery.min',
'js':'../js'
}
});
require(['jquery','js/test'],function($,test) {
console.log($);
test.one();
});
js/test.js
define([],function() {index.html
var testing = {};
testing.one = function() {
console.log('module testing');
};
return testing
});
<!DOCTYPE html>目录结构如下:
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe class="iframe" src="http://baidu.com" frameborder="0" height="300"></iframe>
<script type="text/javascript" defer anync="true" src="node_modules/requirejs/require.js" data-main="js/main"></script>
</body>
</html>
好了,我们来打包js
node r.js -o build.js
打包合并后的js进入了one目录中了

二、打包css
假设css文件夹中有四个css文件:main.css、nav.css、form.css、grid.css。
main.css是合并的主文件,或称配置文件。要合并的文件使用@import引入。如下:
main.css
@import url("nav.css");另外三个是普通的css文件,里面定义的各种样式。这里不贴代码了。这里将使用命令行将这四个文件合并后生成到built.css。
@import url("grid.css");
@import url("form.css");
node r.js -o cssIn=css/main.css out=css/built.css optimizeCss=standard
optimizeCss选项:
none 不压缩,仅合并
standard 标准压缩 去换行、空格、注释
standard.keepLines 除标准压缩外,保留换行
standard.keepComments 除标准压缩外,保留注释
standard.keepComments.keepLines 除标准压缩外,保留换行和注释
网友回复