Gulp构建全栈应用程序的输出/路径/结构策略

时间：2016-01-12 04:33:52

标签： javascript node.js gulp webpack mean-stack

我正在建立自己的种子＆＃34; Mongo + Angular + Node + Node的部分原因是因为我想了解更多我所掩盖的细节，部分原因是我想要比yo生成器提供更多的控制和结构。

我有几个问题，但所有问题的根源是缺乏对全栈（MEAN）JS应用程序的部署/维护的理解。为简洁起见，我将其称为FS JS应用程序。

通过理解几个基本问​​题的答案，我可以更自信地按照我的意愿设计我的种子。

FS JS应用程序是否在生产中以与开发中相同的方式启动，即通过调用node？

答案是肯定的，我想，但我只是想确定一下。

专业人士如何部署FS JS应用程序？有形的部署文件是什么样的？安装是否仍然通过npm install？

这是我第一次遇到麻烦的地方。我已经看到很多种子将服务器代码构建到/dist/子目录。这让我觉得我们应该把我们需要的所有内容捆绑到dist并压缩它，或者我们应该安装npm并从dist而不是source运行服务器/目录 - 即zip / git package.json所在的npm install，将其复制到目的地，克隆/解压缩，然后app.js。

尝试转换服务器文件结构以使源文件合并为一个文件是否可取/容易/普遍？

我知道对于客户端文件，将它们捆绑在一起以节省网络开销是有意义的。因此，至少我们可以捆绑所有客户端文件并使用模块来模仿文件，整个文件结构可能只是Gulp。甚至依赖项也可以合并到一个文件中，并且通常具有client任务。

但是对于服务器来说，这是我应该尝试做的事情吗？如果是这样，任何提示？

最小化和/或uglify服务器文件是最佳做法吗？

同上

服务器源转换的操作顺序是什么，因此路径不是问题？

对于webpack的东西，我通常会这样做：

  1. 使用babel与es6将es5 .js转换为临时文件夹中的单个js文件
  2. 将内容添加到临时文件夹中的- bower_components - node_modules - source - client - common - infrastructure - utility ... ie tree-merger.js ... - configuration - client - server - express - default.json - production.environment.json - default.json - development.environment.json - production.environment.json - server - task - gulp - ... - client-webpack.js - ... - server-build.js - ... - target - .tmp (temp) - development - source (carbon copy of source, except injections are done where needed and SCSS is built into CSS. Reads from bower_components as needed.) - test - ??? - production - bin - client - app.js - app.css image - server ??? 文件中，例如缩小或者uglify，一次一个。
  3. 从tmp管道到真实文件夹，然后清理

    4. 这就是我的想法

    <div class="hpanel" ng-repeat="section in sections">
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <ul class="list-inline">
            <li>
              <h5>
                <b>SecID</b>
              </h5>
              <span>{{section.section_id}}</span>
            </li>
            <li>
              <h5>
                <b>Section Name</b>
              </h5>
              <span>{{section.section_name}}</span>
            </li>
          </ul>
          <hr/>
          <button ng-click="section.new_section_history = section.section_history">copy row</button>
          <table>
            <tr>
              <td ng-repeat="label in labelIndex">
                {{label.label}}
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                {{section.section_history[label.index]}}
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                <input ng-model="section.new_section_history[label.index]"/>
              </td>
            </tr>
            <tr>
              <td ng-repeat="label in labelIndex">
                <button ng-click="section.new_section_history[label.index] = section.section_history[label.index]">copy</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>

1 个答案:

答案 0 :(得分：1)

FS JS应用程序在开发中是否与开发中的方式相同，即通过调用节点？

是。但是，在生产中，您应该编写一些init脚本来监视您的node实例并重新运行它，如果它由于某种原因崩溃

专业人士如何部署FS JS应用程序？有形的部署文件是什么样的？安装是否仍然通过npm安装？

npm install非常好，但请记住，你绝对应该记录npm-shrinkwrap.json文件（通过运行npm shrinkwrap）。除此之外，你可以使用你喜欢的任何与节点无关的工具进行部署（即使是简单的shell脚本也是如此。当我的项目变大时，我用Python脚本替换它。）

我没有看到缩小/表示服务器端代码的原因。您可以轻松地按照原样运行来源，在需要的时间对其进行宣传（babel-register可以用于此）。此外，es6 import被转换为节点的标准resolve s，因此不需要内联＆＃39;依赖。也许缩小会给你带来一些速度（理论上，它应该是非常小的），但它绝对不值得，除非你的应用程序是Facebook般大的;我想，这回答了其余的问题。

相关问题
最新问题