spmjs / grunt-cmd-concat Goto Github PK

如果不需要uglify怎么办。

app
   |---a.js
   |---b.js
   |--c.js

a.js

require('./b');

b.js

require('./c')

Gruntfile.js设置

  options:{
                idleading:"http://paths/resources/scripts/dist/"
                    }

最后合并出来的 a.js 中 c.js 的路径变成了 http:/paths/resources/scripts/dist/app/c
http 后面少了一个 " / " 造成最后文件未找到。

问题

不赘言了，被 @import 后的 css，其中的诸如 background: url(./path) 相对路径没修正

比如业务代码，通常都会依赖很多模块，上线前会做合并的工作。
在Grunt.js中，有没有办法，批量的合并业务代码？而不需要单独的为每一个业务代码设置Target

我在sea-config 的配置是这样：
paths: {
"js":'./../../../assets/js'
}

然后我在入口index.js里面这样写：
var adCreater = require("js/ad/test");
然后用grunt打包后：
./../../../assets/js/ad/test.js 以及test.js里面的依赖没有合并到index.js 里面。
为何？？？

求指教。不胜感激！

项目结构如下：
project
|—.build

@popomore 当源文件命名为aa.xx.js aa.xx2.js aa.xx3.js 插件会自动合并成aa.js这是正常的吗 ，如果不想合并，有参数吗

after transport:

.build/scripts/index.js

define("scripts/index", [ "jquery", "jquery.cookie" ], function(require) {
    var $ = require("jquery");
    console.log($);
    require("jquery.cookie");
    console.log($.cookie);
});

after concat:

dist/scripts/index.js

define("scripts/index", [ "jquery" ], function(require) {
    var $ = require("jquery");
    console.log($);
    require("jquery.cookie");
    console.log($.cookie); //==>undefined
index
});

jquery.cookie依赖项消失了。。。

@lepture

刚刚接触grunt和新版的seajs构建相关的grunt插件，目前0.2.0的examples可以跑通，但自己模拟工作环境，暂时还没有调试明白，问题是无法合并jquery。
Grunt.js:

concat: {
            options: {
                include: 'relative',
                paths:['gallery/jquery/1.8.2']
            },
            dist:{
                src: [".build/showMore/src/showMore-debug.js"],
                dest: "dist/showMore-debug.js"
            }
        }

showMore-debug.js:

define("showMore/src/showMore-debug", [ "gallery/jquery/1.8.2/jquery-debug" ], function(require, exports) {
    var $ = require("gallery/jquery/1.8.2/jquery-debug");
    return "showMore"
});

文件结构：

• .build
  • showMore
    • src
      • showMore.js
• gallery
  • jquery
    • 1.8.2
      • jquery-debug.js
• Grunt.js

如上图,在 a_b.js中依赖 jquery代码是 require('dist/common/js/jquery-1.8.3')

在transport中,已生成dist/common/js/jquery-1.8.3且符合CMD规范,但是却找不到文件.

include: all 的情况下总是报这个错误，找不到这些文件，不知道哪里出错了

file sea-modules/jquery/jquery/1.8.0/jquery.js not found
file sea-modules/arale/validator/0.9.4/validator.js not found
file $ not found
file sea-modules/arale/validator/0.9.4/async not found
file arale/widget/1.1.1/widget not found
file arale/base/1.1.1/base not found
file arale/class/1.1.0/class not found
file arale/events/1.1.0/events not found
file sea-modules/arale/validator/0.9.4/utils not found
file sea-modules/arale/validator/0.9.4/rule not found
file sea-modules/arale/validator/0.9.4/item not found

我用coffeescript，配置gruntfile 片段如下

