模式定義中預期的替換屬性

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" 
} 

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 

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

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' 
    ]); 

})(); 

我知道我使用窗口而不是常量，但這對我來說稍微容易一些，但是總是可以創建一個常量到引用窗口。{VarName}以配合角度。剛纔我所目前正在

編輯

不使用窗口。

AngularJS

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

GULP

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.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字符串，應該工作..