Node+Express+MongoDB + Socket.io搭建實時聊天應用實戰教程(三)--先後端環境配置

前言

以前都是介紹一些基礎知識，在這一節，咱們就要開始實戰coding了。正所謂磨刀不誤砍柴工，準備工做顯得尤其重要。不少demo只是追求效果的實現，並不注重整個demo的架構性。從我我的的角度看來，既然是demo，就應該是有參考價值的，而做爲web的demo，就更加應該凸顯整個demo的結構，因此這一節着重講解我的喜歡的node項目的先後端架構。
另，本教程乃系列教程，如需從頭看起，可先看前面兩篇博客：
http://www.cnblogs.com/yuanzm/p/4179766.html
http://www.cnblogs.com/yuanzm/p/4205891.html
源代碼地址是：https://github.com/yuanzm/Node-Chat-Demo

後端架構之Express框架

和大多實戰demo同樣，咱們的後端會採用Node的官方推薦框架Express。根據Express官網的定義：Express 是一個簡潔而靈活的 node.js Web應用框架, 提供一系列強大特性幫助你建立各類Web應用。之因此選擇框架而不是採用原生開發，主要有兩個緣由。其一，框架幫助咱們抽象出了不少功能，能幫助咱們快速搭建Web應用;其二，用Express新建的項目，自己具備很是優秀的MVC架構，可以讓咱們更加良好的管理咱們的項目。