sea-modules 在 . 目录下

       transport: # 这一步顺利通过
            options:
                paths: ['.']
                alias : '<%= pkg.spm.alias %>'
                parsers : 
                    '.js' : [script.jsParser]
                    '.css' : [style.css2jsParser]
                    '.html' : [text.html2jsParser]
            app:
                files:[
                    cwd: 'dist'
                    src: ['users/signin.js', 'common/*.js']
                    filter : 'isFile'
                    dest: '.build'
                ]
      concat: # 就是这一步时发生了上述错误
            options:
                paths: ['.']
                include : 'all'
            app:
                files:[
                    expand: true
                    cwd: '.build/'
                    src: ['users/signin*.js']
                    dest: 'app/'
                    ext: '.js'
                ]

模块依赖css，目前是否支持将js模块与css合并在一起，像spm1一样，形成seajs.importCSS这种形式？

因为 initConfig 里面名称都是 concat: {}, 所以两个插件无法共存。
如何能让两个插件共存？

grunt-contrib-concat:

grunt.initConfig({
  concat: {
    options: {
      separator: ';'
    },
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js'
    }
  }
});

grunt-cmd-concat:

grunt.initConfig({
  concat: {
    foo: {
      options: {
        css2js: style.css2js
      }
    }
  }
});

通过 require('style.css'); 引入的style.css 中存在图片附件，
比如：background-image: url("32px.png"); 中的图片路径，在合并后路径就可能不对，这种问题怎么解决？

模块中有css文件依赖的情况时，不要把这个样式加到 output 列表中去。翻了源码
https://github.com/spmjs/grunt-cmd-concat/blob/master/tasks/lib/script.js#L37
发现：

output中出现的文件，不会打包到cmd模块中，且文件依赖中也不会出现这个文件。

当文件压缩后，就悲剧了。

所以对于一个cmd的模块，在发布时，只要写明它的发布文件就可以了，至于他们的依赖构建会搞定，包括样式。

项目路径如下

SCRIPTS\COMMON
    analytics.js
    cartpop.js
    header.js
    hpop.js
    loginfo.js
    Makefile
    menu.js
    scrolltotop.js
    topsuggest.js
    traffic.js
Gruntfile.js
package.json

Gruntfile.js 内容

module.exports = function(grunt) {
    //var builder = require('spm-build')
    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),
        transport: {
            options:{
                idleading:"http://path/resources/scripts/dist/"
                    },
           common: {
                files : [
                    {
                        src : "*/*.js",
                        dest :"build/"
                    }
                ]
            }
        },
        concat: {
            common: {
                files:[
                    {
                        src:["build/common/header.js","build/common/loginfo.js","build/common/menu.js","build/common/cartpop.js","build/common/hpop.js","build/common/analytics.js"],
                        dest:"dist/header.js"
                    }
                ] 
            }
        }
    });

    grunt.loadNpmTasks('grunt-cmd-transport');
    grunt.loadNpmTasks('grunt-cmd-concat');
    grunt.registerTask('build', ['transport','concat']);
    //grunt.loadGlobalTasks('spm-build')
};

package.json 内容为：

{
    "family":"http://path/resources",
    "name": "scripts",
    "version": "1.0.0",
    "dependencies": {},
    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-jshint": "~0.6.0",
        "grunt-contrib-nodeunit": "~0.2.0",
        "grunt-contrib-uglify": "~0.2.2",
        "gcc": "~0.2.0",
        "grunt-cmd-transport": "~0.2.0",
        "grunt-cmd-concat": "~0.2.0",
        "grunt-contrib-clean": "~0.4.0"
    },
    "main": "./",
    "spm": {
        "header":{
            "src": "",
            "output": ["header.js"]
        }
    },
   "build":{
        "header":{
            "src":"",
            "output":["dist/header-debug.js"]
        }
    }
}

运行 grunt build -f
transport 后的文件 在build/common 下，
然后cancat 后的 header.js 文件内容为：

define("http://path/resources/scripts/dist/common/header", [ "libs/util/modernizr", "./loginfo", "./menu", "./cartpop", "./hpop", "./analytics", "scripts/common/topsuggest" ], function(require, exports, module) {
    require("libs/util/modernizr.js");
    require("./loginfo");
    require("./menu");
    require("./cartpop");
    require("./hpop");
    require("./analytics");
    require("scripts/common/topsuggest.js").init();
});
define("http://path/resources/scripts/dist/common/loginfo", [], function(require, exports, module) {
    ...
})

