Question

我使用AngularJS创建了一个“框架”。它允许建立问卷系统，它有许多不同的参数来控制框架的行为。

使用此框架，我们创建了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文件夹中是否存在自定义配置文件，如果不是我使用应用程序中的默认文件夹。

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应用程序具有不同的自定义

1 个答案:

资产

配置