如何在前端管理 CSS 库？答案

【问题标题】：How to manage CSS Libraries in the front end?如何在前端管理 CSS 库？
【发布时间】：2016-09-29 23:38:14
【问题描述】：

使用 node 和 browserify 可以轻松管理 js 依赖项，只需将其全部放入 bundle.js 文件并将其包含在父 html 中。

我想知道的是你们如何管理像 bootstrap 这样的库？

它们可以很好地下载到 node_modules，但是如何将它们放入您的 html 文件或资产文件夹中？

您是否直接从 node_modules 引用它们？有任务复制它们吗？等等？

注意，我希望在没有 browserify-css 插件的情况下执行此操作，因为我想将我的 css 和 js 分开。

【问题讨论】：

标签： css node.js twitter-bootstrap frontend web-frontend

【解决方案1】：

我个人有一个 Gulp / Grunt 工作流设置，其中包含我的 js/css 模块，然后它会自动完成所有重要任务，最后我只有一个 css 和 js 文件。然后我将它们导入 HTML。

我建议您为 gulp 或 grunt 创建任务，这将检查您决定的文件夹中的更改（库的下载位置）。如果有更改 - 它会自动将 .css 文件复制到另一个工作目录中。

我希望我能正确理解你想要什么。

【讨论】：

【解决方案2】：

我创建了一个小 Python 脚本，允许我将文件（.js、.css、.younameit）从目录导入到 html。

之前：

<html>
    <head>
    <!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
    </head>

之后：

<html>
   <head>
     <script src="../tsc_out/script1.js"></script>
    <script src="../tsc_out/script2.js"></script>
    <script src="../tsc_out/script3.js"></script>
    <script src="../tsc_out/script4.js"></script>
    <script src="../tsc_out/script5.js"></script>
  </head>

https://github.com/seven-jerry/html-importer

【讨论】：