在Grunt中的文件之间包含横幅

时间:2016-02-15 18:37:07

标签: jquery gruntjs grunt-contrib-concat

我想连接成一个文件

plugins.js (out of jQuery function)
fileA.js (jQuery function should start before this file)
fileB.js
...
fileZ.js (jQuery function should end after this file)

同时我想在所有这些文件中使用jsbeautifier。

如何在fileA.js

之前添加两个“横幅”
jQuery(function($){

并在fileZ.js之后

});

我能想到的部分解决方案:

a)添加jQuery(函数($){在fileA.js和fileZ.js中相应的。这迫使我从jsbeautifier中排除那两个文件会引发错误。另外我还要改变函数开启/如果我改变fileA.js等的顺序,则关闭

b)包含两个包含开头/结尾的文件

c)以类似的方式添加“横幅”(我不知道如何实际做这样的事情)

concat: {
    my_script: {
        files: {
            'myscript.js': [
                'plugins.js',
                // 'jQuery(function($){',
                'fileA.js',
                'fileB.js',
                // ...
                'fileZ.js',
                // '});'
            ],
        },
    },
},

编辑:我知道这个具体案例我可以使用

footer: '})',

然而,这只是问题的一半解决方案

有更好/更简单的方法吗?

a)和b)工作,但我要求更简单的方法,例如c)我不知道如何实现。

2 个答案:

答案 0 :(得分:0)

有几个可能性,例如:

  1. 您可以将复制任务与原始内容文件之前和之后添加代码的处理函数一起使用:grunt-contrib-copy process

  2. 您还可以使用横幅组合(输出文件的开头),separatos(在每个连接文件之间)和页脚(输出文件的底部), grunt-contrib-concat

  3. 您可以将grunt-contrib-concat与过程选项similtar一起使用到<。

  4. 您必须考虑运行任务的顺序。这应该在美化之前运行。

答案 1 :(得分:0)

感谢JotaBe的答案,我可以调查grunt-contrib-copy process 这是我最终使用的代码。

concat: {
    my_script: {
        options: {
            process: function(src, filepath) {
                return src.replace(/\/\/ jQuery\(function\(\$\){/, "jQuery(function($){\n");
            },
            footer: '\n});',
        },
        files: {
            'myscript.js': [
                'plugins.js',
                'fileA.js',
                'fileB.js',
                // ...
                'fileZ.js',
            ],
        },
    },
},

fileA.js通常是我创建变量的文件,必须从注释掉的jQuery机箱开始。基本上Grunt Concat的“过程”将其评论出来。此外,我需要为封闭外壳包含一个页脚(尽管它可以以与开口类似的方式创建)。

// jQuery(function($){