node自動編譯_如何設計一個基於Nodejs和Express的網站架構

Ⅰ 如何使用Node.js編寫命令工具

Node 給前端開發帶來了很大的改變，促進了前端開發的自動化，我們可以簡化開發工作，然後利用各種工具包生成生產環境。如運行sass src/sass/main.scss dist/css/main.css即可編譯 Sass 文件。
在實際的開發過程中，我們可能會有自己的特定需求，
那麼我們得學會如何創建一個Node命令行工具。
hello world

老規矩第一個程序為hello world。在工程中新建bin目錄，在該目錄下創建名為helper的文件，具體內容如下：
#!/usr/bin/env node console.log('hello world');

修改helper文件的許可權：
$ chmod 755 ./bin/helper

執行helper文件，終端將會顯示hello world：
$ ./bin/helperhello world

符號鏈接

接下來我們創建一個符號鏈接，在全局的node_moles目錄之中，生成一個符號鏈接，指向模塊的本地目錄，使我們可以直接使用helper命令。

在工程的package.json文件中添加bin欄位：
{ "name": "helper", "bin": { "helper": "bin/helper" }}

在當前工程目錄下執行npm link命令，為當前模塊創建一個符號鏈接：
$ npm link /node_path/bin/helper -> /node_path/lib/node_moles/myMole/bin/helper/node_path/lib/node_moles/myMole -> /Users/ipluser/myMole

現在我們可以直接使用helper命令：
$ helperhello world

commander模塊

為了更高效的編寫命令行工具，我們使用TJ大神的commander模塊。
$ npm install --save commander

helper文件內容修改為：
#!/usr/bin/env node var program = require('commander'); program .version('1.0.0') .parse(process.argv);

執行helper -h和helper -V命令：
$ helper -h Usage: helper [options] Options: -h, --help output usage information -V, --version output the version number $ helper -V1.0.0

commander模塊提供-h, --help和-V, --version兩個內置命令。
創建命令

創建一個helper hello <author>的命令，當用戶輸入helper hello ipluser時，終端顯示hello ipluser。修改helper文件內容：
#!/usr/bin/env node var program = require('commander'); program .version('1.0.0') .usage('<command> [options]') .command('hello', 'hello the author') // 添加hello命令 .parse(process.argv);

在bin目錄下新建helper-hello文件：
#!/usr/bin/env node console.log('hello author');

執行helper hello命令：
$ helper hello ipluserhello author

解析輸入信息
我們希望author是由用戶輸入的，終端應該顯示為hello ipluser。修改helper-hello文件內容，解析用戶輸入信息：
#!/usr/bin/env node var program = require('commander'); program.parse(process.argv); const author = program.args[0]; console.log('hello', author);

再執行helper hello ipluser命令：
$ helper hello ipluserhello ipluser

哦耶，終於達到完成了，但作為程序員，這還遠遠不夠。當用戶沒有輸入author時，我們希望終端能提醒用戶輸入信息。
提示信息
在helper-hello文件中添加提示信息：
#!/usr/bin/env node var program = require('commander'); program.usage('<author>'); // 用戶輸入`helper hello -h`或`helper hello --helper`時，顯示命令使用例子program.on('--help', function() { console.log(' Examples:'); console.log(' $ helper hello ipluser'); console.log();}); program.parse(process.argv);(program.args.length < 1) && program.help(); // 用戶沒有輸入信息時，調用`help`方法顯示幫助信息 const author = program.args[0]; console.log('hello', author);

執行helper hello或helper hello -h命令，終端將會顯示幫助信息：$ helper hello Usage: helper-hello <author> Options: -h, --help output usage information Examples: $ helper hello ipluser $ helper hello -h Usage: helper-hello <author> Options: -h, --help output usage information Examples: $ helper hello ipluser

Ⅱ 如何用sublimeText3編寫less並用Nodejs自動編譯成css

