Code Monkey home page Code Monkey logo

spm-chaos-build's Introduction

spm-chaos-build

Build Sea.js Business Modules by Chaos's way.


Getting Started

这是一个 Spm2 的插件,使用一种自定义的方式来打包 (build) 业务模块(不是标准模块哦)

打包的方式请参见如何使用 Spm2 压缩合并业务模块

一个简单的例子参见这里 https://github.com/edokeh/spm-chaos-build-example

Install

请先确保你已经安装了最新的 Node.js

$ npm install spm -g
$ npm install spm-chaos-build -g

Usage

$ spm chaos-build [dir] [options]

Options

  • -C 指定 Sea.js 的配置文件,build 完成后会将 MD5 的 MAP 规则写入这个文件
  • -O 指定 build 的输出目录,这个目录应该是 Sea.js 的标准模块目录,里面应该包含业务代码所依赖的标准模块(如 jQuery),可省略此参数,缺省为 sea-modules 目录
  • --gzip 是否压缩输出目录下所有的文件,参数接受 all/current ,分别表示压缩输出目录下所有文件或只压缩此次生成的文件

Example

$ spm chaos-build example -C seajs-config.js
$ spm chaos-build example -C seajs-config.js --gzip current
$ spm chaos-build example -C seajs-config.js -O ../modules
$ spm chaos-build example -C seajs-config.js -O libs --gzip all

自定义任务

与 spm build 一样,支持通过目录下的 Gruntfile.js 来自定义任务,示例代码如下

var chaosBuild = require('spm-chaos-build');

module.exports = function (grunt) {
    chaosBuild.loadTasks(grunt);

    var config = chaosBuild.getConfig('javascripts', {
        outputDirectory : 'javascripts/sea-modules',
        gzip : 'all'
    });
    grunt.initConfig(config);

    grunt.registerTask('write-manifest', function () {
        var mapArr = grunt.config.get('md5map');
        var family = config.family;
        grunt.file.write('seajs-map.json', JSON.stringify(mapArr, null, '\t'));
    });

    grunt.registerTask('chaos-build', [
        'clean:dist', // delete dist direcotry first
        'transport:spm',  // src/* -> .build/src/*
        'concat:relative',  // .build/src/* -> .build/dist/*.js
        'concat:all',
        'uglify:js',  // .build/dist/*.js -> .build/dist/*.js
        'md5:js', // .build/dist/*.js -> dist/*-md5.js
        'clean:spm',
        'spm-newline',
        'compress',
        'write-manifest'
    ]);
};

从 0.2.4 开始支持更细粒度的 concat 配置,如

var config = chaosBuild.getConfig('javascripts', {
    outputDirectory : 'javascripts/sea-modules',
    gzip : 'all'
});
config.concat.relative = [
  "test/a.js",
  {"test/b.js": ["test/b.js", "template/*.html.js"]},
  "test/c.js"
];

History

0.2.5

Fix bug

0.2.4

  • 支持更细粒度的 concat 规则配置
  • 将依赖的 grunt-cmd-transport, grunt-cmd-concat 更新至最新版本

0.2.3

  • 将依赖的 grunt-cmd-transport, grunt-cmd-concat 更新至最新版本
  • 默认支持对 handlebars 后缀文件的打包支持,规则同 grunt-cmd-transport ,如需指定 handlebars 的模块 ID ,可以在 package.json 的 spm.alias 中配置

0.2.0

  • 如果你不喜欢目录的名字,可以在 package.json 中增加 family 项
  • 支持输出目录位于业务模块目录内
  • 支持 Gruntfile 的自定义任务

spm-chaos-build's People

Contributors

edokeh avatar wuwb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

spm-chaos-build's Issues

win xp 32位系统安装失败

npm install spm -g //安装顺利
npm install spm-chaos-build -g //错误分三段,分别贴出来

