gruntjs（ http://gruntjs.com/ ）
安装流程
一：先安装nodejs和npm(包管理工具)
二：安装完成后按顺序执行以下命令
npm install -g grunt-cli
npm install grunt –save-dev
grunt –version
开始配置：
项目目录初始视图：
项目请求js，四个
其余JS皆在上一篇seajs实战中贴出代码。
package.json 新版本可能会有冲突，此版本经测试无冲突问题。
{
"name": "gruntSea",
"version": "0.1.0",
"devDependencies": {
"grunt" : "~0.4.2",
"grunt-cmd-transport" : "~0.3.0",
"grunt-cmd-concat" : "~0.2.7",
"grunt-contrib-uglify" : "~0.3.2"
}
}
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
transport : {
gruntSea : {
files : {
'.build' : ['js/main.js','js/drag.js','js/scale.js','js/range.js']
}
}
},
concat : {
gruntSea : {
files : {
'dist/main.js' : ['.build/js/main.js','.build/js/drag.js','.build/js/scale.js','.build/js/range.js']
}
}
},
uglify : {
gruntSea : {
files : {
'dist/main.min.js' : ['dist/main.js']
}
}
}
});
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['transport','concat','uglify']);
};
做完这些配置后，打开命令行工具。进入到此项目中，输入npm install。
然后看项目目录的变化，多了个文件夹及四个文件
然后在输入grunt
看下最终的目录生成
接下来修改index.html,把引入js路径改为gruntjs自动生成压缩的js
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:px; height:px; background:red; position:absolute; display:none;}
#div2{ width:px; height:px; background:yellow; position:absolute; right:; bottom:;}
#div3{ width:px; height:px; background:blue; position:absolute; right:; top:;}
</style>
<script src="sea/sea.js"></script>
<script>
//A开发
seajs.use('./dist/main.min.js');//改为gruntjs自动生成的dist下的主目录。
</script>
</head>
<body>
<input type="button" value="弹窗" id="input1">
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>
此时请求只有一个，丝毫不影响整个拖拽的实现