1、安裝Sublime 插件
（1）安裝LESS插件：
因為Sublime不支持Less語法高亮，
所以，先安裝這個插件，
方法1： ctrl+shift+p>install Package>輸入less按Enter
方法2：直接下載後解壓文件放到插件文件夾下（首選項-瀏覽插件打開文件夾）
下載地址：https://github.com/danro/LESS-sublime
（2）安裝LESS2CSS插件：
less2css的讀音其實就是less to css
這個插件的作用是
當保存less文件的時候自動生成同名的css文件；
當保存less文件的時候提示編譯錯誤信息；
批量編譯項目目錄下的所有less文件為css文件。
安裝：
方法1：ctrl+shift+p>install Package>輸入less2css按Enter
方法2：直接下載：https://github.com/timdouglas/sublime-less2css
解壓文件放到插件文件夾下
但是我們還要讓sublime支持less並自動編譯，所以還需以下步驟：
2、安裝Node.js
首先先配置一下環境，
less需要nodejs支持，
所以我們先要安裝一下nodejs
到nodejs官網下載就可以了：https://nodejs.org/en/
3、安裝less
運行-cmd：
輸入命令行：
npm install less -g
-g 代表著全局安裝less
之後在 Sublime 裡面建less文件時，會有一個錯誤
LESS: Unable to interpret argument clean-css
這是因為還需要一個插件
less-plugin-clean-css插件的安裝
命令行為：
npm install less-plugin-clean-css -g
接著重啟一下sublime，就搞定啦！

Ⅲ 如何設計一個基於Node.js和Express的網站架構

推薦使用Webstorm打開項目。打開項目後，代碼結構如下圖所示：

在主體結構中從上到下介紹。 app 文件夾包含了所有後端代碼； build 文件夾中包含了最新資料庫備份； config 包含有網站整體的配置； logs 文件夾包含網站後端記錄的日誌文件； node_moles 是包含所有的 node.js 依賴包（源代碼中初始沒有此文件夾，運行 npm install 命令後所有載入的依賴包放置在此文件夾中）； public文件夾包含了所有的前端代碼，包括javaScript、less、圖片、Webfont等； .bowerrc中定義了 bower 管理前端庫的下載地址； bower.json 則配置了項目需要的前端庫；.jshintre-client 和 .jshintrc-server 分別為前後端JavaScript代碼規范檢查規則；.travis.yml 為[travis]（travis-ci.org/）自動編譯配置； app.js 為node.js啟動腳本文件； build.sh 為單獨編寫的自動發布bash命令；gruntfile.js為 grunt 配置文件；newrelic.js為 newrelic 的配置文件，用於監控網站性能； package.json 包含了所有node.js依賴包配置。
項目後端結構
項目後端代碼架構如下圖所示：

主要分為兩大部分： app 和 config 。 app 裡面按照職責不同來分類，每個腳本文件對應於不同的模塊； api 文件夾包含了所有api對應的業務邏輯代碼， helper 放置一些公用方法，如郵件發送、日誌記錄、資料庫連接等等； templates 放置的是靜態郵件模板； views 是後端頁面模板，使用了 handlebar 模板引擎，其中 http 中放置系統錯誤顯示頁面， layouts 放置模板頁； routes 是 express 對應的路由配置，所有的頁面和API的路由配置都在這個文件中。 config 文件夾中為系統配置，按照不同環境分為開發和現場兩個環境配置， all.js 放置共通配置， development.js 放置開發環境對應配置而 proction.js 放置線上環境配置。配置內容包括郵件發送、資料庫連接及一些第三方API所需的key等等。
項目前端結構
項目前端代碼結構如下所示：

