具有不同自定义的 AngularJS 应用程序答案

【问题标题】：AngularJS application with different customizations具有不同自定义的 AngularJS 应用程序
【发布时间】：2015-12-02 09:20:38
【问题描述】：

我得到了我们使用 AngularJS 创建的“框架”。它允许构建问卷系统，并且它有许多不同的参数来控制框架的行为。

使用这个框架，我们创建了 2 个项目：projectA 和 projectB。这些项目之间的区别是设置和资产（css、img、...）
两个项目都存储在git 的同一分支中，并且只有config 文件定义了项目自定义。
我想不出如何使用Gulp 或其他方式轻松地将这两个项目与同一代码源分开部署的最佳方式。

以下是我目前得到的一些想法：
1. 在代码中同时包含设置文件和图像（例如logo_A.png 和logo_B.png），并在构建期间使用Gulp选择适当的
2. 创建文件夹customizations，该文件夹将有两个子文件夹A 和B 以及相应的设置和资产
3.为每个项目安装脚本（不是代码）创建单独的存储库，这些脚本将完成所有工作

在这种情况下最好的方法是什么？

【问题讨论】：

标签： angularjs git deployment configuration structure

【解决方案1】：

最后，最简单且最容易理解的解决方案是创建额外的custom 文件夹。

资产

除了普通的应用程序文件之外，我现在得到了带有 2 个子文件夹的 custom 文件夹：A 和 B 每个都包含仅对应于具体项目的 assets (css, img)。
在gulp 中，我使用了yargs 模块，它允许传递参数。从输入中读取项目名称后，我可以查看custom 文件夹中是否有我感兴趣的资源（我刚刚将custom 文件夹添加到资源路径中）。

var customPath = './custom/' + app.name;
exports.paths = {
  web: {
    //Resources
    styles: ['./app/**/*.css', './app/**/*.scss', customPath + '/**/*.css', customPath + '/**/*.scss'],
...

构建任务的调用现在看起来像这样：gulp build --name A。

配置

对包含常量的 AngularJS 的配置文件做了另一件事。我使用了gulp-ng-config 插件，它允许动态构建AngularJS 配置（常量）文件。在我的流程中，首先我检查 custom 配置文件是否存在于我使用的 custom 文件夹中，如果没有，我使用来自应用程序的默认配置文件。

var getAppScripts = function() {
    return $.eventStream.merge(
        gulp.src(config.paths.web.scripts)
        .pipe($.jshint())
        .pipe($.jshint.reporter('jshint-stylish'))
        //.pipe($.eslint())
        .pipe($.eslint.format()),
        getAppConfig())
            .pipe($.angularFilesort());
};

var getAppConfig = function() {
    var configFile = config.paths.web.custom + "/app.config.yaml";
    if (fs.existsSync(configFile)) {
        return gulp.src(configFile)
            .pipe($.ngConfig(config.app.name, {
                parser: 'yml',
                createModule: false
            }));
    }
    else {
        return gulp.src(config.paths.web.config);
    }
}

【讨论】：