javascript - 使用 npm 连接和缩小 HTML/CSS/JS 文件？

Question

我使用多个CSS样式表来组织代码和目录文件夹，但是，@import似乎不应该在CSS中使用？此外，连接代码(@import 所做的)并缩小代码(删除注释、空格，有时还减少长变量)似乎也有助于网页的加载过程

使用 npm 是否有有效的方法来随时随地连接和缩小？还是最好全部开发，然后当它准备好分发时花时间连接和缩小，而不是在构建页面时每次重新加载页面时都发生它

Answer 1

首先，您谈论的是两种不同的流程。 开发 和生产 环境之间存在区别。

作为开发人员，您自然会依赖于开发环境。建议在每次文件更改时重新编译文件。这些不必缩小，但与样式有关的所有内容(例如 SCSS 文件)都应转换为浏览器可读的格式，即 CSS。

稍后，只要您说“是的，现在所有要求都已满足并且所有错误都已修复”，您就可以开始生产。这在 JavaScript 和 SCSS、LESS 等中编译或转译 TypeScript 或 ES6。此外，您的文件被压缩，以减少加载时间。此外，您还有一个文件存储库，可以将其分发到您选择的服务器或其他发布服务。

在这个所谓的构建过程中，您创建一个public 或dist(ributed) 文件夹，其中存储所有文件.与开发环境不同，开发环境只是或多或少地临时保留文件。

流行的处理库是:

• Webpack
• Gulp
• Browserify
• Grunt等等。

典型的过程是:

• 将多个文件合并为几个或更少的文件
• 压缩和缩小
• 将高级语言转换为浏览器可读的代码(例如 JS、CSS、HTML、JSON)