但是这个生成的header.js中的路径是错的， dist/ 目录下 只有 header.js ，所以 header.js 中 的

    require("./loginfo");
    require("./menu");
    require("./cartpop");
    require("./hpop");
    require("./analytics");

都不存在。 请问这个问题如何解决？

非cmd的文件没有meat变量，导致错误
Warning: Cannot read property 'id' of undefined Used --force, continuing.
怎么办？

虽然这个plugin 叫 cmd-concat，但是有时候需要在项目内做一些非cmd模块文件的合并，却无法使用。当然可以引入 grunt-contrib-concat，但又存在 task name冲突的问题（查了下，好像可以用grunt.rename 实现同task名冲突的问题，但觉得麻烦了点），所以希望能支持一下非cmd模块文件的合并，我想这也不费什么事。况且在文档中说了，如果不配置include选项，则“This is the same as grunt-contrib-concat.”， 但事实情况并非如此。

options.separator
Type: String Default value: ', '
A string value that is used to do something with whatever.

我关于这个解释解释的理解是在合并时，每个文件的内容之间的分隔符对么？

define('', [], function(){}), define('', [], function(){});

默认为逗号，现我设置为分号， 执行任务后连接的任然是逗号。
还是我的理解不对？

你好，
能否从一个main文件中查找出该应用的所有模块，并合并

main.js文件如下

 seajs.use('/js/app/router',function(router){
    router.initRouter();
})

grunt的配置如下:

grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        transport :{
            ios: {
                options : {
                    paths :["src"],
                    idleading:"/"
                },
                files :[{
                    expand : true,
                    cwd: 'src',
                    src: 'js/**/*.js',
                    dest: '.tmp'
                }]
            }
        },
        concat:{
            ios:{
                options : {
                    include: "all",
                    paths:['.tmp']
                },
                files :{
                    'dist/ios.js':['/js/app/router.js']
                }
            }
        }
    });

transport可以成功的把各个文件都转换成标准格式

这里是想根据不同的main入口，合并需要用到的所有模块

现在这种情况下，只会合并router所依赖的模块，但是不会递归的找出所有依赖文件。

请问有什么办法可以实现这样的需求呢？

结果为
define("all", [ "./self", "foo" ], function(require) {
require("./self");
require("foo");
});

define("self", [], function() {
return "self";
});

define("foo", [], function() {
return "foo";
});

有banner，没道理没有footer吧，呵呵~~

我也算是 grunt 的深度用户了，但 cmd 对我还很陌生，所有有下面的疑问：

1. grunt-cmd-concat 是不是可以当作 grunt-contrib-concat 来用，如果不能，这两者明显冲突了。有好的解决办法吗？
2. 另外，在测试的时候，虽然将我自身的代码合并，但是seajs 的 plugin 还是分别加载的，能将它们合并到 main.js 或者 seajs 中吗？
3. 如果有相关文档可以了解上面问题的话，发个链接就好。

@lifesinger

a.js
defind(function(require){
require("./utils.b")
})
transport,cantact后
defind('a',[],function(require){
require("./utils.b")
})
并不是
defind('a',['./utils.b'],function(require){
require("./utils.b")
})

var style = require('grunt-cmd-transport').style.init(grunt);

应是

var style = require('grunt-cmd-transport').style;

我添加了一个模块，并在内部引用了一个css文件

  define(function(require, exports, module){
    require('dialog.css');
  });

打包后文件的代码如下，无法加载所需的css文件了

    define("common/dialog/dialog", [], function(require, exports, module) {
        require("dialog.css");
    });

如果把第二个参数 []去掉，倒是可以正常加载css

不知如何解决

场景

foo 依赖 bar，bar 依赖 baz，这种情况下期望 concat 后的 foo 中包含 foo、bar 和 baz

问题