前端代碼全部放置於 public 文件夾下。 data 目錄包含一些靜態json格式數據，後期可能會考慮放到資料庫中。 helper 中是瀏覽器下載引導頁面； images 包含了所有項目中用到的圖片，我們盡量使用第三方的圖片伺服器保存圖片，一些小圖標也盡量使用webfont。 JavaScripts 文件夾包含所有JavaScript文件，其中 app 子目錄放置業務代碼，業務代碼都是按照業務不同封裝成了不同的 angularjs controller； debug 子目錄放置調試用代碼，而 libs 方式前端JavaScript庫，項目中使用得JavaScript庫有angularjs 、 jQuery 及一些插件； clients.js 是所有ajax請求函數； erealm.js 是angularjs的主模塊； language.js 包含了所有多語言配置，目前支持中英文。stylesheets 包含了所有的css樣式及webfont，除了第三方庫之外，自定義的樣式全部使用了 less 。作為一種慣例，項目中添加了 humans.txt 文件，表明項目的作者信息。有關humans.txt，可以參考官方網站 humans.txt 。
自動化構建工具
項目自動化構建使用 grunt 。grunt的使用涉及開發、調試、發布階段。開發階段使用了圖片壓縮和前端代碼格式美化，使用的工具是 imagemin 和 jsbeautifier ，運行grunt prepare 命令。調試階段使用了代碼規范檢查、less編譯、自動添加瀏覽器前綴、自動載入運行nodejs並打開瀏覽器、實時監控代碼變化並刷新頁面等。開發中，使用 grunt 命令即可，為默認grunt命令。發布階段包含了JavaScript及css合並壓縮，並在文件路徑上添加哈希值來避免瀏覽器緩存問題，同時刪除開發環境中使用的代碼，使用 grunt build 命令即可把代碼切換為發布環境。
具體的使用grunt方法及相關工具的介紹，後期會有專門的技術文章講解，這里不會詳細設計技術細節。
後期持續的改進點
項目完成的比較倉促，但是我們盡量保持代碼的整潔和可維護性，一些編碼方式也借鑒當前流行的最佳實踐。但理想是美好的，現實總是不會做到那麼完美，需要不斷的完善。目前存在的問題是後端代碼結構不夠清晰、整體代碼中無用代碼還沒有來得及移除。框架上期望把 jQuery 去掉，只使用 Angularjs ，目前只做到了盡量不用jQuery 中的方法。小圖標的使用上 Bootstrap 和 Font Awesome 重復，後期會逐步刪除 Font Awesome 而只使用 Bootstrap 中帶的小圖標。目前，最大的問題是項目沒有完整的自動化測試，這個後期會逐步添加。
總結
以上是這個開源項目的整體技術結構介紹。在這個項目中，我們會持續使用最流行的Web技術，希望得到大家的持續關注，如果有開發者能一塊貢獻一些代碼，我們將會非常高興。我們已經在github.io上構建了一個技術平台來發布Web技術文章，網址是blog.erealm.cn。博客網址也同樣開源，使用了 Jekyll 構建。 Jekyll 非常強大，最大的特點是使用markdown格式來發布文章。博客的代碼在這里： github 。
我們做這個開源的項目的目的有兩個，其一是通過這個項目來展示我們做Web項目的實力，及培養團隊技術水平。其二是藉助這個項目，能和同行們有個技術上的互動和交流。如果我們的項目能讓一些新手們學到一些做Web項目的經驗，我們就很知足了。技術是不斷革新的，而國內Web技術向來是落後於國外好幾年，這個是不爭的事實。我們erealm團隊樂意為國內Web貢獻自己的力量，也歡迎國內同行們和我們交流Web開發經驗。

Ⅳ ghost博客如何通過源碼初始化安裝

官方推薦的是cli模式安裝，不過，大家還都是喜歡源碼安裝的，對吧。在本文中，蘇南大叔就先說說源碼安裝的那些事。按照慣例，蘇南大叔先公布正確答案。

Bash
node -v #node版本是7或者8的話，是不能安裝的
sudo cnpm install
sudo cnpm install -g knex-migrator
knex-migrator init #測試
npm start #測試
vi ./core/server/config/env/config.proction.json #正式
knex-migrator init --proction #正式
npm start --proction #正式
第一步，確認node版本
ghost對node版本是有要求的，雖然官網上並沒有進行說明。但是，實踐證明，到本文寫作時為止，ghost版本為1.8.6。當node版本是7或者8的時候，ghost會出現非常奇怪的問題。我們的所有的工作都要重新來過。所以，切記，node版本要選擇好，6最佳。

蘇南大叔個人認為，這個可能是ghost博客程序，對node官方的致敬之意。畢竟node官方目前推薦大家使用的穩定版是6，而不是7或者8。

第二步，下載壓縮包，npm安裝

下載得到壓縮包之後，我們常規運行npm的安裝命令。

Bash
sudo cnpm install
您很有可能得到如下node-pre-gyp的iltrob或者sqlite的錯誤提示：

不必理會這些提示，它只是沒有找到預編譯好的文件，而接下來，腳本會自動編譯對應的庫文件。

第三步，遷移資料庫
使用是knex-migrator這個工具，我們需要先全局安裝這個工具。然後，使用knex-migrator init來初始化資料庫。值得說明的是：對於ghost來說，默認情況下，是測試環境，使用sqlite資料庫，而對於生產環境，使用的才是mysql資料庫。而是測試環境還是生成環境，僅僅是用參數--proction來進行區分的。

當使用sqlite資料庫的時候，實際的資料庫文件路徑為：./content/data/ghost-dev.db 。

當使用mysql資料庫的時候，還需要編輯配置文件：
./core/server/config/env/config.proction.json。

第四步，啟動網站

Ⅳ webpack怎麼自動編譯reactjs

使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。

react安裝

當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。

# npm install react react-dom –save

react安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。

react解析器babel安裝

babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。

# npm install babel-core babel-loader babel-preset-react –save-dev

//本地安裝

#npm install babel-core babel-loader babel-preset-react –g

//全局安裝

