通过 NPM install 使用 Zurb 的 Foundation答案

【问题标题】：Using Zurb's Foundation via NPM install通过 NPM install 使用 Zurb 的 Foundation
【发布时间】：2013-03-21 15:13:14
【问题描述】：

我对使用 nodejs 和 npm 还很陌生，所以请原谅我的幼稚。我想在我最新的项目中使用 Foundation 并使用 npm 来安装它。这已经奏效，我的node_modules 现在包含基础目录。

我现在如何在我的标记中使用 Foundation？我有一个 /public 目录，其中包含我的观点，但指向 node_modules 目录的引用肯定是不好的做法吗？我是否在app.js 中为基础目录中的文件创建自定义路由？我不确定最佳做法是什么？

帮助表示赞赏。

【问题讨论】：

标签： node.js express npm zurb-foundation

【解决方案1】：

使用 npm 安装 Foundation

npm install foundation-sites

然后，将 Foundation 的文件复制到您的 Web 服务器并使用 <link> 标签引用它。

使用 Bower 安装 Foundation

bower install foundation

然后，将 Foundation 的文件（或整个 bower_components 目录）复制到您的 Web 服务器并使用 <link> 标签引用它。

Foundation 的 GitHub page 和他们的 Getting Started page 提供了有关建立 Foundation 的不同方式的更多信息。

【讨论】：

【解决方案2】：

您需要将 Foundation 注册为手写笔插件。如果您使用的是 connect 或 express，请尝试以下操作：

var express = require('express'),
    stylus = require('stylus'),
    app = express();

app.use(stylus.middleware({
    compile: function (str, path) {
        return stylus(str)
            .set('filename', path)
            .use(require('foundation')());
    }
}));

然后在你的样式文件中你可以

@import "foundation"

【讨论】：

【解决方案3】：

您也许可以提取基础代码。 git://github.com/ch1c0t/bower-foundation-css.git 或 git://github.com/mmcgahan/sass-foundation.git。 Bower 是一个类似于 npm 的客户端包管理器，但面向客户端。 http://bower.io/

【讨论】：

【解决方案4】：

我认为您对 NodeJS 有误解。网站中的 NodeJS 是 PHP、ASP 或 Ruby 等后端。

Foundation Framework 是一个 CSS 框架，所以它是为客户端而设计的。

要在由 NodeJS 运行的网站中使用它，只需将您在 Zurb website 下载的库放在公共目录中，然后在您的视图中使用它，如下所示：

<link rel="stylesheet" href="styles/foundation.css">

【讨论】：

所以我不能使用npm来获取最新版本的Foundation？我是否只是将必要的文件从 node_modules 移动到我的公共（从服务器到客户端）？
我不明白你为什么要通过 npm 获取它。 NPM 用于服务器，您的库用于客户端。
啊它使用手写笔。你使用 Stylus 还是更喜欢 CSS？
谢谢，我终于搞定了。我只是将基础文件放在我的public/css 目录中。错误是使用 npm 将其拉下。
对于任何想要使用像 NPM 这样的包管理器的人，请使用 Bower (bower.io) 作为客户端组件。从技术上讲，询问如何从 NPM 中提取 Foundation 并没有错，因为它确实有一个 JavaScript 库。此外，如果有人在使用类似 browserify 的东西，那么看看 Foundation 是否可以通过 NPM 加载也不是一个疯狂的问题。还有一点，Node 不像 PHP、ASP 或 Ruby，而是 JavaScript，Node 作为网站后端更类似于 Apache 或 Nginx，因为您将其用于网络服务器。