grunt构建基于seajs的网站实现

mutongwu

浏览: 448363 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

seajs jquery grunt 压缩合并

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>

工程目录：

代码：

seajsDemo.zip (5.3 MB)
下载次数: 5

查看图片附件

分享到：

简单下拉框模拟 | js平滑滚动回到顶部

2015-06-16 16:49
浏览 1126
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

grunt构建基于seajs的网站实现

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

grunt构建基于seajs的网站实现

评论

发表评论

相关推荐

webpack简单打包PC网站前端资源

js平滑滚动回到顶部

fis-amd 的使用与修改

scrollMagic 视差与滚动动画GSAP

skrollr-视差滚动动画插件

stellar插件的使用

icon font VS svg font

gulp下静态资源的合并、压缩、MD5后缀

DOMContentLoaded VS onload VS onreadystatechange

简单的css3全屏滚动

jquery插件treetable 的使用

sublime 侧边栏字体大小修改

移动端的“点透”问题

scheme缺少,ie的bug

大整数相加

getBoundingClientRect 跨浏览器实现

window.name 跨域

window.name 跨域

HTML History API

爬取网站的图片之一

最近访客更多访客>>