grunt构建基于seajs的网站实现

本文介绍了一个使用Grunt进行自动化构建的具体案例,包括配置文件Gruntfile.js的详细设置,如资源复制、压缩等任务,以及如何通过Seajs进行模块化加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>



工程目录:

[img]http://dl2.iteye.com/upload/attachment/0109/5510/856ac443-3876-3db0-89a4-574d1ada09e6.png[/img]

代码:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值