创建前端开发构建系统的正确方法答案

【问题标题】：Right Way of creating a front end dev build system创建前端开发构建系统的正确方法
【发布时间】：2017-04-23 11:51:01
【问题描述】：

不确定这是不是问这个问题的正确地方，所以请多多包涵。

我是构建系统/前端工作流程的新手，并且严重依赖内置系统的 IDE 为我完成工作，例如将 Sass 编译为 css。

我最近发现了 npm gulp 的世界，现在需要让项目工作并从“dev”文件夹编译到“build”文件夹。

我不明白的是，如果通过 npm 安装引导程序，它会添加进入这两个文件夹之外的 node_modules 文件夹。我是吗在这里做错了什么？因为我 cd 进入 dev 文件夹，但是它安装在根文件夹中。
如何将我的标签 rev 文件从我的 dev 更改为 build 如果我必须从 node_modules 获取文件
Angular 也是如此，它安装在 node_modules 文件夹中。如何从那里访问代码到我的 dev 文件夹，然后将其编译到我的构建中。

【问题讨论】：

标签： javascript gulp build-system

【解决方案1】：

这适用于节点解析模块的方式。如果你安装一个像gulp这样的模块，你会得到一个类似这样的结构：

- node_modules/
    - gulp/
        ...
- src/
    index.js
gulpfile.js

为了将gulp 导入到您的脚本中，您只需使用require('gulp')（或import gulp from 'gulp'，如果您使用的是EcmaScript6），节点会找出在哪里查找此模块。

您可以通过gulpfile.js 或src/index.js 进行操作。 Node 将尝试在脚本文件夹或任何父文件夹中查找node_modules 文件夹。

【讨论】：

对不起@Thiago 我一个字都听不懂。我知道我需要 gulp 和我的 gulpfile.js 中的所有 gulp 插件。但是我不明白如何使用引导程序和/或如果我使用我的开发构建中的角度，如果它位于根文件夹中的开发文件夹之外，然后将其编译到构建文件夹。

【解决方案2】：

对于大多数前端构建系统，您的 node_modules 文件夹实际上位于项目文件夹的根目录。您的 dev 文件夹（即您放置源代码的位置）是项目根目录的子文件夹，然后将能够看到安装到项目根文件夹中的 npm 模块。

请注意，在我见过的许多前端设置中，惯例是调用 dev 文件夹 src。

【讨论】：

对不起，如果我听起来很愚蠢，但是我如何从我的 src 文件中尊重它？会是../node_modules/bootstrap/dist/css/bootstrap.min.css。如果是这样，我是否使用 gulp-concat 将引导程序与我编译的 sass 连接起来？
是的，上述方法可行，但在大多数情况下，您可以使用require 获取 npm 安装的代码...例如 require('bootstrap/dist/css/bootstrap.min.css')。如果您是前端构建的新手，我建议您跳过 gulp 并检查 webpack - 它允许您像需要 js 一样需要 css。它有一个学习曲线，但 gulp 也是如此，如果你什么都不知道，最好从一开始就学习更好的技术

【解决方案3】：

我会这样设置，将 app 文件夹用于开发目的，而 dist（如“分发”）文件夹用于包含生产站点的优化文件。

由于 app 用于开发目的，因此您的所有代码都将放在 app 中，并在您运行 gulp build 之类的内容时编译到 dist 文件夹中

  |- app/
    |- css/
    |- fonts/
    |- images/ 
    |- index.html
    |- js/ 
    |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json

【讨论】：