grunt构建基于seajs的网站实现
Gruntfile.js
页面调用：
工程目录：
代码：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//源码
src: "asserts",
//输出
dist: "dist",
transport: {
options: {
paths:["<%=src%>/sea-modules"],
alias: {
"jquery": "lib/jquery.js"
}
},
modules: {
files : [
{
cwd: '<%=src%>/sea-modules',
expand: true,
src: '**/*.js',
dest: '<%=dist%>/sea-modules'
}
]
},
dwstatic: {
options:{
},
files : [
{
cwd: '<%=src%>',
expand: true,
src: 'dwstatic/**/*.js',
dest: '<%=dist%>'
}
]
}
},
copy:{
moduleRes:{
files:[
{expand: true, cwd: '<%=src%>/sea-modules/css', src:['**'],dest: '<%=dist%>/sea-modules/css'},
{expand: true, cwd: '<%=src%>/sea-modules/img', src:['**'],dest: '<%=dist%>/sea-modules/img'}
]
},
staticRes:{
files:[
{expand: true, cwd: '<%=src%>/dwstatic/css', src:['**'],dest: '<%=dist%>/dwstatic/css'},
{expand: true, cwd: '<%=src%>/dwstatic/images', src:['**'],dest: '<%=dist%>/dwstatic/images'}
]
}
},
concat: {
//合并一个公用的基础js,并且利用 preload插件，让其前置加载。
aio: {
options: {
paths:["<%=dist%>/sea-modules"],
include: "all"
},
files: {
"<%=dist%>/sea-modules/aio.js": ["<%=dist%>/sea-modules/aio.js"]
}
}
},
uglify:{
allJs:{
files:[{
expand: true,
cwd: '<%=dist%>',
src: ['**/*.js', '!**/*-debug.js'],
dest: '<%=dist%>'
}]
}
},
cssmin: {
allCss: {
expand: true,
cwd: '<%=dist%>',
src: ['**/*.css'],
dest: '<%=dist%>'
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.registerTask('min', ['uglify','cssmin']);
grunt.registerTask('default', ['transport', 'concat','copy','uglify','cssmin']);
};
页面调用：
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<link type="text/css" rel="stylesheet" href="asserts/sea-modules/css/common.css" />
<script id="seajsnode" src="http://shawn.yy.com:1234/www/seajsDemo/asserts/sea-debug.js"></script>
<script type="text/javascript" src="http://shawn.yy.com:1234/www/seajsDemo/asserts/seajs-css.js"></script>
<script type="text/javascript" src="http://shawn.yy.com:1234/www/seajsDemo/asserts/seajs-preload.js"></script>
<style>
pre{display:block;background:#000;color:green;padding:20px;font-weight:bold;}
</style>
</head>
<body>
<pre>
npm 安装的包：
npm install -g grunt-cli
npm install grunt --save-dev
npm install grunt-cmd-transport --save-dev
npm install grunt-cmd-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-cssmin --save-dev
</pre>
<input id="pop" value="pop" type="button" class="greenbtn largebtn"/>
<script>
//静态服务器地址
var staticBase = "http://shawn.test.com:1234/www/seajsDemo/dist/";
if(location.search){
staticBase = "/www/seajsDemo/asserts/"; //使用本地资源
}
seajs.config({
preload:["aio"],
base: staticBase + "sea-modules/",
alias: {
"jquery": "lib/jquery.js"
},
vars: {
'locale': 'zh-CN' //国际化支持
},
paths:{
//dwstatic开头的模块，将被重新映射到具体的资源路径。
"dwstatic" : staticBase + "dwstatic"
},
map:[ [/^(.*\.(?:js|css))(.*)$/i, '$1?ver=20150615']]
});
</script>
<script>
//【规范】：凡是dwstatic开头的资源,视为业务模块，要求放置在dwstatic目录下
seajs.use("dwstatic/index");
//seajs.use("dwstatic/index-debug")
</script>
</body>
</html>
工程目录：
代码：