Gulp / NPM Dev依赖项-网站完成后如何处理？

Question

我已经开始学习Gulp和Webpack，教程中没有涉及的一件事是……当您的项目完成并准备好进行部署时，您将如何处理所有开发依赖项？

node_modules文件夹本身很大，我假设您没有将此文件夹上传到您的Web服务器（或者您可以）吗？但这是否意味着使用SASS / minification之类的东西所获得的所有收益仅在您的本地主机项目中可用，因此只有已部署的最终文件（这意味着必须在站点上编辑缩略代码等）如果您需要进行一些小的更改）。

学习过程的这一部分比我到目前为止在Web开发中所经历的任何其他事情都难找到。我还认为这很差，主要的学习库（Lynda，Treehouse等）都没有在本教程的结尾进行介绍。就像，祝贺您现在已经建立了一个可以上传的网站。好的，但是我该如何处理所有依赖项中的数百个文件等？我是否可以将它们作为网站的一部分正常上载？如果不这样做，我该如何防止这种情况发生，或者npm是否可以自动阻止这种情况发生？

任何指导/解释都将是惊人的。

艾米莉

Answer 1

有许多不同的方式来部署项目。它所基于的技术，团队规模，项目规模，项目重要性以及许多其他因素是决定应如何进行的重要因素。我无法研究大型项目中的完成方式，因为它本身就是一个完整的领域，但是我可以为您提供一些入门指南。

部署代码时通常可以选择四种策略：

1. 部署期间在服务器上构建。
2. 在部署之前进行构建，然后部署node_modules和生产文件。
3. 在部署之前先构建，然后仅部署生产文件。
4. 使用容器进行部署。

在服务器上构建

通过这种策略，您可以将存储库中的所有内容上载到服务器。所谓存储库，是指您的源代码存储库，而不是整个项目文件夹。忽略的文件和文件夹（如果使用git，则为.gitignore）不会上载，这意味着您不会上载node_modules或gulp构建的文件。我假设您不使用版本控制来跟踪这些文件和文件夹。该文件已被上传后运行NPM安装--only =生产和大口的服务器上。

在启用了生产模式的情况下运行npm install时，它仅下载并安装依赖项。devDependencies被跳过。您可能想知道如何在不安装gulp的情况下运行它。好了，您必须将所有与gulp相关的模块移到“依赖项”部分。在gulpfile中使用的模块也是如此，例如babel和webpack。

该应用程序应设置为提供gulp制作的文件。如果您使用Express且gulp制作的文件位于名为dist的文件夹中，则它将类似于以下内容：

app.use(express.static(path.join(__dirname, 'dist')));

当您使用AWS Elastic Beanstalk或Heroku等云托管服务提供商时，通常会自动将此构建过程自动化。例如，要部署到Heroku，您可以将回购中的分支推送到Heroku上的远程存储库。Heroku然后将自动运行npm install，然后运行您在package.json中定义的postinstall脚本。如果您将安装后脚本设置为以下形式：

"scripts": {
  "start": "node app.js",
  "postinstall": "gulp"
}

当您进行更改时，它将自动为您运行gulp。然后，工作流程包括在本地进行更改，提交代码以及将包含更改的分支推送到Heroku。Heroku将处理npm和gulp东西。构建完成后，它还将重新启动应用程序。Elastic Beanstalk与此类似。

我会推荐这种策略。它与持续集成效果很好。AWS和Heroku也有免费层，因此您可以在那里进行任意尝试。

在部署之前建立并上传既node_modules和生产档案

您还可以选择在部署之前先构建所有内容。上面提到的构建过程包括两个步骤：在服务器上运行npm install以创建node_modules，然后在服务器上运行gulp以创建生产文件。

对于此策略，您

1. 在本地工作文件夹中运行gulp以创建生产文件。
2. 将生产文件以及package.json复制到新文件夹中。
3. 在新文件夹中运行npm install --only = production，以创建node_modules。
4. 确保该应用程序可以在新文件夹中运行，然后将其上传到服务器。

在这种情况下，您无需在服务器上运行npm install或gulp。而是提供所需的所有文件。我不认为我曾经见过这样做过。我提到的托管服务提供商不能很好地运行，因为他们想自己运行npm install。

仅在部署和上载生产文件之前进行构建

就像上面的策略中提到的那样，在部署过程中没有在服务器上运行npm install并不是很常见。但是，跳过“ gulp-on-server”步骤非常普遍。而不是让所有的gulp模块都处于依赖关系中，而是将它们保留在devDependencies中。你现在：

1. 在本地运行gulp以创建生产文件。
2. 将生产文件以及package.json复制到新文件夹中。
3. 将新文件夹上载到服务器。
4. 确保在服务器上运行npm install --only = production。

例如，使用Elastic Beanstalk做到这一点非常容易。您要做的就是上传包含生产文件和package.json的zip文件，上传完成后它将自动为您运行npm install。安装完成后，它还将启动应用程序。

使用容器

该策略使用Docker等技术来创建一个容器，其中包含运行Node所需的一切。这意味着操作系统，节点，npm，您的代码等。然后，您将容器上载到接受容器的托管解决方案，例如AWS。这不是很难，但是我建议您首先习惯“常规”部署方法。

你提到做小的修改服务器上的代码。我建议您不要这样做。您应该改为在本地编辑代码，然后确保它在本地服务器上可用，并在提交后最后上传更改。您的回购应反映实时代码。

最后，我建议您在Heroku或AWS或两者上创建帐户。只是弄乱它，看看它如何工作，这通常是最好的学习方法。它是免费的，您不能破坏任何东西。