foo 中仅包含 foo 和 bar，未包含 baz

通过grunt打包结果是:

问题: 这样的结果正确么?还是需要其他的插件之类来共同完成?如何在依赖的js中引用呢?

现在碰到一个打包的问题，我感觉是一个Bug

define(function(require , exports , module) {
    var tpl = require("tpls/1.tpl");
    require("css/a.css");
    var template = Handlebars.compile(tpl);
    var data = {
        title : "i am title",
        body  : "i am body"
    };
    var html = template(data);
    $("#page-1").html(html);
});

我写的css路径是css/a.css，不是以.开头的路径，查看源码发现如果是css，include是all的情况下，会找css/a.css，而不是css/a.css.js，因为我使用grunt-cmd-transport的时候使用的css2jsParser，默认写的文件名是a.css.js，这样的话不work，报错，说文件找不到。

而如果我使用的是cssParser的话，能够找到a.css，但是其中的代码不是使用importStyle的方式，这就要我提供一个css2js的函数，但是这个函数写起来太麻烦了。。。

最后我只好把路径写成了 ../css/a.css，这个问题就解决了，但是违背了我的本意。

我想弄明白，为什么要有特殊的判断，文件以.开头，有什么特殊的issue吗。

望答复。谢谢。

安装时，依赖中的 cmd-util 报错，如何处理？npm ERR! Invalid Version: 0.1.1a1

