sea.js+grunt学习笔记

来源：互联网发布：淘宝怎样发布二手宝贝? 编辑：程序博客网时间：2024/06/05 10:24

grunt 配置变量是这样写的<pre name="code" class="javascript"><%= banner %>所下面定义了变量banner: '/*! Project: <%= pkg.name %>\n *  Version: <%= pkg.version %>\n *  Date: <%= grunt.template.today("yyyy-mm-dd hh:MM:ss TT") %>\n *  Author: <%= pkg.author.name %>\n */',

使用变量 options:{ banner:'<%= banner %>'} 记得加引号

sea技巧

1 SEA引入加ID<script src="xxxx" id="seajsnode"></script>

2 spm sea package manager

npm install spm -g

npm install spm-build -g

对某脚本进行SPM BUILD

$ spm build xxx.js 不过哥好像没BUILD得完整

3 调试接口

seajs.cache 在控制台输入

通过了解GRUNT，  记录一些问题GRUNT官网http://gruntjs.com/GRUNT 还有中文官网GRUNT 插件搜索https://www.npmjs.com/package/grunt-cmd-concat

GRUNT 任务有两种写法。。一种是
uglify:{

files:{'xxx.js':'xxxx.js'}

//要处理目标}如果要处理目标是多个。请用数组形式

files:{'xxx.js',['xxxx.js','2.js'] }

第二种写法：通过SRC和DEST

files:[{                 //   expand:true,                    src: ['.build/main.js','.build/*.js'],                    dest: 'dest/main.js'                }]

有个别,file:{}，没有数组中括号，所以具体还是看GRUNT 模块的写法。。

expand为TRUE时，可以使用诸如cwd,之类的扩展 cwd进入目录 ext改变文件后缀如 '.min.css' 像SASS的

        sass: {            dist: {                options: {                    style: 'compact', //nested, compact, compressed, expanded                    sourcemap: true,                    noCache: true                },                files: [{                    expand: true,                    cwd: 'src/sass',                    src: ['*.scss','!_*.scss','!*/_*.scss'],                    dest: 'src/css',                    ext: '.css'                }]            }        },

concat好像没这么智能，如果这样写

    concat:{           options:{},           dist:{                files:[{                           src: ['.build/main.js','.build/*.js'],                    dest: 'dest/main.js'                 }]             }        },

这里想用CWD，但用了之后，只会自动生成各自的文件，但不能合成一个指定的MAIN。JS文件，相反，这里DEST配置的名字，反而成了一个目录。。

还有。SEA。JS合并，是要有指定顺序的，因为我MAIN。JS没有写成一个对外接口模块(EXPORTS)的写法，所以合并时,GRUNT,是按钮文件的顺序合并(按字母顺序排列)

把MAIN.放到了DRAG后面,就会没反应..所以注意顺序...

SEA的ID应就是指它的文件路径.

.SEA.JS用到了 v1.3.0 transport "grunt-cmd-transport": "~0.3.0",可能其他版本不稳定

//transprot 0.4好似有问题,所以用0.3.0版本

define(function(require,exports,module){}

说一下module的参性

id //默认是模块的相对或绝对路径。。但用CMD-TRANSPORT后，会变成define("main", [ "./drag", "./range", "./scale" ], function(require, exports, module) {} id为MAIN

exports module.exports=exports 如果这样写 exports={a:1212,b:234}会出问题。。。要这样写module.exports={} 模块间调用的开放接口是module.exports

module有很多属性，如果

uri 模块绝对路径

dependencies 依赖组件，

require.async('xxxxx',function(){加回调函数})

require有个async属性

//transprot 0.4好似有问题,所以用0.3.0版本module.exports = function(grunt) {    'use strict';    grunt.initConfig({        pkg: grunt.file.readJSON('package.json'),        banner: '/*! Project: <%= pkg.name %>\n *  Version: <%= pkg.version %>\n *  Date: <%= grunt.template.today("yyyy-mm-dd hh:MM:ss TT") %>\n *  Author: <%= pkg.author.name %>\n */',        transport: {            options: {                debug:false,                //默认有DEBUG文件                 },            dist: {                files: [{                    expand:true,                    cwd: 'js/',                    src: '*.js',                    dest: '.build'                }]            }        },        concat:{            options:{},            dist:{                files:[{                 //                     src: ['.build/main.js','.build/*.js'],                    dest: 'dest/main.js'                }]            }        },        uglify:{            options:{            },            dist:{                files:[{                    expand:true,                     cwd:'dest/',                    src: '*.js',                    dest: 'dest/',                    ext:'.min.js'                }]            }        },        clean: {          dist: {            src: '.build'          },          release: {            src: 'dest'          }        }    });    grunt.loadNpmTasks('grunt-cmd-transport');    grunt.loadNpmTasks('grunt-cmd-concat');    grunt.loadNpmTasks('grunt-contrib-uglify');    grunt.loadNpmTasks('grunt-contrib-clean');    // 默认任务    grunt.registerTask('default', ['clean:release','transport','concat','uglify','clean:dist']);};

// 构建后define("main", [ "./drag", "./range", "./scale" ], function(require, exports, module) {    var oDiv1 = document.getElementById("div1");    var oDiv2 = document.getElementById("div2");    var oDiv3 = document.getElementById("div3");    var oBtn = document.getElementById("button");    oBtn.onclick = function() {        oDiv1.style.display = "block";    };    require("./drag").drag(oDiv3);    require("./scale").scale(oDiv1, oDiv2);});// JavaScript Documentdefine("./drag", [ "./range" ], function(require, exports, module) {    function drag(obj) {        var disX = 0;        var disY = 0;        obj.onmousedown = function(ev) {            var ev = window.event || ev;            disX = ev.clientX - obj.offsetLeft;            disY = ev.clientY - obj.offsetTop;            document.onmousemove = function(ev) {                var L = require("./range").range(ev.clientX - disX, document.documentElement.clientWidth - obj.offsetWidth, 0);                var T = require("./range").range(ev.clientY - disY, document.documentElement.clientHeight - obj.offsetHeight, 0);                var ev = window.event || ev;                // obj.style.left=ev.clientX-disX+'px';                // obj.style.top=ev.clientY-disY +'px';                obj.style.left = L + "px";                obj.style.top = T + "px";            };            document.onmouseup = function() {                document.onmousemove = null;                document.onmouseup = null;            };        };    }    exports.drag = drag;});// JavaScript Documentdefine("range", [], function(require, exports, module) {    function range(iNum, iMax, iMin) {        if (iNum > iMax) {            return iMax;        } else if (iNum < iMin) {            return iMin;        } else {            return iNum;        }    }    exports.range = range;});// JavaScript Documentdefine("scale", [ "./range" ], function(require, exports, module) {    function scale(obj1, obj2) {        var disX = 0;        var disY = 0;        var disW = 0;        var disH = 0;        obj2.onmousedown = function(ev) {            var ev = window.event || ev;            disX = ev.clientX;            disY = ev.clientY;            disW = obj1.offsetWidth;            disH = obj1.offsetHeight;            document.onmousemove = function(ev) {                var ev = window.event || ev;                var L = require("./range").range(disW + ev.clientX - disX, 500, 100);                var T = require("./range").range(disH + ev.clientY - disY, 500, 100);                // obj1.style.width=disW+ev.clientX-disX+'px';                //  obj1.style.height=disH+ev.clientY-disY+'px';                obj1.style.width = L + "px";                obj1.style.height = T + "px";            };            document.onmouseup = function(ev) {                document.onmousemove = null;                document.onmouseup = null;            };        };    }    exports.scale = scale;});最后想了下，为啥合并后为啥路径都不准确了，却可以找到这个模块。。因为ID，ID就是路径。。。不得不说SEA。JS为你想好了。。<pre name="code" class="html"><pre name="code" class="html">在合并后的页面，REQUIRE"./drag" 这个ID， 就要找到匹配这个ID的 DEFINE模板就行了。。。而没在合并之前，REQUIRE的是路径， 定义的是匿名模块，所以没有ID匹配的原则。。。

require("./drag").drag(oDiv3);// JavaScript Documentdefine("./drag", [ "./range" ], function(require, exports, module) {

0 0