一般情況下我們選擇本地安裝，這樣便於管理。

打包工具webpack的安裝

同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。

# npm install webpack –save-dev

//本地安裝

# npm install webpack –g

//全局安裝

如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。

這里我們選擇全局安裝。這樣才能出現我們將要說的問題。

webpack配置文件編寫

安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。

代碼一

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

query:{

presets:['react']

}

}

]

}

編譯過程中出現的錯誤

好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。

接下來我們就要編譯打包我們的項目。

# webpack

執行該命令以後，你會發現出現如下的錯誤：

ERROR in (webpack)/~/node-libs-browser/~/process/browser.js

Mole build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"

……

這也就是說找不到babel-preset-react。

好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。

解決問題的方式

出現上述問題以後，我們有這樣三種方式可以解決。

方式一

要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。

query:{

presets:['react']

}

好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。

#npm remove babel-core babel-loader babel-preset-react –save-dev

//首先移除原先安裝的babel

#npm install babel-core babel-loader babel-preset-react –g

//全局安裝

沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。

方式二

此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。

# npm remove webpack –g

//移除原先的webpack

# npm install webpack –save-dev

//將webpack安裝到本地位置——也就是項目目錄下的node_moles中

# ln –s /項目根目錄/node_moles/webpack/bin/webpack.js /usr/bin/webpack

//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）

//這樣我們就可以在任意位置直接使用webpack命令了。

此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。

此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。

方式三

該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。

代碼二

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

exclude:/node_moles/,

query:{

presets:['react']

}

}

]

}

Ⅵ node.js怎麼安裝node moles

1、想要使用Node.js，必須先配置開發環境。進入Node.js官網下載指定平台安裝包（nodejs.org），Windows系統下載安裝紅框的安裝包，macOS 下載安裝藍框的安裝包，看清楚自己電腦是32位還是64位。一直下一步直到完成就好。

2、配置開發環境完畢後，在cmd控制面板輸入node(空格)--version或者node(空格)-v，回車後會立即得到一個結果，而這個結果就是Node.js的版本號，即安裝成功。

Ⅶ 如何用sublimeText3編寫less並用Nodejs自動編譯成css

1、安裝Sublime 插件

（1）安裝LESS插件：
因為Sublime不支持Less語法高亮，
所以，先安裝這個插件，

方法1： (首先確保sublime上已安裝了Package Control) 按住ctrl+shift+p>install Package>輸入less按Enter
方法2：直接下載後解壓文件放到插件文件夾下（首選項-瀏覽插件打開文件夾）
下載地址：https://github.com/danro/LESS-sublime

（2）安裝LESS2CSS插件：
less2css的讀音其實就是less to css
這個插件的作用是
當保存less文件的時候自動生成同名的css文件；
當保存less文件的時候提示編譯錯誤信息；
批量編譯項目目錄下的所有less文件為css文件。

安裝：
方法1：ctrl+shift+p>install Package>輸入less2css按Enter
方法2：直接下載：https://github.com/timdouglas/sublime-less2css
解壓文件放到插件文件夾下

但是我們還要讓sublime支持less並自動編譯，所以還需以下步驟：

2、安裝Node.js

首先先配置一下環境，
less需要nodejs支持，
所以我們先要安裝一下nodejs
到nodejs官網下載就可以了：https://nodejs.org/en/

3、安裝less

運行-cmd：
輸入命令行：

npm install less -g

-g 代表著全局安裝less

之後在 Sublime 裡面建less文件時，會有一個錯誤
LESS: Unable to interpret argument clean-css

這是因為還需要一個插件
less-plugin-clean-css插件的安裝
命令行為：

npm install less-plugin-clean-css -g

接著重啟一下sublime，就搞定啦！

Ⅷ node-sass使用python2

可以使用
nodesass是一個庫，它將Node.js綁定到LibSass【流行樣式表預處理器Sass的C版本】，它允許用戶以令人難以置信的速度將【.scss】文件本地編譯為css，並通過連接中間件自動編譯。Sass是一種預處理器腳本語言，可以解釋或編譯成層疊樣式表（CSS）。

Ⅸ nodejs內置模塊有哪些

一、Express框架

前面的章節已經介紹過了，可以使用npm來安裝node.js模塊。具體操作請參照以前寫的nodejs概論。

Express是一個nodejs的web開源框架，用於快速的搭建web項目。其主要集成了web的http伺服器的創建、靜態文本管理、伺服器URL地址請求處理、get和post請求處理分發、session處理等功能。

