模式定义中期望的替换属性

Replacement attribute expected in pattern definition

本文关键字：替换 属性 期望 定义 模式      更新时间：2023-09-26

我有一个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"
}

environments.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'));
});

配置/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
   }
}

离子/NodeJS/科尔多瓦/杯

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

我通过使用exports来解决我的问题。模块

例子
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;
};

IN GULP DID

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));
});

角模块

(function () {
'use strict';
window.BuildVars =constants;
angular
    .module('app', [
        'app.views',
        'app.services',
        'app.directives',
        'angular.filter'
    ]);
})();

我知道我使用的是window而不是constant，但这对我来说更容易一些，但是我总是可以创建一个常数来引用window。{VarName}绑定到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));
});

Your Gulp would like more like 

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, replace不能插入Object。只是让它回到一个JSON字符串，应该工作。

相关文章：