if (v.charAt(0) === '.') {

当v是undefined时，报错，导致concat不成功

@lepture 安装这个插件后，按照你写的example操作，执行成功了，但是dist里没生成文件，请指教

目录结构

gruntfile.js
package.json
public
    assets
    js
        sea-modules
            seajs
            gallery
        app
            topic
                topic
            main.js
        cyou
            ajax-cache
                src
                    ajax-cache.js
                package.json
            ajax-loading
                src

js/app 是业务代码，没有使用 spm build

js/cyou 是公共模块代码，希望使用 spm build

gruntfile.js

对于 js/cyou 下的所有公共模块希望批量打包，所以使用了 grunt-cmd-transport ，但是效果不太理想。

module.exports = function(grunt) {

  grunt.initConfig({
    transport: {
      cyou: {
        options: {
          idleading : 'cyou/'
        },
        files: [{
            cwd: 'public/assets/js/cyou/ajax-cache/src',
            src: '**/*',
            filter : 'isFile',
            dest: 'public/assets/js/cyou/ajax-cache/dist'
        },{
            cwd: 'public/assets/js/cyou/ajax-loading/src',
            src: '**/*',
            filter : 'isFile',
            dest: 'public/assets/js/cyou/ajax-loading/dist'
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-cmd-transport');

  grunt.registerTask('build-cyou', ['transport:cyou']);

};

最终生成的 public/assets/js/cyou/ajax-cache/dist/ajax-cache.js 没有获取到 package.json 中的版本号。这个要怎么配置呢？

而且每个模块都要写在 files 列表里，有没有正则匹配的方式呢？

希望可以加上, 还有就是concat 好像不能像spm那样把依赖合并进来?

使用grunt-cmd-concat进行模块合并，合并过后的文件中合并模块出现多次。例如合并的模块中都使用jquery类库，合并过后的文件中就存在重复的jquery类库，请问这个是什么原因？

我仔细阅读了文档，发现include参数可以配置为"self"(default), "relative", "all"

对于这个.js:

define(function (require) {

    var hello = require("../helloworld/hello");
    alert(hello.increment(10));

});

如果配置为self，则会合并成：

define("main/main", [ "../helloworld/hello", "../helloworld/world" ], function(require) {
    var hello = require("../helloworld/hello");
    alert(hello.increment(10));
});

如果配置为relative或者all，则会合并成：

define("main/main", [ "../helloworld/hello", "../helloworld/world" ], function(require) {
    var hello = require("../helloworld/hello");
    alert(hello.increment(10));
});

define("helloworld/hello", [ "helloworld/world" ], function(require, exports) {
    var world = require("helloworld/world");
    exports.increment = function(a) {
        return world.add(a, 1);
    };
});

define("helloworld/world", [], function(require, exports) {
    exports.add = function(a, b) {
        return a + b;
    };
});

用relative或all，会比用self大很多。但是实际上用self合并后的js，也一样可以正常执行。所以我想请问一下，include这个参数究竟是什么用的？all和relative有什么区别？推荐配置成什么呢？

大致的配置方案：

options: {
  include: 'self'
  include: 'relative'
  include: 'all'
}

很奇怪这个插件这么久没有人维护了，最近项目里用到这个插件，合并模块的时候发现依赖模块居然没有去重，我在这个文件的33行已经改了代码解决了。具体改动如下：

grunt.util._.chain(meta.dependencies).unique().value()

作者以后还会发新版本吗？@popomore

Running "concat:app" (concat) task

file dist/modules/Dialog-debug.js not found
file dist/modules/base-debug.js not found
file dist/modules/Animate-debug.js not found
file dist/modules/Calendar-debug.js not found
file dist/modules/Dialog.js not found
file dist/modules/base.js not found
file dist/modules/Animate.js not found
file dist/modules/Calendar.js not found

可是这些文件明明是我先压缩生成的，真真实实存在的呀！
Running "uglify:modules" (uglify) task
File "dist/modules/Animate.js" created.
File "dist/modules/AutoComplete.js" created.
File "dist/modules/Calendar.js" created.
File "dist/modules/Dialog.js" created.
File "dist/modules/Slider.js" created.
File "dist/modules/base.js" created.

我的paths设置：paths:['.']

我貌似也是这个问题

1. concat 时采用 all 策略，遇到顶级标识的 css 文件找的是 .css 后缀，相对标识是 .css.js 后缀；
2. concat 往下层依赖查找的时候会把原本是相对标识的 ./bar.css 依赖转换为顶级标识 foobar/foo.css 去查找
3. 合并顶级标识的 css 文件必须配置 css2js 选项，避免找不到处理器而失败（这里找的是 .css 后缀的文件）

结合以上的问题，我 transport 出两种 css 文件（xxx.css, xxx.css.js），这样可以比较完美 concat css 文件
但是，带来新了的问题，就是会出现重复的 css 模块。

首先我在 foobar 模块里面 require 了一个相对标识的 css（./bar.css），然后我在 main 模块里面 require('foobar')，
接着我先用 concat relative 策略打包 foobar 模块，
再用 all 策略打包 main 模块，就会出现两个 foobar/bar.css 在 main 模块里了。

因为第一次 relative 策略打包 foobar 模块时 foobar 里就成功打包进 ./bar.css 了，
再次用 all 策略打包 main 模块的时候因为原先的 css 还存在（有些是使用 async 加载的，不能用 .css.js 的文件）
又因为 ./bar.css 是 main 模块依赖的依赖，这样会把 ./bar.css 转换为顶级标识 foobar/bar.css。

因为上面的第1条，顶级标识只会查找 .css 后缀的 css 文件，而我又不得删去最原始的 css 文件。导致 main 模块里出现了两次 bar.css

一次是 foorbar 模块用 relative 策略 concat 的
另一次是 main 模块用 all 策略合并 foobar 模块时它不知道 foobar 已经合并了 ./bar.css，又再次使用 foobar/bar.css 查找合并进来的；

这里希望能通过 ast 解析知晓 foobar 模块已经引用了 bar.css ，然后避免重复引用

以上是我构建遇到的问题

假如结构如下：

index
├─index.js
├─base.js

如果在index.js这个模块里用require('index/base')来引入base，在seajs里是可以正常加载base.js的，但是在用grunt-cmd-concat进行合并时却不行，会打出warn: can't find module index/base，只有用require('./base')才行。

这儿是不是应该统一一下比较好？

看了源码，发现还不支持对所有 js 的合并（不能合并顶级标识的 CMD 模块），是不准备支持还是没来得及实现呢？