如何在 codekit 中使用 Bower 组件

Question

我已经在 codekit 的一个新项目中安装了以下组件：

jquery 动画.css 标准化 现代化者

我了解建议将这些组件保存在 bower 目录中，以便轻松更新这些文件。但是，我们是否直接在我们的 html 文件中链接到这些？我的 sass 文件被编译并输出到 assets/css，但是 bower 组件中没有任何 sass 文件，如果我要升级，我认为在原始文件夹中创建它们会被覆盖。将整个 bower_components 文件与所有依赖文件一起上传到生产服务器对我来说似乎很奇怪。我已经在没有所有这些节点、git、grunt、bower 等东西的情况下构建站点很长时间了。我看到了它的价值，但我很难跟上进度。任何帮助都将不胜感激。

Answer 1

在大多数情况下，您可能希望将第三方组件（例如 css、javascript、... 文件）包含在您自己的主 css 或 javascript 文件中，然后将该文件最小化以用于生产。例如，我的文件夹结构如下：

    bower_components/
        ...
    release/
        css/
            styles.min.css
        img/
            ...
        js/
            scripts.min.js
    src/
        images/
            ...
        scripts/
            scripts.js
        styles/
            styles.less
        templates/
            ...

然后，在styles.less 内，我可能有：

@import (less) "../../bower_components/normalize-css/normalize.css";

或者在scripts.js 内我可以：

//@codekit-prepend "../../bower_components/jquery/dist/jquery.js"

我已将 CodeKit 设置为从这些文件中生成 release/ 中的缩小版本。唯一投入生产的文件是 release/ 文件夹中的所有文件。