GithubHelp home page GithubHelp logo

grunt-cmd-concat's Introduction

grunt-cmd-concat

Concatenate cmd files.

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-cmd-concat --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

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

The "concat" task

Overview

In your project's Gruntfile, add a section named concat to the data object passed into grunt.initConfig().

grunt.initConfig({
  concat: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Options

options.paths

Type: Array Default value: ['sea-modules']

Where are the modules in the sea.

options.include

Type: String Default value: 'self' Optional values:

  • self
  • relative
  • all

How should it include its dependencies.

options.separator

Type: String Default value: ', '

A string value that is used to do something with whatever.

options.banner

Type: String

The banner of the concated files.

options.footer

Type: String

The footer of the concated files.

options.noncmd

Type: Boolean Default Value: false

If set true, it will be treated as a noncmd file.

options.uglify

Type: Object

Uglify prettifier, you really don't have to change this value.

options.processors

Type: Object

Processors are functions to find the related files to concat.

options.css2js

Type: Function Default value: null

If a javascript module required a css, the css should be transported to js.

You can get a css2js function from grunt-cmd-transport:

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

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

Usage Examples

Simple Concat

This is the same as grunt-contrib-concat.

grunt.initConfig({
  concat: {
    foo: {
      options: {
        noncmd: true
      },
      files: {
        'dist/a.js': ['src/a.js', 'src/b.js'],
      }
    }
  }
})

Relative Concat

This will include all relative dependencies.

You should transport your modules first, make sure your modules contain id and dependencies.

Get transport task.

grunt.initConfig({
  concat: {
    foo: {
      options: {
        include: 'relative'
      },
      files: {
        'dist/a.js': ['src/a.js', 'src/b.js'],
      }
    }
  }
})

The a.js is something like:

define('a', ['./c'], ...)

And the result should be the concat of a.js, c.js and b.js.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

Jan 19th, 2015 0.2.8

reset count in every task

July 8th, 2013 0.2.5

fix pkg not exist

June 27th, 2013 0.2.4

css2js need options

June 18th, 2013 0.2.3

  • Bugfix for css concat. #15

April 23th, 2013 0.2.2

  • Bugfix. Remove output detect.

April 16th, 2013 0.2.1

  • Add options.footer
  • Add options.noncmd

April 11th, 2013 0.2.0

  • Remove options.relative
  • Add options.include

April 10th, 2013 0.1.1

  • Update cmd-util
  • Bugfix

April 1st, 2013 0.1.0

First version.

grunt-cmd-concat's People

Contributors

afc163 avatar hotoo avatar lepture avatar popomore avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

grunt-cmd-concat's Issues

concat 的若干问题

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

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

@lifesinger

concat 设置include:all时提示找不到文件

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:['.']

关于模块中有css文件依赖时的一些情况的摸索

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

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

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

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

grunt打包seajs模块路径问题

项目路径如下

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");

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

跨目录无法合并js

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

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

求指教。不胜感激!

非cmd的文件会报错

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

grunt-cmd-concat中的include参数有什么作用?

我仔细阅读了文档,发现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有什么区别?推荐配置成什么呢?

grunt-cmd-transport 的一点问题

目录结构

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 了的 css

我貌似也是这个问题

  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 ,然后避免重复引用

以上是我构建遇到的问题

CSS打包问题

现在碰到一个打包的问题,我感觉是一个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吗。

望答复。谢谢。

关于相对路径和seajs中的处理不一致的问题

假如结构如下:

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')才行。

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

无法和 grunt-contrib-concat 共存

因为 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
      }
    }
  }
});

concat能否从入口文件,找出所有依赖,并合并

你好,
能否从一个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所依赖的模块,但是不会递归的找出所有依赖文件。

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

尝试了下0.2.0,合并jquery失败。

刚刚接触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

关于使用 seajs 依赖 arale模块合并的问题

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文件

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

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

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

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

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

不知如何解决

About options.separator

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

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

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

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

关于批量合并的问题

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

concat 后的文件缺失依赖

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

能否支持非cmd模块文件的合并?

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

concat 合并以后 id 被修改的问题

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 后面少了一个 " / " 造成最后文件未找到。

依赖模块合并时没有去重

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

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

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

合并模块重复出现的问题

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

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.