• Express安裝
  Express的安裝很是簡單，只須要採用在CMD窗口輸入npm install -g express便可，其中-g表明全局安裝。這個命令默認安裝的就是最新版本的Express。爲了驗證Express是否安裝成功，一般在命令行輸入express -V查看版原本確認。
  
  如圖所示，輸入如上命令時出現了「‘express’不是內部或者外部命令，也不是可運行的程序或者批處理文件」提示。原來,最新express4.0版本中將命令工具分家出來了(項目地址:https://github.com/expressjs/generator),因此咱們還須要安裝一個命令工具,命令以下：
  npm install -g express-generator
  
  到這一步，咱們成功安裝了最新的Express，也就是v 4.11.2。
• 新建一個Express項目
  新建一個Express項目很是簡單，只須要在命令行輸入express project-name便可。須要注意的是，在新建Express項目的時候，須要指定前端模板引擎。根據百度百科的定義，模板引擎（這裏特指用於Web開發的模板引擎）是爲了使用戶界面與業務數據（內容）分離而產生的，它能夠生成特定格式的文檔，用於網站的模板引擎就會生成一個標準的HTML文檔。Express默認採用的模板是jade模板，咱們的demo也將採用這這個模板，因此不須要手動指定。本實戰教程中，咱們新建一個名爲Node-Chat-Demo的項目。在命令行先輸入express Node-Chat-Demo，而後按照提示輸入cd Node-Chat-Demo && npm install就完成了後端基礎環境的搭建。下面是這一步以後的文件目錄截圖(其中LICENSE之後的爲Git管理須要的文件，可忽略)：
  
• 項目簡介

1. bin是express自己配置的啓動文件，咱們將不採用，可忽略
2. node_modules是後端使用的node插件
3. public防止了前端文件
4. routes是express的路由模塊
5. view是express的模板引擎放置的地方
6. app.js是express項目的配置文件，也能夠算是項目入口文件
7. package.json聲明聲明項目中使用的模塊

• 項目啓動
  Express項目的啓動有本身獨特的方式--npm start，可是博主嘗試以後發現這個並不能監聽文件變化，也就是在文件更改的時候須要從新啓動項目，這在調試的時候就會顯得很是麻煩。針對這種狀況，咱們將採用一個叫作supervisor的npm包，npm包的主頁是supervisor。安裝也很簡單，只須要在命令行輸入npm install supervisor -g全局安裝便可。而後咱們在app.js的33行後面加入兩行：
  app.listen(3000); console.log("Listening on port 3000")。
  
  最後只須要在項目根目錄輸入supervisor app.js就可以在監聽文件變化模式下啓動咱們的項目了。
  
  
  到這裏後臺就已經搭建好了，接下來說解前端架構。

前端架構以前端自動化工做流

前端給不少開發者的印象就是一堆HTML和CSS和Javascript，雜亂無章和沒有難度。其實否則，正由於Web前端開發零散化的特性，使得前端架構尤其重要。什麼叫零散化特性呢，這是和後臺開和安卓開發等對比而來的。在安卓開發中，有強大的Eclipse，新建一個項目，整個架構徹底給你搭建好了，不用本身操心。對於傳統的後臺開發，常常採用各類MVC框架好比咱們剛剛採用的Express，一行命令一樣把結構什麼的全給你弄好了。可是前端就徹底不同了，由於他只是整個項目的一個組成部分，一般沒有特定的結構，常常是一堆css和js在須要的時候出現，顯得尤其零散。固然正是由於這種特性才讓前端開發顯得更加靈活和有意思，在這個實戰教程中，將採用本人本身總結的一套自動化工做流，力求維持項目的有序性。這個自動化工做流主要採用了browserify、Sass、Grunt，下面逐一介紹。

• 前端模塊化之browserify
  
  這裏特指前端模塊化是由於後端的Node自己良好支持了模塊化開發，前端的Javascript暫時還不支持模塊化開發，或者說離模塊化普遍推行的一天還有很長一段時間。爲了可以在前端使用模塊化的編程思想，能夠採用強大的browserify。什麼是browserify呢？Browserify 經過預編譯的方法，讓Javascript前端能夠直接使用Node後端的程序。咱們能夠用一套代碼完成先後端，不只工做量變少了，程序重用性加強，還能夠直接在瀏覽器中使用大量的NPM第三方開源庫的功能。直觀一點表達就是經過browserify，咱們能夠像寫Node同樣把每一個js文件看成一個模塊，實現特定的功能，最終只暴露模塊接口。browserify會分析咱們的模塊引入順序，造成一棵模塊依賴樹，最終能夠只生成一個js文件。最終只生成一個js文件的好處是顯而易見的，瀏覽器下載200k的文件和下載幾k的文件所用的時間並不會差異很大，把全部文件合在一塊兒會加快頁面加載速度。從互聯網結構的角度來看，這樣可以大幅度減小http請求的數量，提升網站性能。對於怎麼使用browserify，這裏不作累贅，會在後面的教程和介紹Grunt時一併說起，這裏只附上Browserify官網主頁
• CSS預處理器之Sass
  
  咱們知道，CSS是沒有語法的，因此寫CSS實際上是一件很是煩人的事情。很天然地，有人就開始爲CSS加入編程元素，這被叫作"CSS預處理器"（css preprocessor）。它的基本思想是，用一種專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。在本實戰教程中，咱們選擇Sass。Sass是CSS的一個擴展,它使CSS的使用起來更加優雅和強大。簡而言之，Sass能夠理解成CSS的超集，你能夠在Sass裏面寫熟悉的CSS。Sass的終極目標是解決CSS的缺陷。如咱們所知，CSS並非一個完美的語言。CSS雖然簡單易學，卻也能迅速製造嚴重的混淆，尤爲是在工程浩大的項目中。本文一樣不涉及Sass的使用教程，由於Sass很是簡單，只須要好好看看文檔便可。這裏推薦一個教程：http://www.w3cplus.com/sassguide/
• 使用Grunt
  
  之因此把Grunt放到最後面是由於整個自動化工做流的核心是基於Grunt的。咱們可使用Browserify，可使用Sass等其餘一系列的工具，可是使用它們大多數都須要用到命令行操做，若是咱們每次修改文件都要手動在命令行進行編譯操做將會使開發效率大大下降。天然而然的，自動化工具就會出現，目前最主流的自動化工具應該是Grunt和Gulp。什麼是Grunt呢？Grunt是Javascript任務運行工具，對於Grunt的優點，Grunt官網本身給出了很是好的解答：Grunt是一個龐大的生態系統，天天都在成長。你能夠自由的選擇數以百計的插件以幫助你自動化的處理任務。若是你所須要的插件還被有人建立，那麼你能夠本身建立插件並經過npm很方便的發佈以供更多人使用並一塊兒完善。其中生態系統這四個字是很是重要的，Grunt自己很優秀，可是不算傑出，由於Grunt是基於文件的，當項目很大的時候，就會很是慢！Grunt之因此如此流行，正式由於Grunt有良好的社區支持。
• 前端工做目錄
  正如前面所述，採用Express框架的項目前端文件主要放置在public文件夾裏面。咱們先來看看最終的public目錄：
  
  大概介紹一下每一個文件夾的做用：

1. .sass-cache是Sass在預處理的過程當中產生的緩存文件，可忽略
2. node_modules是前端使用的node插件，在寫好Gruntfile.js文件以後在public文件夾根目錄在命令行運行npm install會自動成成
3. asserts是靜態資源如圖片存放的地方，裏面包含一個文件夾images,存放了所用到的圖片
4. bin是Grunt處理以後的文件，包括兩個文件夾，分別是js和css，包含了最終生成的main.js和main.css文件，在運行Grunt的時候會自動生成這兩個文件夾，新建bin便可
5. lib是前端使用到的類庫存放的地方，包括jquery和bootstrap等，暫時先新建空的lib文件夾，後續使用到了某個類庫添加便可
6. src顧名思義是源代碼存放的地方，咱們在開發過程當中編寫的js和scss文件都存放在這裏，包括兩個文件夾，分別是js和scss，分別包含了開發過程當中的js和scss文件
7. Gruntfile.js是Grunt的配置文件，複製下面貼出的Gruntfile.js便可。
8. package.json用來聲明聲明項目中使用的模塊，複製下面貼出的package.json便可。
   使用Grunt關鍵是寫好它的配置文件，包括package.json和Gruntfile.js兩個文件。對於怎麼書寫這兩個文件，博主推薦你們看看Grunt的官方主頁，這裏僅貼上本實戰教程的Gruntfile.js和package.json文件。
   1) Gruntfile.js

