Question

我正在使用grunt来缩小一些JS文件。将文件名包含在横幅中会很不错。我已经找到了几个如何在横幅中包含包名称的示例，但我还没有设法在那里获取文件名。那么：我需要在gruntfile（见下文）而不是pkg.name中添加源文件名（或目标文件名）？

提前致谢

module.exports = function(grunt) {

   // Project configuration.
   grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify: {
         options: {
            banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
         },
         build: {
            files: [{
               expand: true,
               src: '**/*.js',
               dest: 'build',
               cwd: 'src',
               ext: '.min.js'
            }]
         }
      }
   });

   // Load the plugin that provides the "uglify" task.
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s).
   grunt.registerTask('default', ['uglify']);
};

Answer 1

我尝试做同样的事情，但找不到对模板公开的当前文件名的任何引用。这是我最终想出的解决方法;这是一个自定义任务，可以为每个文件动态创建一个新目标：

grunt.registerMultiTask('minify', function () {
    this.files.forEach(function (file) {
        var path = file.src[0],
            target = path.match(/src\/(.*)\.js/)[1];

        // store some information about this file in config
        grunt.config('ugtargets.' + target, {
            path: path,
            filename: path.split('/').pop()
        });

        // create and run an uglify target for this file
        grunt.config('uglify.' + target + '.files', [{
            src: [path],
            dest: path.replace(/^src\/(.*)\.js$/, 'build/$1.min.js')
        }]);
        grunt.task.run('uglify:' + target);
    });
});

我的uglify配置：

uglify: {
    options: {
        banner: 'Filename: <% ugtargets[grunt.task.current.target].filename %>\n'
    }
}

对于源目录中的每个文件，我们从文件名中创建目标名称。具体过程取决于文件的命名方式;你会想要去除任何点或斜线。在这里我用了一个正则表达式;在我的应用程序中，我实际上使用fs从文件本身读取一些JSDoc数据。
然后我们将该文件名存储在Grunt配置中的对象中，由目标名称索引。在这里，我使用了一个具有几个属性的对象;你可以在这里添加更多东西，或者如果你愿意，只需使用普通字符串。
最后，我们将目标配置添加到uglify配置中。这只是当前文件的src和dest;我们必须做自己的文件名处理，但它没有多少工作。然后我们使用新目标运行uglify任务。

在横幅模板中，您现在可以使用grunt.task.current.target来获取我们之前存储在配置中的数据。的Presto！

Answer 2

文档确实很简洁，但横幅字符串中的<%= pkg.name %>表示您也可以执行<% for ( var s in grunt) { %> \ngrunt.<%=s%><% } %>甚至<% for ( var s in this) { %> \nthis.<%=s%><% } %>。

所以（在一些搜索之后）获取文件名你可以这样做：

var bannerTemplate = '<%' +' var subtask = uglify[grunt.task.current.target];' +' var file = subtask?subtask.dest:\'\';' +' var filename = file.split(\'/\').pop();' +'%>' +'/*! <%= filename %>' +'\n * version: <%= pkg.version %>' +'\n * author: <%= pkg.author %>' +'\n */\n';

Answer 3

如果您有更多脚本，则uglify便于将其与自定义属性作为名称标识符的特定子任务分开。

    uglify: {
        options: {
            banner: 
            '<% var subtask = uglify[grunt.task.current.target]; %>' +
            '/* <%= subtask.name %> <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
            ' */\n'
        },
        main: {
            name: 'main.min.js',
            files: [{
                src: 'build/files/js/main.min.js',
                dest: 'build/files/js/main.min.js'
            }]
        },
        vendor: {
            name: 'vendor.min.js',
            files: [{
                src: 'build/files/js/vendor.min.js',
                dest: 'build/files/js/vendor.min.js'
            }]
        }
    }

Answer 4

尝试以下方法：

banner: grunt.file.read('./folder/file.js'),

https://stackoverflow.com/questions/38854998/dynamic-mapping-and-concat-with-grunt-uglify/

Answer 5

https://github.com/mattstyles/grunt-banner/issues/5#issuecomment-33445038

进程：function（src，filepath）{}完成了这项工作。

对我来说，我想在每个uglified .min.js的底部添加“//＃sourceUrl = xxx.min.js”，以便我可以调试这些动态加载的.min.js。以下简单的Gruntfile.js适用于我：

module.exports = function (grunt) {
    var cwd = "/Branding/Layouts/JS/";
    var src = [
                "file1.js",
                "file2.js",
                "file3.js"
    ];

    var minified_src = [];
    for (i=0;  i< src.length; i++)
        minified_src.push(src[i].replace(/\.js$/g, ".min.js"));

    var config = grunt.initConfig({
        "uglify": {
            options: {
                sourceMap: true
            },
            target: {
                files: [
                    {
                        expand: true,
                        cwd: cwd,
                        src: src,
                        dest: cwd,
                        ext: ".min.js",
                        extDot: "last"
                    }
                ]
            }
        },
        concat: {
            options: {
                process: function (src, filepath) {
                    return src + "\n//# sourceURL=" + filepath.split("/").slice(-1);
                }
            },
            target: {
                files: [
                    {
                        expand: true,
                        cwd: cwd,
                        src: minified_src,
                        dest: cwd
                    }
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.registerTask('default', ['uglify', 'concat']);
};

注意：uglify不能保留不在代码块内的注释（比如//＃sourceMap = xxx.js），我必须使用concat在uglify完成后附加注释。

哇，这是我的第一个stackoverflow帖子。

如何在grunt的uglify横幅中包含文件名？

5 个答案: