Emberjs 上手 - 使用Grunt進行項目組織與建立

時間 2019-11-06

標籤 emberjs 上手使用 grunt 進行項目組織建立欄目 Node.js 简体版

原文原文鏈接

在要開始構建Emberjs的應用前，首先考慮一個能夠組織和管理好整個JavaScript項目的方法和工具，可使用Ember-cli，也可使用通用的JavaScript的構建工具Grunt。node

爲何須要這樣的工具呢？緣由是軟件項目的開發與管理離不開良好的代碼組織方法與管理工具的使用，特別是團隊開發人員多，項目結構複雜時，技術的組織管理就會是一個挑戰。比如蓋一幢樓房，若是不可以有效地管理建築材料、工人與施工進度時，那麼工程質量與交付就沒法獲得保障了。npm

Grunt 的功能

好了，如今來看看使用Grunt有些什麼好處吧，json

1. 支持在Linux及Windows上的命令行操做，無需界面app

2. 自定義任務Task，能夠完成各類軟件項目的工做（包括建立、編譯、壓縮、測試等常見的需求）框架

3. 支持第三方插件，已經造成覆蓋JavaScript軟件項目的完整的生態系統，而且不斷更新。
詳細的插件庫資料能夠瀏覽 http://gruntjs.com/plugins模塊化

4. 因爲被普遍支持，不少出名的JS框架均可以在grunt插件庫裏找到相應的可用插件grunt

5. 使用JSON格式配置項目，實現靈活、簡便，能夠適合幾乎任何項目的文件目錄結構工具

環境安裝

步驟1：安裝npm

因爲Grunt和Gurnt插件的安裝和管理都是經過npm在進行, 因此你須要先安裝npm, 也就是Node.js的包管理工具到你的電腦上。安裝請點擊 http://nodejs.org/, 下載安裝包到你的電腦上安裝好, 而後打開命令窗口，輸入 npm help組件化

npm@1.4.28 C:\Program Files\nodejs\node_modules\npm測試

你應該能夠看到想用的版本信息，恭喜你，npm安裝已經完成了

步驟2：安裝Grunt CLI

接下來，你須要安裝Grunt CLI，在命令窗口下輸入

npm install -g grunt-cli

安裝完畢後，你能夠輸入 grunt命令來查看版本信息。

grunt-cli: The grunt command line interface. (v0.1.13)

若是你看到相似上面的信息，你就完成了grunt cli的安裝了

步驟3： Emberjs 項目目錄結構

一個好的JS項目離不開好的目錄結構，你能夠根據本身的須要來配置目錄名和層次。而在Ember項目裏，因爲Ember的設計特性會影響到你的功能結構組織方式，所以在這裏咱們採用如下的目錄樹結構做爲一個例子供項目參考

這些目錄未必你都用得着，但咱們就拿它來做爲一個普通的JS項目吧。對於多數的中大型項目來講，項目的模塊化、組件化是整個項目結構的設計方向，主要目的是作到易於管理、可重用和方便測試。而Ember世界的設計理念爲項目提供了這些組織結構, 咱們能夠把路由、控制器和模板分別放在不一樣的文件下。

步驟4：建立Grunt配置文件

接下來，你須要建立一些Grunt的配置文件，以即可以使用Grunt來管理、編譯、測試你的項目。先移到/scripts目錄下，建立一下的文件

package.json文件

這是用於描述項目的metadata文件，內容以下

{
  "name": "Sample Project",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.5",
  }
}

Gruntfile.js文件

接着，要建立任務配置文件，內容以下

module.exports = function (grunt) {
    //configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
    });
    //tasks
    grunt.registerTask('default', []);
};

保存文件後，打開命令行，輸入 npm install 該命令會讀取package.json文件並找到依賴的工具 grunt 0.4.5並安裝。若是沒有錯誤信息，你就能夠獲得一個新的目錄生成

/scripts
|_node_modules

步驟5：插件安裝

要完成項目建立、編輯、壓縮、測試等工做，你還須要各類插件，安裝到你的項目裏。

grunt-contrib-concat 合併插件

輸入如下命令安裝該插件，它的做用是把數個分割的js文件合併成一個

npm install grunt-contrib-concat --save-dev

上面的命令的參數 --save-dev 是讓npm在安裝完插件後同步跟新package.json元數據信息。

命令運行完成後，你能夠看到grunt-contrib-concat被安裝到你的機器上，打開package.json文件，看到如下信息

「grunt-contrib-concat」：「^0.5.0」

grunt-contrib-jshint 代碼檢驗插件

輸入如下命令安裝該插件，它的做用是掃描你的代碼並找到潛在的bug，並給出提示

npm install grunt-contrib-jshint --save-dev

命令運行完成後，你能夠看到grunt-contrib-jshint被安裝到你的機器上，打開package.json文件，看到如下信息

"grunt-contrib-jshint": "^0.10.0"

grunt-contrib-uglify壓縮插件

輸入如下命令安裝該插件，它的做用是壓縮你的js文件，並提供必定程度的加密

npm install grunt-contrib-uglify --save-dev

命令運行完成後，你能夠看到grunt-contrib-uglify被安裝到你的機器上，打開package.json文件，看到如下信息

"grunt-contrib-jshint": "^0.6.0"

grunt-ember-templates Ember模板插件

輸入如下命令安裝該插件，

npm install grunt-ember-templates --save-dev

命令運行完成後，你能夠看到grunt-ember-templates被安裝到你的機器上，打開package.json文件，看到如下信息

"ember-template-compiler": "^1.9.0-alpha","grunt-ember-templates": "^0.5.0-alpha","handlerbars": "^2.0.0"

步驟6：配置Grunt任務

完成插件的安裝後，你就能夠根據本身的目錄結構來配置任務了。如下是供參考的任務配置例子

function config (name) {
    return require('./'+name+'.js');
}

module.exports = function (grunt) {
    //configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: config('concat-build'),
        jshint: config('jshint-build'),
        emberTemplates: config('template-build')
    });

    //load
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-ember-templates');

    //tasks
    grunt.registerTask('default', ['concat', 'jshint', 'emberTemplates']);

};

這裏面按順序加載了3個任務，分別是 concat, jshint 及 emberTemplates。每一個任務都須要一個獨立的配置文件，並放在與package.json相同目錄下。參考如下寫法

concat-build.js文件

module.exports = {
      
      option: {
         separator: '\n'
      },
      
      basic_and_extras: {
        files: {
          'scripts/app/components.js': ['scripts/app/components/**/*.js'],
          'scripts/app/controllers.js': ['scripts/app/controllers/**/*.js'],
          'scripts/app/helpers.js': ['scripts/app/helpers/**/*.js'],
          'scripts/app/models.js': ['scripts/app/models/**/*.js'],
          'scripts/app/app.js': ['scripts/app/routes/**/*.js']
         }
      }
      
}

* 這裏的separator做用是分割每一個JS文件的內容

jshint-build.js文件

module.exports = {

       files: ['Gruntfile.js',
               'scripts/components/*.js',
               'scripts/controllers/*.js',
'scripts/helpers/*.js',
               'scripts/locale/*.js',
               'scripts/models/*.js',
               'scripts/routes/*.js',
               'scripts/templates/**/*.js'
       ],

       options: {
           globals: {
               jQuery: true,
               console: true,
               modules: true
           }

       }

}

template-build.js文件

module.exports = {

compile: {
options: {
templateName: function(sourceFile){
return sourceFile.replace(/scripts\/templates\//, '');
}
},
files: {
'scripts/admin/templates.js': ['scripts/templates/**/*.hbs']
}
}

}