(function() {
  module.exports = function(grunt) {
    var remapify = require('remapify');
    grunt.initConfig({
      //每次運行Grunt的時候清除以前生成的文件
      clean: {
        bin: ["bin"],
        sassCache: '.sass-cache'
      },
      //分析模塊依賴樹，最後生成一個main.js文件
      browserify: {
        dev: {
          expand: true,
          flatten: true,
          src: ["src/js/main.js"],
          dest: "bin/js",
          ext: ".js"
        }
      },
      //壓縮js文件
      uglify: {
        build: {
          files: [
            {
              expand: true,
              cwd: 'bin/js',
              src: '**/*.js',
              dest: 'dist/js'
            }
          ]
        }
      },
      //壓縮css文件
      cssmin: {
        build: {
          files: {
            "dist/css/main.css": ["bin/css/main.css"]
          }
        }
      },
      //監聽文件變化，若是src文件夾中的js或css文件變化了，執行任務`browserify`和`sass`
      watch: {
        compile: {
          files: ["src/**/*.js", "src/**/*.scss"],
          tasks: ["browserify","sass"]
        }
      },
      //scss文件編譯成css
      sass: {
        dist: {
          files: {
            "bin/css/main.css": "src/scss/main.scss"
          }
        }
      }
    });
    //加載上述任務所須要的插件
    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-contrib-sass");
    grunt.loadNpmTasks("grunt-contrib-uglify");
    grunt.loadNpmTasks("grunt-contrib-cssmin");
    grunt.loadNpmTasks("grunt-contrib-copy");
    //定義被執行的任務列表
    grunt.registerTask("default", function() {
      return grunt.task.run(["clean:bin","browserify", "sass", "watch"]);
    });
    return grunt.registerTask("build", function() {
      return grunt.task.run(["clean:bin", "clean:dist", "browserify", "sass", "clean:sassCache", "cssmin", "uglify", "copy"]);
    });
  };
}).call(this);

2) package.json

{
  "name": "Node-Chat-Demo",
  "version": "0.0.1",
  "author": "yuanzm",
  "license": "MIT",
  "devDependencies": {
    "grunt": "*",
    "grunt-browserify": "*",
    "grunt-contrib-clean": "*",
    "grunt-contrib-cssmin": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*",
    "grunt-contrib-sass": "*"
  },
  "dependencies": {
    "browserify": "^8.1.3"
  }
}

簡單描述一下這個工做流：在寫前端代碼的時候，爲了充分利用好CSS，採用了Sass來彌補CSS自己的缺陷；爲了落實模塊化的編程思想，採用了browserify來使Javascript編寫更加高效規範；爲了可以最大化省去人工操做，採用Grunt來自動執行編譯任務；爲了升項目性能，最終生成的文件只有一個且通過高度壓縮。
綜上所述，在配置本實戰教程須要的前端環境的時候，咱們須要作如下幾件事情：
(1). 按照public文件目錄截圖以及描述創建好須要的文件目錄
(2). 確保Gruntfile.js正確的狀況下在public根目錄執行命令npm install
(3). 在public根目錄執行命令grunt,若是沒有報錯，而且bin文件夾裏面生成了相應的main.js和main.css，說明環境配置成功。
其中，運行grunt命令的效果圖以下：

產生壓縮文件的命令和效果以下：

到這裏前端環境也配置好了。

• 參考資料
  http://www.gruntjs.net/
  http://www.w3cplus.com/sassguide/
  http://browserify.org/