grunt构建基于seajs的网站实现

最新推荐文章于 2017-10-24 20:59:00 发布

最新推荐文章于 2017-10-24 20:59:00 发布 · 265 阅读

文章标签：

#seajs #jquery #grunt #压缩 #合并 #ViewUI

JavaScript 同时被 3 个专栏收录

117 篇文章

订阅专栏

javascript-半成品

11 篇文章

订阅专栏

Nodejs

10 篇文章

订阅专栏

本文介绍了一个使用Grunt进行自动化构建的具体案例，包括配置文件Gruntfile.js的详细设置，如资源复制、压缩等任务，以及如何通过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>