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

【问题标题】：Output/path/structure strategy for Gulp builds of full-stack appsGulp 构建全栈应用程序的输出/路径/结构策略
【发布时间】：2016-04-16 14:18:04
【问题描述】：

我正在设置我自己的 Mongo+Angular+Node+Node “种子”，部分原因是我想了解更多我已经忽略的细节，部分原因是我想要比 @987654321 更多的控制和结构@生成器提供。

我有几个问题，但归根结底是对全栈 (MEAN) JS 应用程序的部署/维护缺乏了解。为简洁起见，我将其称为 FS JS 应用程序。

通过了解几个基本问题的答案，我可以更有信心并本着我想要的精神来设计我的种子。

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

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

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

这是我第一次遇到麻烦的地方。我见过许多将服务器代码构建到/dist/ 子目录的种子。这让我觉得要么我们应该将我们需要的所有东西捆绑到dist 并压缩它，要么我们应该使用npm 安装并从dist 而不是source 目录运行服务器 - 即将整个/ 压缩/git，package.json 所在的位置，将其复制到目标位置，克隆/解压缩，然后将npm install 放在那里。

尝试转换服务器文件结构以便将源文件合并为一个文件是否可取/容易/常见？

我知道对于客户端文件，将它们捆绑在一起以节省网络开销是有意义的。所以至少我们可以把所有的客户端文件都捆绑起来，用模块来模仿文件，整个文件结构可能就变成了app.js。甚至依赖项也可以合并到一个文件中，并且通常带有 Gulp 任务。

但是对于服务器，这是我应该尝试做的事情吗？如果有，有什么建议吗？

缩小和/或丑化服务器文件的最佳做法是什么？

同上

服务器源转换的操作顺序是什么，这样路径就不会成为问题？

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

使用 webpack 和 babel 将 es6 转换为 es5 到临时文件夹中的单个 .js 文件
对临时文件夹中的js 文件进行处理，例如缩小或丑化它，当然是一次一个。
从 tmp 管道到真实文件夹，然后清理

这就是我的想法

- 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
        ???

【问题讨论】：

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

【解决方案1】：

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

是的。但是，在生产中，您应该编写一些初始化脚本来监控您的 node 实例并在它因某种原因崩溃时重新运行它

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

npm install 很好，但是，请记住，您绝对应该生成npm-shrinkwrap.json 文件（通过运行npm shrinkwrap）。除此之外，您还可以使用您喜欢的任何与节点无关的工具进行部署（即使是简单的 shell 脚本也可以做到这一点。当我的项目变得更大时，我将其替换为 Python 脚本）。

我看不出缩小/混淆服务器端代码的理由。您可以轻松地“按原样”运行源，在需要的时候对它们进行 babelifying（babel-register 可以用于此）。此外，es6 imports 被转换为节点的标准 resolves，因此不需要“内联”依赖项。也许缩小可以为您带来一些速度（理论上，它应该真的很小），但这绝对不值得，除非您的应用程序像 facebook 一样大；我想，这回答了剩下的问题。

【讨论】：