+
95
-

回答

一、打包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() {
var testing = {};

testing.one = function() {
console.log('module testing');
};

return testing
});
index.html

<!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");
@import url("grid.css");
@import url("form.css");
另外三个是普通的css文件,里面定义的各种样式。这里不贴代码了。这里将使用命令行将这四个文件合并后生成到built.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 除标准压缩外,保留换行和注释



网友回复

我知道答案,我要回答