Yeoman在ExpressJS中的使用

24

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

我尝试了以下内容,它“还好”,但我无法合并路由。(为了易读而过度简化)

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

然后我在Gruntfile.js中将"output:dist"改为"output:../../public"。

现在,两个服务器都可以正常运行(例如yeoman server和node app.js)。我现在也可以运行'yeoman build'将缩小后的JS输出到express应用程序中的/public目录中。

我有点不确定路由如何合并?我希望/能够调用Angular路线而不是express路线等。Github上的angular-express-seed示例看起来还不错,但我仍然希望将Yeoman集成到项目中。

任何建议将不胜感激。

6个回答

23
我建议使用以下结构来使用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')));

就是这样了。有一个要注意的地方,现在你有两个"index"文件——一个在views/index.jade,另一个在app/index.html。删除app/index.html目前会破坏yeoman,所以我的建议是删除app/index.jade的路由,并编辑index.html

希望这会有所帮助!


我想知道在 Yeoman 1.0 的新版本中,这是否仍然有效?此外,Yeoman 是否可以配置为构建 *.jade 文件并将其输出到 app 文件夹中? - Siyfion
1
@Siyfion 这仍然有效,但是grunt似乎出了问题(不知道为什么)。我希望在Yeoman中看到更多的jade支持。 - jjperezaguinaga
4
使用新的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非常结构化。 - Nick

8
这是另一种稍微不同的设置。
yo angular

更新Gruntfile.js文件,将配置从'app'更改为'public'。

然后执行:

express .

打开app.js文件,确保没有像这样的路由映射 app.get('/', routes.index); 这样做是为了让Node服务器可以提供index.html文件, 运行"grunt server"时加载的同一个文件。

现在删除public目录,然后将app目录移动到public目录下。

rm -rf public
mv app public

对我来说,看起来要更新得多。我会试一试一段时间。 - Saab
我唯一要补充的是将Express的app.js更改为server.js,以避免一些混淆。 - dustinmm80

2
这个项目似乎涵盖了所有要求(甚至还有MongoDB的可选支持):https://github.com/DaftMonk/generator-angular-fullstack 我刚在本地尝试过,它可以工作:
npm install -g generator-angular-fullstack

yo angular-fullstack [appname]

请查看GitHub页面以获取更多信息。

1
如果我有声誉,我会评论@btford的答案-
只想补充说明,在yo angular之后安装express .将覆盖由grunt创建的package.json文件,这将使grunt无法工作,正如@jjperezaguinaga报告的那样。
在安装express .之前,请确保保存package.json的副本。然后将以下依赖项添加到原始的package.json中:
"dependencies" : { 
  "express": "3.3.4",
  "jade": "*"
}

0

以下是其他人之前建议的步骤的汇编,但现在我们将其全部整合成数字步骤。这基于版本:Yeoman 1.0.4和Express 3.3.8。

1)创建您的项目目录并进入

2)安装angular:

yo angular

(如果您没有以su身份登录,则需要运行下面两行命令)

bower install
sudo npm install

3) 将 package.json 重命名为 package_yo.json (这样它就不会被 express 的 package.json 覆盖)

4) 安装 Express express -c less -Hs . (或者您想要的其他 express 选项)

sudo npm install

5) 删除Express的public目录并将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 start

(然后您应该在localhost:3000/上看到Yeoman的欢迎页面)


0
我在这个解决方案中遇到了麻烦: express仍然尝试加载index.jade而不是index.html,但如果我输入localhost:3000/index.html,express会正确渲染。 我通过从app.js中删除此行来解决它:
//app.get('/', routes.index);

希望这能有所帮助。感谢分享,D.

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接