使用npm连接和缩小HTML / CSS / JS文件?

时间:2018-05-15 15:59:49

标签: javascript html css npm

我使用多个样式表来组织CSS代码和目录文件夹,但似乎不应该在CSS中使用@import吗?此外,它似乎也在整合您的代码(这是@import所做的)并缩小它(删除注释,空格,有时减少长变量)可以帮助加载网页上的加载时间

使用npm是否有有效的方法可以在旅途中进行连接和缩小?或者最好是全部开发,然后当它准备好分发以花时间来缩小和缩小时,而不是在构建页面时每次重新加载页面时都会发生

1 个答案:

答案 0 :(得分:1)

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

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

稍后,只要您说,是,现在满足所有要求并修复所有错误,您就可以开始生产。这编译或者更确切地说是在CSS中的TypeScript或ES6以及CSS中的SCSS,LESS等。此外,您的文件也会被压缩,从而减少加载时间。此外,您还拥有一个文件存储库,可以将其分发到您选择的服务器或其他发布服务。

在这个所谓的构建过程中,您可以创建一个publicdist(ributed)文件夹,其中存储了所有文件。与开发环境不同,开发环境只保留文件或多或少的临时文件。

热门处理库包括:

典型流程为:

  • 将许多文件传播到少数或更少的文件
  • 压缩和缩小
  • 将高级语言向下扩展为浏览器可读代码(例如 JS,CSS,HTML,JSON