通过 grunt 任务更新 json 文件中的文件引用

Question

我是一名 JavaScript 开发人员，对从头开始创建构建过程相当陌生。我选择在我当前的项目中使用 Grunt，并创建了一个 GruntFile，它完成了我需要它做的大约 90% 的工作，而且效果很好，除了这个问题。我在 manifest.json 文件中开发 chrome 扩展时引用了几个 JavaScript 文件。对于我的构建过程，我将连接所有这些文件并将其压缩为一个文件以包含在manifest.json 中。无论如何在构建过程中更新manifest.json文件中的文件引用，使其指向缩小版本？

这是 src 清单文件的 sn-p：

{
    "content_scripts": [{
        "matches": [
            "http://*/*"
        ],
        "js": [
            "js/lib/zepto.js",
            "js/injection.js",
            "js/plugins/plugin1.js",
            "js/plugins/plugin2.js",
            "js/plugins/plugin3.js",
            "js/injection-init.js"
        ]
    }],
    "version": "2.0",
}

我有一个 grunt 任务，它将上面列出的所有 js 文件连接并缩小到一个名为 injection.js 的文件中，并且想要一个可以修改清单文件的 grunt 任务，使其看起来像这样：

{
    "content_scripts": [{
        "matches": [
            "http://*/*"
        ],
        "js": [
            "js/injection.js"
        ]
    }],
    "version": "2.0",
}

我现在所做的是有两个版本的清单文件，一个用于开发，一个用于构建，在构建过程中它会复制构建版本。这意味着我需要维护 2 个我不想这样做的版本。有没有办法用 Grunt 更优雅地做到这一点？

Answer 1

Grunt 提供了自己的 api 用于读写文件，我觉得比 fs 等其他依赖项更好： 将此任务放入您的 gruntjs 文件后，使用带有命令 grunt updatejson:key:value 的 grunt 编辑/更新 json 文件

grunt.registerTask('updatejson', function (key, value) {
        var projectFile = "path/to/json/file";


        if (!grunt.file.exists(projectFile)) {
            grunt.log.error("file " + projectFile + " not found");
            return true;//return false to abort the execution
        }
        var project = grunt.file.readJSON(projectFile);//get file as json object

        project[key]= value;//edit the value of json object, you can also use projec.key if you know what you are updating

        grunt.file.write(projectFile, JSON.stringify(project, null, 2));//serialize it back to file

    });

Answer 2

我做了类似的事情 - 您可以加载清单，更新内容然后再次将其序列化。比如：

grunt.registerTask('fixmanifest', function() {
     var tmpPkg = require('./path/to/manifest/manifest.json');

     tmpPkg.foo = "bar";
     fs.writeFileSync('./new/path/to/manifest.json', JSON.stringify(tmpPkg,null,2));
});

Answer 3

我不同意这里的其他答案。

1) 为什么使用grunt.file.write 而不是fs？ grunt.file.write 只是一个包装器 fs.writeFilySync（参见代码here）。

2) 为什么使用fs.writeFileSync，因为 grunt 让异步处理事情变得非常容易？毫无疑问，您在构建过程中需要异步，但如果它很容易做到，你为什么不需要？ （实际上，它只比writeFileSync 实现长几个字符。）

我建议如下：

var fs = require('fs');
grunt.registerTask('writeManifest', 'Updates the project manifest', function() {
    var manifest = require('./path/to/manifest'); // .json not necessary with require
    manifest.fileReference = '/new/file/location';
    // Calling this.async() returns an async callback and tells grunt that your
    // task is asynchronous, and that it should wait till the callback is called
    fs.writeFile('./path/to/manifest.json', JSON.stringify(manifest, null, 2), this.async());

    // Note that "require" loads files relative to __dirname, while fs
    // is relative to process.cwd(). It's easy to get burned by that.
});