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

我不确定这是不是问这个问题的合适地方，所以请耐心听我说

我对构建系统/前端工作流非常陌生，并且在很大程度上依赖IDE内置系统为我完成工作，例如将Sass编译为css

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

我不理解的是，如果通过npm安装引导程序，它会添加 在这两个文件夹之外的node_modules文件夹中。我是吗 这里做错什么了？因为我把cd放到了dev文件夹中 它将其安装在根文件夹中

如果我 必须从节点_模块获取文件

Angular也是如此，它安装在node_modules文件夹中。如何将代码从那里访问到我的dev文件夹，然后将其编译到我的构建中

---

这适用于节点解析模块的方式。如果您安装了一个类似于

gulp

的模块，那么您的结构与此类似：

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

为了将

gulp

导入到脚本中，您只需使用

require（'gulp'）

（或者

import gulp from'gulp'

，如果您使用的是ECMAScript 6），node就会找到该模块的查找位置

---

您可以从

gulpfile.js

或

src/index.js

中执行此操作。节点将尝试在脚本文件夹或任何父文件夹中查找

Node\u modules

文件夹。

对于大多数前端生成系统，Node\u modules文件夹实际上位于项目文件夹的根目录下。您的

dev

文件夹（即您放置源代码的地方）是项目根目录的子文件夹，然后将能够看到安装到项目根目录文件夹中的npm模块

---

请注意，在我看到的许多前端设置中，惯例是调用

dev

文件夹

src

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

由于应用程序用于开发目的，所以当您运行类似于

gulp build的程序时，您的所有代码都将放在应用程序中，并将编译到dist文件夹中

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

对不起，蒂亚戈，你说的话我一个字也听不懂。我知道我需要gulpfile.js中的gulp和所有gulp插件。但是，我不明白如何使用引导和/或如果我使用dev build中的angular（如果它位于根文件夹中的dev文件夹之外），然后将其编译到build文件夹中。抱歉，如果我听起来很愚蠢，但我如何从src文件中尊重它？它是../node_modules/bootstrap/dist/css/bootstrap.min.css。如果是这样的话，我应该在编译的sass中使用gulp concat to concat引导程序吗？是的，上面的方法可以工作，但是在大多数情况下，您可以使用
require
获取npm安装的代码。。。例如require（'bootstrap/dist/css/bootstrap.min.css'）。如果你是新的前端构建，我建议你跳过吞咽和检查网页包-它允许你需要css的方式相同，你需要js。它有一个学习曲线，但吞咽也是如此，如果你什么都不知道，最好从一开始就学习更好的技术