JavaScript个人笔记：js模块化开发seajs+gruntjs

来源：互联网发布：报社上班知乎编辑：程序博客网时间：2024/05/25 12:22

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:200px; height:200px; background:red; position:absolute; display:none;}#div2{ width:30px; height:30px; background:yellow; position:absolute; right:0; bottom:0;}#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}</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>

此时请求只有一个，丝毫不影响整个拖拽的实现

0 0