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

Question

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

我们使用这个框架创建了 2 个项目：projectA 和 projectB。这些项目之间的差异是 设置和资产 (css, img, ...)
两个项目都存储在 git 中的同一分支上，只有 config 文件定义了项目自定义。
我想不出如何使用 Gulp 或其他方式从同一代码源轻松部署这两个项目的最佳方式。

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

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

Answer 1

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

资产

除了正常的应用程序文件，我现在得到 custom 文件夹，其中包含 2 个子文件夹：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);
    }
}

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

AngularJS application with different customizations

git

deployment

configuration

structure

angularjs

资产

配置