javascript - 模式定义中预期的替换属性

Question

我有一个 Gulp 任务 build:env ，它为我的 AngularJS 应用程序生成一个 app.constant.js 文件。但命令结果出现错误:

/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/src/applause.js:82
        throw new Error('Replacement attribute expected in pattern definition.
              ^
Error: Replacement attribute expected in pattern definition.
  at /home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/src/applause.js:82:15
  at /home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/node_modules/lodash/dist/lodash.js:2885:18
  at forEach (/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/node_modules/lodash/dist/lodash.js:3297:15)
  at Function.transform (/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/node_modules/lodash/dist/lodash.js:2884:35)
  at normalize (/home/myuser/Documents/Projects/myapp/node_modules/gulp-replace-task/node_modules/applause/src/applause.js:43:12)
  ...etc

在使用的所有文件以及来自 gulpfile.js 的控制台输出下方，您可以在其中看到设置已正确加载。

.env.json

{
    "active": "dev"
}

环境.json

{
    "demo": {
        "frontend": {
            "host": "app.demo.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        },
        "backend": {
            "host": "api.demo.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": {
                "api": "api/"
            }
        },
        "socket": {
            "host": "socket.demo.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        }
    },
    "dev": {
        "frontend": {
            "host": "app.dev.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        },
        "backend": {
            "host": "api.dev.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": {
                "api": "api/"
            }
        },
        "socket": {
            "host": "socket.dev.example.org",
            "protocol": "https",
            "port": "443",
            "endpoint": null
        }
    }
}

gulpfile.js (任务构建:env)

gulp.task('build:env', function () {
    var env = JSON.parse(fs.readFileSync('./.env.json', 'utf8'));
    var environments = JSON.parse(fs.readFileSync('./.environments.json', 'utf8'));
    var settings = environments[env.active];
    console.log(settings);

    // Replace each placeholder with the correct value for the variable.
    return gulp.src('./config/app.constant.js')
    .pipe(replace({
        patterns: [
            {
                match: 'api',
                replacement: settings.backend.host
            },
            {
                match: 'assets',
                replacement: settings.frontend.host
            }
        ]
    }))
    .pipe(gulp.dest('./www/app'));
});

config/app.constant.js

(function() {
    'use strict';
    angular.module('myapp').constant('settings', {
    'API': '@@api',
    'ASSETS': '@@assets'
    });
}());

console.log(设置)

{
   frontend:{
      host:'192.168.1.112',
      protocol:'http',
      port:'8100',
      endpoint:null
   },
   backend:{
      host:'192.168.1.112',
      protocol:'http',
      port:'80',
      endpoint:{
     api:'api/'
      }
   },
   socket:{
      host:'192.168.1.112',
      protocol:'http',
      port:'3001',
      endpoint:null
   }
}

Ionic/NodeJS/Cordova/Gulp

myuser@my-laptop:~/Documents/Projects/frontend$ ionic info

Your system information:

Cordova CLI: 5.3.3
Gulp version:  CLI version 3.8.11
Gulp local:   Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.7.7
Ionic App Lib Version: 0.6.3
OS: Distributor ID:     Ubuntu Description:     Ubuntu 15.04 
Node Version: v0.12.7

依赖项列表

myuser@my-laptop:~/Documents/Projects/frontend$ npm list --depth 0
frontend@0.0.1 /home/myuser/Documents/Projects/frontend
├── async@0.9.2
├── bower@1.6.3
├── clean-css@2.2.23
├── del@1.2.1
├── gulp@3.9.0
├── gulp-angular-templatecache@1.8.0
├── gulp-concat@2.6.0
├── gulp-cordova-bump@1.3.0
├── gulp-minify-css@0.3.13
├── gulp-ng-annotate@1.1.0
├── gulp-rename@1.2.2
├── gulp-replace-task@0.1.0
├── gulp-sass@1.3.3
├── gulp-useref@1.3.0
├── gulp-util@2.2.20
├── jshint@2.8.0
├── mv@2.1.1
├── ng-annotate@0.15.4
├── q@1.4.1
├── shelljs@0.3.0
├── uglify-js@2.4.14
└── yargs@1.3.3

Answer 1

我通过使用exports.module解决了我的问题

示例

module.exports = function () {
var config = {
    beta: {
        "CssPath": "dist/css/",
        "OidcConfig": {
            "authority": "https://identity/identity/",
            "persistKey": "token",
            "client_id": "test",
            "redirect_uri": "http://beta/#/callback/",
            "scope": "openid profile email roles WebApiResource"
        },
        "JSNLogSettings": {
            "url": "http://beta/jsnlog.logger",
            "consoleLogging": true

        },
        "BaseWebApiUrl": "http://prod/"

    },
    production: {
        "CssPath": "bower_components/templates/dist/css/",
        "OidcConfig": {
            "authority": "https://identity",
            "persistKey": "token",
            "client_id": "test",
            "redirect_uri": "http://test/#/callback/",
            "scope": "openid profile email roles WebApiResource"
        },
        "JSNLogSettings": {
            "url": "http://test/jsnlog.logger",
            "consoleLogging": true

        },
        "BaseWebApiUrl": "http://test"

    }
};

return config;
};

gulp 了

buildconfig = require('./build.config')();

gulp.task('replace', function () {
var build = JSON.stringify(buildconfig['production']);

return gulp.src('src/app.module.js')
    .pipe(replacetask({
        usePrefix: false,
        patterns: [
            {
                match: '=constants',
                replacement: "=" + build
            }
        ]
    }))
    .pipe(gulp.dest(config.build));
});

Angular 模块

(function () {
'use strict';

window.BuildVars =constants;

angular
    .module('app', [
        'app.views',
        'app.services',
        'app.directives',
        'angular.filter'
    ]);

})();

我知道我使用的是窗口而不是常量，但这对我来说更容易一些，但是总是可以创建一个常量来引用 window.{VarName} 来绑定(bind)到 Angular 。这就是我目前正在做的事情

编辑

不使用窗口。

AngularJS

(function() {
    'use strict';
    angular.module('myapp').constant('settings', {
        'API': @@buildConstants
    });
}());

咕咕咕

gulp.task('replace', function () {
    var build = JSON.stringify(buildconfig['production']);

    return gulp.src('src/app.module.js')
        .pipe(replacetask({

            patterns: [
                {
                    match: 'buildConstants',
                    replacement: build
                }
            ]
        }))
        .pipe(gulp.dest(config.build));
});

您的 Gulp 想要更多类似

gulp.task('build:env', function () {
    var env = JSON.parse(fs.readFileSync('./.env.json', 'utf8'));
    var environments = JSON.parse(fs.readFileSync('./.environments.json', 'utf8'));
    var settings = environments[env.active];
    console.log(settings);

    var backend = JSON.stringify(settings.backend.host);
    var frontend = JSON.stringify(settings.frontend.host);

    // Replace each placeholder with the correct value for the variable.
    return gulp.src('./config/app.constant.js')
        .pipe(replace({
            patterns: [
                {
                    match: 'api',
                    replacement: backend
                },
                {
                    match: 'assets',
                    replacement: frontend
                }
            ]
        }))
        .pipe(gulp.dest('./www/app'));
});

通过解析 JSON，替换无法插入对象。只需将其恢复为 JSON 字符串即可正常工作..