[英]npm scripts, browser-sync and proxy-middleware
I am trying to convert my gulp build env to use pure npm scripts. 我正在尝试将我的gulp构建环境转换为使用纯npm脚本。 I have been able to solve most issues but I am a bit stuck on browser-sync and using proxy-middleware.
我已经能够解决大多数问题,但是我对浏览器同步和使用代理中间件有些困惑。 In our current project we have a ASP.NET backend and therefore I need to proxy some urls.
在我们当前的项目中,我们有一个ASP.NET后端,因此我需要代理一些URL。 This is the config for proxies used in our gulp file
这是我们的gulp文件中使用的代理的配置
gulp.task('webserver', function () {
var apiProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/api');
apiProxy.route = '/api';
var mvnDepsProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/mvndeps');
mvnDepsProxy.route = '/mvndeps';
var imagesProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/images');
imagesProxy.route = '/images';
var ngscriptsProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/ng-scripts');
ngscriptsProxy.route = '/ng-scripts';
var commonProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/common');
commonProxy.route = '/common';
if (baseParentFolder != '') {
var proxies = [proxy(apiProxy), proxy(mvnDepsProxy), proxy(imagesProxy), proxy(ngscriptsProxy), proxy(commonProxy)];
}
else
var proxies = [proxy(apiProxy)];
browserSync.init({
server: {
baseDir: baseFolder,
middleware: proxies
},
open: openBrowserOnServe,
port: developmentUiPort
});
});
Any ideas on how I can accomplish this using only npm scripts? 关于仅使用npm脚本如何完成此操作的任何想法?
I got it working today. 我今天能工作。 I ended up creating a separate file for handling browser sync:
我最终创建了一个单独的文件来处理浏览器同步:
var browserSync = require('browser-sync').create();
var url = require('url');
var proxy = require('proxy-middleware');
var iisPort = 61209;
var iisAppContext = "/App";
var apiProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/api');
apiProxy.route = '/api';
var mvnDepsProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/mvndeps');
mvnDepsProxy.route = '/mvndeps';
var imagesProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/images');
imagesProxy.route = '/images';
var ngscriptsProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/ng-scripts');
ngscriptsProxy.route = '/ng-scripts';
var commonProxy = url.parse('http://localhost:' + iisPort + iisAppContext + '/common');
commonProxy.route = '/common';
var proxies = [proxy(apiProxy), proxy(mvnDepsProxy), proxy(imagesProxy), proxy(ngscriptsProxy), proxy(commonProxy)];
browserSync.init({
server: {
baseDir: './',
middleware: proxies,
files: ["css/**/*.css", "**/*.html", "scripts/*.js"]
},
open: false,
port: 9009
});
browserSync.watch(["scripts/*.js", "**/*.html", "css/*.css"]).on("change", browserSync.reload);
I then call this from npm scripts like this: 然后,我从npm脚本中这样调用:
"scripts": {
"bs": "node browsersync.js"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.