ExpressJS 中的 Yeoman答案

【问题标题】：Yeoman inside ExpressJSExpressJS 中的 Yeoman
【发布时间】：2012-12-15 21:17:53
【问题描述】：

我仍然想尝试使用 Yeoman 和 Express 运行示例。

我尝试了以下方法，它“正常”工作，但我在合并路线时遇到了困难。（为了便于阅读，过度简化）

mkdir test
cd test
express
mkdir app
cd app
mkdir js
cd js
yeoman angular

然后我在 Gruntfile.js 中将“output:dist”更改为“output:../../public”

现在，两台服务器都可以自行运行（例如 yeoman 服务器和节点 app.js）。我现在也可以运行“yeoman build”，将缩小的 JS 输出到 express 应用程序中的 /public。

我对路线如何合并有点模糊？我想/拉起 Angular 路线而不是 express 路线等。github 上的 angular-express-seed 示例看起来不错，但我仍然希望 Yeoman 集成到项目中。

任何建议将不胜感激。

【问题讨论】：

标签： node.js angularjs express yeoman

【解决方案1】：

我会为 yeoman + expressjs 推荐这种结构：

mkdir app
cd app
yeoman angular
express .

所以你的目录树应该是这样的：

.
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── controllers
│   │   │   └── main.js
│   │   ├── vendor
│   │   │   ├── angular.js
│   │   │   ├── angular.min.js
│   │   │   ├── es5-shim.min.js
│   │   │   └── json3.min.js
│   │   └── yeoman-test.js
│   ├── styles
│   │   └── main.css
│   └── views
│       └── main.html
├── app.js
├── Gruntfile.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── user.js
├── test
│   ├── lib
│   │   └── angular-mocks.js
│   └── spec
│       └── controllers
│           └── main.js
├── testacular.conf.js
└── views
    ├── index.jade
    └── layout.jade

您可以删除现在多余的 public 目录（我们将改为从 app 提供服务）：

rm -rf public

现在在app.js，您需要更改从哪个目录提供静态文件。更改此行：

app.use(express.static(path.join(__dirname, 'public')));

到这里：

app.use(express.static(path.join(__dirname, 'app')));

应该就是这样。需要注意的是，您现在有两个“索引”文件——一个在views/index.jade，另一个在app/index.html。删除 app/index.html 目前会破坏 yeoman，所以我的建议是删除 app/index.jade 的路线，只需对 index.html 进行编辑。

希望这会有所帮助！

【讨论】：

我想知道Yeoman 1.0的新版本是否仍然有效？另外，Yeoman 现在是否可以配置为构建 *.jade 文件并将它们输出到 app 文件夹？
@Siyfion 这仍然有效，但 grunt 似乎坏了（不知道为什么）。我很想在约曼看到更多的玉恋。
有了新的yeoman，几乎是一样的。它现在是“yo angular”，并且生成了一个 package.json。在运行 express init 之前，将其重命名为“package_yo.json”，这样 express init 就不会覆盖它。运行express init，将package.json中的express和jade依赖复制到package_yo.json，删除package.json，将package_yo.json重命名回package.json。随着 yeoman 被拆分为 yo、bower 和 grunt，修改构建过程也变得更加容易，因为 yo 的 Gruntfile.js 结构非常好。

【解决方案2】：

这是另一个略有不同的设置

yo angular

更新 Gruntfile.js 以将配置从“app”更改为“public”。

然后做

express .

打开 app.js 并确保没有像这样的路由映射 app.get('/', routes.index); 这样节点服务器实际上会提供 index.html，与运行“grunt server”时加载的文件相同。

现在继续删除公共目录，然后将应用目录移动到公共

rm -rf public
mv app public

【讨论】：

对我来说似乎更新了很多。一会儿试试这个。
我唯一要宣传的就是将 express 的 app.js 更改为 server.js 以避免一些混乱

【解决方案3】：

这个项目似乎涵盖了所有的需求（甚至还有对 MongoDB 的可选支持）：https://github.com/DaftMonk/generator-angular-fullstack

我刚刚在本地尝试过，它可以工作：

npm install -g generator-angular-fullstack

yo angular-fullstack [appname]

查看 GitHub 页面了解更多信息。

【讨论】：

【解决方案4】：

如果我有声望，我会评论 @btford 的回答 -

只是想补充一点，在yo angular 之后安装express . 将覆盖 grunt 创建的 package.json 文件，这将破坏 grunt，正如 @jjperezaguinaga 报告的那样。

确保在安装 express . 之前保存 package.json 的副本。然后在原来的package.json中添加如下依赖：

"dependencies" : { 
  "express": "3.3.4",
  "jade": "*"
}

【讨论】：

【解决方案5】：

我在使用此解决方案时遇到了问题： express 仍然尝试加载 index.jade 而不是 index.html，但是如果我输入 localhost:3000/index.html express 正确呈现。我解决了从 app.js 中删除这一行的问题：

//app.get('/', routes.index);

希望这会有所帮助。感谢分享， D.

【讨论】：

【解决方案6】：

这里是其他人之前建议的步骤的汇编，但都在一个带有编号的步骤中。这基于版本：Yeoman 1.0.4 和 Express 3.3.8。

1) 创建你的项目目录并 cd 进入它

2) 安装角度：

yo angular

（如果您没有以 su 身份登录，则需要运行接下来的两行）

bower install
sudo npm install

3) 将 package.json 重命名为 package_yo.json （所以它不会被 express 版本的 package.json 覆盖）

4) 安装 Express 表达 -c 少 -Hs 。（或您想要的任何其他快递选项）

sudo npm install

5) 删除 Express 的公共目录并将 Express 的 app.js 中的路径的“public”更改为“app”： app.use(require('less-middleware')({ src: _dirname + '/app' })); app.use(express.static(path.join(_dirname, 'app')));

6) 删除 express' 默认路由 ( app.get('/', routes.index); ) （现在 express 将使用 angular 的 /app 文件夹中指定的路由

7) 启动服务器 npm 开始

（那么您应该会在以下位置看到 Yeoman 的欢迎页面：localhost:3000/）

【讨论】：