npm 脚本、浏览器同步和代理中间件答案

【问题标题】：npm scripts, browser-sync and proxy-middlewarenpm 脚本、浏览器同步和代理中间件
【发布时间】：2016-10-16 20:58:45
【问题描述】：

我正在尝试将我的 gulp 构建环境转换为使用纯 npm 脚本。我已经能够解决大多数问题，但我有点卡在浏览器同步和使用代理中间件上。在我们当前的项目中，我们有一个 ASP.NET 后端，因此我需要代理一些 url。这是我们 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
    });
});

关于如何仅使用 npm 脚本完成此任务的任何想法？

【问题讨论】：

标签： node.js proxy gulp browser-sync npm-scripts

【解决方案1】：

我今天开始工作了。我最终创建了一个单独的文件来处理浏览器同步：

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

然后我从 npm 脚本中调用它，如下所示：

    "scripts": {
    "bs": "node browsersync.js"
}

【讨论】：