javascript - 如何在 Grunt/Gulp/Webpack 中从 Bower 连接带有图像和字体的 css 文件

标签 javascript css gruntjs gulp webpack

我有一个包含一些凉亭组件的元素。 我的 index.html 的头部看起来像:

<link href="js/vendors/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="js/vendors/jquery-ui-custom/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />

我想缩小和连接样式表。 是否有将所有 css 文件合并到一个包中并使用新的 bundle.css 文件将图像/字体复制到新目录中的解决方案?

我找到了 npm grunt-concat-css 但它似乎只是连接文件,我必须使用一些复制任务将图像和字体复制到新目录。

最佳答案

在 Gulp 中,我使用 npm 的 wiredep这样我的凉亭依赖项就会自动为我管理。

我自己连接和丑化了 vendor 的 js 和 css。我使用 useref 这样做这就像一个魅力。

此外,您可以使用 inject这样你自己的依赖就会被 gulp 自动维护。

注意:如果您决定使用 wiredep,则可以在每次安装/卸载时从 bower 调用 gulp 任务。这样您就永远不会……永远……不必考虑您的依赖关系。

关于javascript - 如何在 Grunt/Gulp/Webpack 中从 Bower 连接带有图像和字体的 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36203766/

相关文章:

javascript - Bootstrap : overlay loading screen + toggle jumbotron

php - 如何在不同域的另一个网页上加载外部网页的某个 div

jquery - 检测到水平 div 的末尾,并停止

javascript - 你如何运行多个 grunt scripts.postinstall?

javascript - 使用 grunt 包含位于不同文件夹中的 js 文件

javascript - 忽略 "enter"键并在文本输入中将焦点移动到 5 个字符后

javascript - 填充数组项上的映射函数后似乎为空

html - Font Awesome 图标不可点击

javascript - jQuery 绑定(bind)以切换元素的不透明度

docker - 使用 grunt-shell 调用调用 docker run 的脚本时如何解决 "the input device is not a TTY"?