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



不确定这是否是问这个问题的正确地方,所以请耐心等待。

我对构建系统/前端工作流很陌生,并且严重依赖 IDE 内置系统来为我完成工作,例如将 Sass 编译为 css。

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

  1. 我不明白的是,如果通过 npm 安装引导程序,它会添加 到这两个文件夹之外的node_modules文件夹中。我是吗 在这里做错了什么?因为我 cd 进入开发文件夹,但还没有 它将其安装在根文件夹中。
  2. 如果我 必须从node_modules获取文件
  3. Angular也是如此,它安装在node_modules文件夹中。 我如何从那里访问代码到我的开发文件夹,然后将其编译到我的构建中。

这适用于节点解析模块的方式。如果你安装一个像gulp这样的模块,你将有一个类似于这样的结构:

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

为了将gulp导入到脚本中,您只需使用require('gulp')(如果您使用的是 EcmaScript6,则import gulp from 'gulp'),节点将找到查找此模块的位置。

您可以从gulpfile.jssrc/index.js执行此操作。Node 将尝试在脚本文件夹或任何父文件夹中查找node_modules文件夹。

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

请注意,在我看到的许多前端设置中,约定是将该文件夹称为devsrc

我会这样设置它,将应用程序文件夹用于开发目的,而 dist(如在"分发"中)文件夹用于包含生产站点的优化文件。

由于应用程序用于开发目的,因此您的所有代码都将放置在应用程序中,并在运行类似gulp build

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

相关内容

  • 没有找到相关文章

最新更新