2012-12-31 41 views
24

我仍然想嘗試獲得一個運行w/Yeoman和Express的例子。Yeoman裏面ExpressJS

我嘗試了以下內容和它的工作「好」,但我堅持合併路線。 (在簡化可讀性)

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

然後,我改變「輸出:DIST」到「輸出:../../公」在Gruntfile.js

現在,兩臺服務器上運行他們沒關係自己的(例如yeoman服務器和節點app.js)。我現在也可以運行'yeoman build'來在快速應用中輸出縮小的JS到/ public。

我有點模糊的路線會如何合併?我希望/拉起Angular路線,而不是快速路線等.Github上的角度表達種子示例看起來沒問題,但我仍然希望將Yeoman集成到項目中。

任何建議,將不勝感激。

回答

23

我會推薦這個結構自耕農+ 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 

d現在在app.js中,您需要更改從哪個目錄提供靜態文件。改變這一行:

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

這樣:

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

這應該是它。有一個careat,你現在有兩個「索引」文件 - 一個在views/index.jade,另一個在app/index.html。刪除app/index.html目前打破yeoman,所以我的建議是擺脫app/index.jade的路線,只需編輯index.html

希望這會有所幫助!

+0

我懷疑新版本的Yeoman 1.0是否仍然有效?另外,Yeoman現在是否可以配置生成* .jade文件並將它們輸出到應用程序文件夾? – Siyfion

+1

@Siyfion這仍然有效,但咕嚕似乎打破(不知道爲什麼)。我很想在Yeoman看到更多的玉愛。 – jjperezaguinaga

+4

隨着新手的變化,它幾乎是一樣的。它現在是「喲角」,並且生成了一個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從「應用」到「公開」更改配置。

然後執行

express . 

開放app.js並確保有這樣app.get( '/',routes.index)沒有路由映射; 這樣節點服務器實際上會提供index.html,這是運行「grunt server」時加載的相同文件。

現在繼續和刪除公共目錄,然後移動app目錄公共

rm -rf public 
mv app public 
+0

似乎很多更新到我。要嘗試一段時間。 – Saab

+0

我唯一要做的就是改變'app.js到server.js以避免混淆 – dustinmm80

0

我有麻煩與此解決方案: 快遞仍試圖加載,而不是index.html的index.jade,但如果我輸入localhost:3000/index.html正確表達渲染。 我解決了刪除這條線從app.js:

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

希望這有助於。感謝分享, D.

1

如果我有我的聲譽將在@btford的答案評論 -

只是想補充一點,yo angular後安裝express .將覆蓋咕嚕創建的package.json文件,將會像@ jjperezaguinaga報道的那樣打破咕嚕聲。

確保在安裝express .之前保存package.json的副本。然後將下面的依賴關係添加到原來的package.json:

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

這裏有其他人在前面建議的步驟編譯,但於一身,在編號的步驟。這是基於以下版本:Yeoman 1.0.4 & Express 3.3.8。

1)創建項目目錄,並進入這個

2)安裝角:

yo angular 

(需要運行接下來的兩行,如果你沒有登錄爲SU)

bower install 
sudo npm install 

3)重命名的package.json到package_yo.json (所以它不是由的package.json快遞版本覆蓋)

4)安裝Express express -c less -Hs。 (或任何其它快遞你想要的選項)

sudo npm install 

5)刪除快捷的公共目錄&變化‘公’到‘’在快速的路徑app.js應用: app.use(要求(」 less-middleware')({src:_ dirname +'/ app'})); (express.static(path.join( _dirname,'app')));

6)刪除快速默認路由(app.get('/',routes。指數); ) (現在快遞將使用角度的/ app文件夾,而不是

7規定的航線)啓動服務器 NPM啓動

(那你應該看到約曼的歡迎頁面在:本地主機:3000 /)