来自外部文件的 Grunt 服务器任务配置答案

【问题标题】：Grunt server task config from external files来自外部文件的 Grunt 服务器任务配置
【发布时间】：2015-12-01 14:25:14
【问题描述】：

我正在运行一个 Angular.js 应用程序，所有的任务管理都是用 grunt 完成的，现在我在实时重新加载中看到三个组件，bower_components，发票和用户，最终它们会增加编号，所以我想知道是否有办法调用像 components.json 这样的外部文件并遍历它的 n 个成员。这是我的代码：

// The grunt server settings
connect: {
    options: {
        port: 9000,
        hostname: 'localhost',
        livereload: 35729
    },
    livereload: {
        options: {
            open: true,
            middleware: function (connect) {
                return [
                    connect.static('.tmp'),
                    connect().use(
                        '/bower_components',
                        connect.static('./bower_components')
                    ),
                    connect().use(
                        '/invoices',
                        connect.static(invoicesAppPathConfig.root)
                    ),
                    connect().use(
                        '/users',
                        connect.static(usersAppPathConfig.root)
                    ),
                    connect.static(secureAppPathConfig.app)
                ];
            }
        }
    },
    dist: {
        options: {
            open: true,
            base: '<%= main.dist %>'
        }
    }
}

我已经创建了component.json文件：

{"data":[
    {
        "resource":"/bower_components",
        "config":"./bower_components"
    },
    {
        "resource":"/invoices",
        "config":"invoicesAppPathConfig.root"
    },
    {
        "resource":"/users",
        "config":"usersAppPathConfig.root"
    }
]}

我在 Gruntfile.js 中创建了这个变量，记住我需要迭代数据的内容：

var components = require('./components.json');
var data = components.data;

现在我有一个问题，我怎样才能在代码中做到这一点？

middleware: function (connect) {
    return [
        connect.static('.tmp'),
        // Here comes the data iteration
        connect.static(secureAppPathConfig.app)
    ];
}

提前致谢。

【问题讨论】：

标签： javascript angularjs json gruntjs

【解决方案1】：

当然可以：

grunt.initConfig({
    components: grunt.file.readJSON('components.json'),
    [...]
});

更多info on grunt.file here

你也可以要求它：

var components = require('./components.json');

【讨论】：

那么你具体需要什么？
就像在 grunt 文件中一样需要它

【解决方案2】：

创建下一个变量：

var components = require('./components.json');
var data = components.data;
var arrayComponents = [];

然后在livereload的选项中迭代json数据并添加到arrayComponents：

middleware: function (connect){
    arrayComponents.push(connect.static('.tmp'));
    // The modules to be watched are added
    for(var i in data){
        arrayComponents.push(connect().use(data[i].resource, connect.static(data[i].config)));
    }
    arrayComponents.push(connect.static(secureAppPathConfig.app));
    return arrayComponents;
}

它有效，但也许不是最优雅的解决方案。

【讨论】：