npm http GET https://registry.npmjs.org/iconv-lite
npm http 200 https://registry.npmjs.org/grunt
npm ERR! Error: ENOENT, lstat 'C:\Documents and Settings\xxxxxxx\ApplicationData\npm\node_modules\spm-chaos-build\node_modules\grunt\AUTHORS'
npm ERR! If you need help, you may report this log at:
npm ERR! http://github.com/isaacs/npm/issues
npm ERR! or email it to:
npm ERR! [email protected]
npm ERR! System Windows_NT 5.1.2600
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "spm-chaos-build" "-g"
npm ERR! cwd D:
npm ERR! node -v v0.8.18
npm ERR! npm -v 1.2.2
npm ERR! path C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\AUTHORS
npm ERR! fstream_path C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\AUTHORS
npm ERR! fstream_type File
npm ERR! fstream_class FileWriter
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! fstream_stack C:\Program Files\nodejs\node_modules\npm\node_modules\fstream\lib\writer.js:284:26
npm ERR! fstream_stack Object.oncomplete (fs.js:297:15)
npm ERR! error rolling back Error: EPERM, rmdir 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test'
npm ERR! error rolling back [email protected] { [Error: EPERM, rmdir 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test']
npm ERR! error rolling back errno: 50,
npm ERR! error rolling back code: 'EPERM',
npm ERR! error rolling back path: 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test' }
npm http 304 https://registry.npmjs.org/uglify-js
npm http GET https://registry.npmjs.org/hooker

.....

npm ERR! error rolling back Error: EBUSY, unlink 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build'
npm ERR! error rolling back [email protected] { [Error: EBUSY, unlink 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build']
npm ERR! error rolling back errno: 10,
npm ERR! error rolling back code: 'EBUSY',
npm ERR! error rolling back path: 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build' }
npm ERR! Error: EPERM, rmdir 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test\fixtures\expand\js'
npm ERR! { [Error: EPERM, rmdir 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test\fixturesexpand\js']
npm ERR! errno: 50,
npm ERR! code: 'EPERM',
npm ERR! path: 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test\fixtures\expand\js' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! System Windows_NT 5.1.2600
npm ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "spm-chaos-build" "-g"
npm ERR! cwd D:
npm ERR! node -v v0.8.18
npm ERR! npm -v 1.2.2
npm ERR! path C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test\fixtures\expand\js
npm ERR! code EPERM
npm ERR! errno 50
npm ERR! stack Error: EPERM, rmdir 'C:\Documents and Settings\xxxxxxx\Application Data\npm\node_modules\spm-chaos-build\node_modules\grunt\test\fixtures\expand\js'
npm http 304 https://registry.npmjs.org/argparse

.....

npm http 304 https://registry.npmjs.org/underscore
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! D:\npm-debug.log
npm ERR! not ok code 0

LICENSE?

you need to include LICENSE for MIT projects

终于打包成功了。但是应用到具体项目中却无法执行,悲催了

以下是我打包成功的文件内容:

define("portal/standard/main", ["./standard", "../base/book_common", "../base/middleware", "../base/util"], function(a) {
var t = a("./standard");
t.init()
}), define("portal/standard/standard", ["portal/base/book_common", "portal/base/middleware", "portal/base/util"], function(a, t, e) {
function o(a, t) {
var e;
if ("zip" == a) {
var o = $("#bookID").val(), e = {
uploadScript : "/Portal/File/uploadZip?bookID=" + o,
multi : !1,
removeCompleted : !1,
fileObjName : "Zip Files",
buttonText : "Upload",
width : 100,
formData : {
PHPSESSID : ""
},
fileSizeLimit : "600MB",
fileType : ["zip", "7z"],
buttonClass : "standardUploadBg",
onUploadComplete : function(a, t) {
if (!t)
return showError("Upload Failed"), !1;
var t = JSON.parse(t), e = $("#scaleSel").val(), i = {
bookID : o,
fileID : t.fileID,
scale : e
};
$.post("/Portal/Plan/saveStandardBook", i, function(a) {
a.status ? showSuccessAndRefresh(a.info) : showError(a.info)
}, "json")
}
};
$("#" + t).uploadifive(e), $("#uploadifive-" + t).attr("title", "Upload File").css("cursor", "pointer").on("click", function(a) {
var t = $("#issueStatus").val();
"published" == t && (confirm("當前Issue已經發布,是否繼續操作?") || (a.preventDefault(), a.stopPropagation()))
})
}
}

function i() {
    $("#editBookBtn").on("click", r), $(".closeBtn").on("click", l)
}

function r() {
    n()
}

function n() {
    p.showMask(), $("#right-panel").panel("open"), $("#planForm").show()
}

function l() {
    $("#right-panel").panel("close"), $("#maskLayer").hide()
}

var s = a("portal/base/book_common"), d = a("portal/base/middleware"), p = a("portal/base/util");
e.exports = {
    init : function() {
        i(), d.subscribe("closePanel", l), o("zip", "uploadStandardBtn"), s.init()
    }
}

}), define("portal/base/book_common", ["portal/base/middleware", "portal/base/util"], function(a, t, e) {
function o() {
var a = $("#libraryFilterList"), t = $("#libraryFilter");
$("#filterAutocomplete").on("listviewbeforefilter", function(a, e) {
var o = $(this), i = $(e.input).val(), r = "";
t.val(""), o.html(""), i && i.length > 1 && (o.html("

  • "), o.listview("refresh"), $.post("/Portal/Plan/getFilters", {
    content : i,
    issueID : $("#plan_issueID").val()
    }).then(function(a) {
    if (a.status) {
    var t = a.data;
    t && ($.each(t, function(a, t) {
    r += "
  • " + t.filter + "
  • "
    }), o.html(r), o.listview("refresh"), o.trigger("updatelayout"))
    } else
    a.info == f.TIPS.timeout ? showErrorAndRefresh(f.TIPS.timeoutInfo, a.data) : showError(a.info)
    }))
    }).on("click", "li", function(e) {
    var o = $(e.target).html();
    a.find("input").val(o), t.val(o), $("#filterAutocomplete").empty()
    }), a.find("span.ui-btn-inner").on("mousedown touchend", function() {
    t.val("")
    })
    }

    function i(a) {
        if (f.stopBubble(a), $("div.error").removeClass("error"), $("div.errorWrap").empty(), n()) {
            if (!$("#plan_issueID").val())
                return showError("No issueID!"), !1;
            if ($("#libraryFilter").val($("#libraryFilterList").find("input").val()), u)
                u.permanent(), u = null;
            else {
                $.mobile.showPageLoadingMsg();
                var t = $("#planForm").serialize();
                $.post("/Portal/Plan/savePlan", t, r, "json")
            }
        }
    }
    
    function r(a) {
        $.mobile.hidePageLoadingMsg(), a.status ? (showSuccess("Save Book Success"), c.fire("closePanel")) : showError(a.info)
    }
    
    function n() {
        var a = !0, t = !1;
        return $form = $("#planForm"), $form.find(".required").each(function() {
            $(this).valid() || ($(this).parents("div.ui-input-text").addClass("error"), a = !1)
        }), $("#libraryFilterList input").val() || ($("#libraryFilterList").find("div").addClass("error"), a = !1), $form.find(".ui-input-text").each(function() {
            f.isScript($(this).val()) || ( a = !1, t = !0, "input" == this.tagName.toLowerCase() ? $(this).parent().addClass("error") : "textarea" == this.tagName.toLowerCase() && $(this).addClass("error"))
        }), t && showError("不能包含<>等特殊字符。"), a
    }
    
    function l(a, t) {
        var e = uploadOption;
        e.buttonText = "", "portrait" == t ? (e.buttonClass = "portraitWrap portraitUploadBg", e.width = 100, e.height = 130) : (e.buttonClass = "landscapeWrap landscapeUploadBg", e.width = 130, e.height = 100), e.fileType = ["jpg", "png", "jpeg"], e.uploadScript = "/Portal/File/uploadPhoto", e.onUploadComplete = function(e, o) {
            if (!o)
                return showError("Upload Failed"), !1;
            var i = JSON.parse(o);
            $("#uploadifive-" + a).removeClass("portraitUploadBg landscapeUploadBg").css("background-image", "url(" + i.filepath + ")"), "portrait" == t ? ($("#portraitCoverID").val(i.fileID), $("#portraitCover").val(i.filepath)) : ($("#landscapeCoverID").val(i.fileID), $("#landscapeCover").val(i.filepath))
        }, $("#" + a).uploadifive(e), $("#uploadifive-" + a).attr("title", "Upload File").css("cursor", "pointer")
    }
    
    function s() {
        $("#orientationImgWrap").on("tap", ".orientationImg", d), $("#savePlanBtn").on("click", i), $("#editBookBtn").on("click", p), $("#planForm").on("click", ".closeBtn", function() {
            c.fire("closePanel")
        })
    }
    
    function d(a) {
        var t = $(a.target), e = t.data("orientation");
        $("#orientationInput").val(e), t.data("selected") || (t.siblings("img").each(function() {
            $(this).attr("src", $(this).data("normalimg")).data("selected", !1)
        }), t.data("selected", !0).attr("src", t.data("selectimg")))
    }
    
    function p() {
        var a = $("#bookID").val();
        $.post("/Portal/Plan/getPlanByID", {
            planID : a
        }, function(a) {
            if ($.mobile.hidePageLoadingMsg(), a.status) {
                var t = $("#planForm"), e = a.data, o = e.portraitCover, i = e.landscapeCover;
                t.find("#issueNoLabel").text(e.issueNo), t.find("#landscapeCoverID").val(e.landscapeCoverID), t.find("#portraitCoverID").val(e.portraitCoverID), t.find("#landscapeCover").val(i), t.find("#portraitCover").val(o), t.find("#plan_issueID").val(e.issueID), t.find("#book").val(e.book), t.find("#orientationInput").val(e.orientation), t.find("#bookKicker").val(e.bookKicker), t.find("#plan_planID").val(e.id), t.find("#libraryFilter").val(e.libraryFilter), t.find("#libraryFilterList input").val(e.libraryFilter), t.find("#description").val(e.description), i && t.find("#uploadifive-uploadLandscapeCoverBtn").removeClass("landscapeUploadBg").css("background-image", "url(" + i + ")"), o && t.find("#uploadifive-uploadPortraitCoverBtn").removeClass("portraitUploadBg").css("background-image", "url(" + o + ")");
                var r;
                $(".orientationImg").each(function() {
                    r = $(this), r.attr("src", r.data("normalimg")).data("selected", !1), r.data("orientation") == e.orientation && r.data("selected", !0).attr("src", r.data("selectimg"))
                })
            } else
                showError(a.info)
        }, "json")
    }
    
    var u, c = a("portal/base/middleware"), f = a("portal/base/util");
    e.exports = {
        init : function() {
            l("uploadPortraitCoverBtn", "portrait"), l("uploadLandscapeCoverBtn", "landscape"), o(), s(), $("#planForm").validate({
                errorLabelContainer : $("#planForm div.errorWrap")
            })
        },
        createBook : function(a) {
            u = a
        },
        removeBook : function() {
            u && (u.destroy(), u = null)
        },
        resetBookForm : function() {
            var a = document.getElementById("planForm");
            a.reset(), $(a).find("form")[0].reset(), $("#libraryFilter").val(""), $("#filterAutocomplete").empty(), $(a).find("#portraitCoverID").val(""), $(a).find("#landscapeCoverID").val(""), $(a).find("#landscapeCover").val(""), $(a).find("#portraitCover").val(""), u = null
        }
    }
    

    }), define("portal/base/middleware", [], function(a, t) {
    var e = {};
    t.subscribe = function(a, t, o) {
    e[a] || (e[a] = {}), e[a] = {
    fn : t,
    arg : o
    }
    }, t.unsubscribe = function(a) {
    return e[a] && a ? e[a] ? (e[a] = {}, !0) : !1 : !1
    }, t.fire = function(a, t) {
    e[a] && e[a].fn(t, e[a].arg)
    }
    }), define("portal/base/util", [], function(a, t, e) {
    e.exports = {
    isScript : function(a) {
    return !/[<>]/.test(a)
    },
    stopBubble : function(a) {
    a.preventDefault(), a.stopPropagation()
    },
    showMask : function() {
    var a = this;
    $("#maskLayer").show().on("mousedown touchstart", function(t) {
    a.stopBubble(t)
    })
    },
    TIPS : {
    timeout : "timeout",
    refresh : "refresh",
    timeoutInfo : "登陸超時,請重新登陸",
    deleteArticle : "當前Article已被刪除",
    conflict : "當前頁面已被更新,點擊'確定'刷新頁面,點擊'取消'繼續保存",
    deleteBook : "當前Book已被刪除,將返回App首頁"
    }
    }
    });

    应用到html中,虽然加载了也不报错,但是却未初始化。就好像是存在互相依赖关系,导致无法初始化的效果一样。但是这几个代码并没有互相依赖。不知道是哪里出错了。麻烦作者看下。非常感谢。

    什么情况下会、报‘ error: Unable to parse "portal/package.json" file (Unexpected token ])’的错误?

    我的package.json的内容如下:
    {
    "spm" : {
    "output" : {
    "relative" : [
    "standard/main.js",
    ],
    "all" : [
    "base/book_common.js",
    "base/middleware.js",
    "base/uti.js"
    ]
    },
    "alias": {
    "underscore": "gallery/underscore/1.5.2/underscore",
    "backbone": "gallery/backbone/1.1.0/backbone"
    },
    }
    }

    有base和standard两个目录。base目录下有book_common.js,middleware.js,util.js三个文件。standard下有main.js和standard.js2个文件。

    执行 命令spm chaos-build portal -C seajs-config.js报错:
    error: Unable to parse "portal/package.json" file (Unexpected token ])

    请教下是哪里配置问题?谢谢。

    Gruntfile.js没有起作用

    在用seajs-rails这个Gem时发现的,在编译后没生成map文件,于是顺着代码查了下,最后发现是在用spm-chaos-build编译时Gruntfile.js没起作用,直接到js目录下去执行spm-chaos-build也不行,只执行到了index.js里定义的taskList里面定义的task,有遇到过这个情况的不?

    版本:
    spm 2.1.2
    spm-chaos-build 0.2.2

    打包之后的文件貌似不能跑

    看了seajs的文档,"define(function(require));"中的require不是不能改变吗?压缩之后,变成了字母“e”,会报错的~请问你们的文件能正常运作吗?顺便问一下,package.json中的alias的路径是相对哪里的?

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. 📊📈🎉

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google ❤️ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.