使用方法，在cmd中打開你所想創建web項目的路徑。然後輸入

Express appname

即可創建一個名為appname的web項目。控制台列印結果

在jada文件中是可以使用for循環和if判斷語句的，可以讓你體會類似JSP的<%%>和php的<php></php>在網頁上輸出數據的快感。

三、forever模塊

nodejs作為http伺服器，需要確保服務順利進行，要注意一下兩點：

1.後台服務運行，監控運行日誌，以及http運行日誌；

2.確保項目的正常安全運行，Node.js的啟動命令node，很大程度無法滿足運行需求；

Node.js的forever模塊在第二點就可以起到很大的作用，同時其擁有監控文件更改、自動重啟等功能。

forever模塊的使用方法有兩種：1.在命令行中使用

forever -l forever.log -o out.log -e err.log app.js
-l forever.log -o out.log -e err.log分別指定了forever的運行日誌，腳本流水日誌，腳本運行錯誤日誌，啟動後將在本文件夾下產生out.log、err.log文件。

2.在編碼中require forever模塊使用。

四、Socket.IO模塊

Socket.IO模塊主要功能是將WebSocket協議應用到所有瀏覽器。主要用於實時的長連接多求情項目中。

例如：在線聯網游戲，實時聊天、實時股票查看、二維碼掃描登錄等。

安裝方法仍然是在cmd在中輸入npm install socket.io

如何使用Socket.IO來創建一個項目。

需要分別實現服務端和客戶端的邏輯：

先創建一個服務端的node.js腳本index_server.js

其中，socket.emit()為Socket發送消息的函數，第一個參數表示發送消息的key值，第二個參數為發送消息的內容，也就是發送的數據。

Socket。on()為Socket接收消息的函數，第一個參數為接收消息的可以值，第二個參數為回調函數，其中回調函數攜帶的參數為接收消息所發送的數據。

接下來web前端如何使用JavaScrit 來連接Socket伺服器。

新建一個index_client.html

socket.io詳細請參閱 http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264

五、request模塊

request模塊為開發者提供了一種簡單訪問HTTP請求的方法。request還支持HTTPS的訪問方法。

安裝：

npm install requset

request模塊基本上覆蓋了所有的HTTP請求方式如GET，POST，HEAD，DEL等。但其最基本的兩個方法是request.get()和request.post().

get和post的區別

get：

1.使用get向伺服器發出和接收的請求會附在url之後。類似：http://www..com？id=1221&name=5555這個url中傳遞了兩個參數，一個為id，一個為name。

2.get請求不能超過1024個位元組。

post沒有限制，也不會附在url上。

接下來做一個簡單的實例

get實例：

首先新建一個伺服器app_get.js

var http= require("http");
http.createServer(function(req,res){
res.writeHead(200,{'content-Type':'text/plain'});
res.end('Hello world '+req.method);
}).listen(1337,"127.0.0.1");

再建一個發送求情的request_get.js文件

var request=require('request');
request.get("http://127.0.0.1:1337",function(error,response,result){
console.log(result);
});

在CMD中運行app_get.js，運行成功後，再打開一個cmd（之前的cmd不要關閉），執行request_get.js文件。

執行後的結果如下

hello world
GET

可以看出，通過request.get方法訪問

http://127.0.0.1:1337 返回的結果就是res.end（）的參數

post實例：
和上面一樣，先新建伺服器app_post.js

然後再新建一個request_post.js

var request=require("request");
request.post('http://127.0.0.1:1400',{form:{'name':'ermu','book':'node.js'}},function (error,response,result) {
console.log(result);
})

像上面一樣在cmd中執行後顯示的結果如下：

D: odejssrc equest>node request_post.js
{"name":"ermu","book":"node.js"}
POST

request post提交了一個json對象{"name":"ermu","book":"node.js"}而伺服器接通過獲取該POST數據，然後返回客戶端，同時將http請求方式也響應到客戶端。

request post參數可以有兩種傳遞方式。

其中，第一種是將url和form表單的數據作為json參數在request post傳遞。舉例如下：

request.post('url':'http://127.0.0.1:1400',form:{'name':'ermu','book':'node.js'}},function (error,response,result) {
console.log(result);
})

另一種是將url和form作為兩個參數，上面的實例就是使用這種方法。

六、 Formidable模塊

該模塊的目的是為了解決文件上傳。

在原生的node.js模塊中，提供了獲取post數據的方法，但是並沒有直接獲取上傳文件。

導航:首頁 > 源碼編譯 > node自動編譯

node自動編譯

與node自動編譯相關的資料