JS相關環境搭建：Nodejs、karma測試框架、jsDuck、Express

時間 2019-11-21

標籤相關環境搭建 nodejs karma 測試框架 jsduck express 欄目 JavaScript 简体版

原文原文鏈接

第一章：壓縮js(nodejs,uglify)

第一步：安裝nodejs環境

直接下載http://www.nodejs.org/download/javascript

下載完成後直接下一步下一步便可，完了咱們就具備nodeJS環境了css

如下幾步都有點忘了，下次試試吧：html

第二步：新建一個package.json文件和Gruntfile.js文件java

package.json文件內容：node

 1 {
 2   "name": "qx_tjk_js",
 3   "version": "0.0.1",
 4   "devDependencies": {
 5     "grunt": "~0.4.1",
 6     "grunt-contrib-concat": "~0.1.1",
 7     "grunt-contrib-uglify": "~0.2.1",    
 8     "grunt-contrib-watch": "~0.6.1",
 9     "grunt-html-build": "~0.3.2",
10     "grunt-css":   ">0.0.0"
11   }
12 }

View Code

"grunt-contrib-concat": "~0.1.1"：是用來合併的；"grunt-contrib-uglify": "~0.2.1"就是用來壓縮js的；"grunt-contrib-watch": "~0.6.1"：用來配置監聽，當文件觸發保存時，會自動從新壓縮這些文件；"grunt-css": ">0.0.0"是用來合併css文件的；"grunt-html-build": "~0.3.2"：是用來配合合併css的仍是用來壓縮html的，已經忘了（有時間能夠試試）!!jquery

Gruntfile.js文件內容：web

 1 qxmenus的菜單服務（須要具備面向對象，能夠在更多的項目中重用，不要寫重複的代碼）
 2 
 3 
 4 module.exports = function (grunt) {
 5     grunt.initConfig({
 6         pkg: grunt.file.readJSON('package.json'),
 7         concat: {
 8             jqueryModule: { // 1
 9                 src: ['../Scripts/lib/jquery/*.js'],
10                 dest: 'dist/jquery.module.<%= pkg.version %>.js'
11             },
12             bootstrapModule: { // 2
13                 src: ['../Scripts/lib/bootstrap/*.js'],
14                 dest: 'dist/bootstrap.module.<%= pkg.version %>.js'
15             },
16             qxlib: { // 3
17                 src: ['../Scripts/lib/qxlib/*.js'],
18                 dest: 'dist/qx.lib.<%= pkg.version %>.js'
19             },
20             angularModule: { // 4
21                 src: ['../Scripts/lib/angular/*.js'],
22                 dest: 'dist/angular.module.<%= pkg.version %>.js'
23             },
24             qxAngularModule: { // 5
25                 src: ['../Scripts/tjk/comm/*.js',
26                       '!../Scripts/tjk/comm/socket.io.js',
27                       '!../Scripts/tjk/comm/qx.service.socket.js'
28                 ],
29                 dest: 'dist/qx.angular.module.<%= pkg.version %>.js'
30             },
31             noLoginedJs: {
32                 src: [...],
33                 dest: 'dist/qx.tjk.login.<%= pkg.version %>.js'
34             },
35             memberCenterJs: {
36                 src: [...],
37                 dest: 'dist/qx.tjk.center.<%= pkg.version %>.js'
38             }
39         },
40         uglify: {
41             common: { // 公共的js
42                 src: ['dist/jquery.module.<%= pkg.version %>.js',
43                       'dist/bootstrap.module.<%= pkg.version %>.js',
44                       'dist/qx.lib.<%= pkg.version %>.js',
45                       'dist/angular.module.<%= pkg.version %>.js',
46                       'dist/qx.angular.module.<%= pkg.version %>.js'
47                 ],
48                 dest: 'dist/tjk.common-min.<%= pkg.version %>.js'
49             },
50             nologined: { // 未登陸的相關頁面
51                 src: 'dist/qx.tjk.login.<%= pkg.version %>.js',
52                 dest: 'dist/tjk.nologined-min.<%= pkg.version %>.js'
53             },
54             logined: { // 登陸後的相關頁面
55                 src: 'dist/qx.tjk.center.<%= pkg.version %>.js',
56                 dest: 'dist/tjk.logined-min.<%= pkg.version %>.js'
57             }
58         },
59         watch: {
60             options: {
61                 livereload: true
62             },
63             grunt: {
64                 files: ['Gruntfile.js']
65             },
66             styles: {
67                 files: ['../Components/*/js/*.js', '../Scripts/lib/*/*.js', '../Scripts/tjk/*/*.js'],
68                 tasks: ['concat', 'uglify'],
69                 options: {
70                     nospawn: true
71                 }
72             }
73         }
74     });
75 
76     // 載入concat和css插件，分別對於合併和壓縮
77     grunt.loadNpmTasks('grunt-contrib-concat');
78     grunt.loadNpmTasks('grunt-contrib-uglify');
79     grunt.loadNpmTasks('grunt-contrib-watch');
80     grunt.loadNpmTasks('grunt-css');
81     // 默認任務
82     grunt.registerTask('default', ['watch']);
83     grunt.registerTask('default', ['concat', 'uglify']);
84 
85 };

View Code

contact下面的對象是用來合併的配置，名字是能夠隨便取的；同理，uglify下面的對象是用來壓縮前面合併的js文件的名字也是隨便取；watch...不解釋了。chrome

第三步：構建模塊文件夾express

新建一個文件夾：D:\blog，而後把上一步新建的兩個文件放進來。運行>cmd，而後引導到D:\blog，先執行安裝命令：npm install（它會根據package.json裏面的配置，本身導入須要的包）。若是npm install 失敗了，，，我忘了，有時間再找臺新電腦試試這些步驟npm

若是npm install 平臺度過，就只需根據須要配置grunt.js裏面配置，再執行：cmd>grunt就Ok了厄~~

注意：最開始安裝的時候，nodejs的安裝目錄是指向到C盤User目錄下面的（固然這個看你怎麼配置的，具體怎麼配的，忘了！）。全部的-g安裝的包，也就所有都在那個目錄下面了。

但一般狀況下，項目都會隨意放在其餘盤裏，因而基於這些包的安裝，必須先引導到你的項目的目錄下面去執行安裝命令（npm install）。

第二章：安裝karma和jasmine

若是上面的node環境安裝好了，這幾個就很簡單了。

第一步：安裝karma

執行安裝命令：npm install karma -g(通常不須要-g，若是你項目不是放在默認目錄裏的話)

安裝時提示：npm varn optional dep failed, continuing... 執行karma start：提示karma不是內部或外部命令

網上查資料，必須在全局安裝「karma-cli」：npm install -g karma-cli


自動打開瀏覽器，並看到karam界面，就說明安裝成功了。
# 測試是否安裝成功
~ D:\workspace\javascript\karma>karma start
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket nIlM1yUy6ELMp5ZTN9Ek

第二步：初始化karma並安裝jasmine

初始化karma配置文件karma.conf.js(在安裝完karma時，一直提示：no provider for framework:jasmine... 錯誤。後臺經人指點，進行了karma的初始化，才OK[這是一個坑啊~~])

~ D:\workspace\javascript\karma>karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Config file generated at "D:\workspace\javascript\karma\karma.conf.js".

安裝集成包karma-jasmine



~ D:\workspace\javascript\karma>npm install karma-jasmine

第三步：實現自動化測試

3步準備工做：

1. 建立源文件：用於實現某種業務邏輯的文件，就是咱們平時寫的js腳本
2. 建立測試文件：符合jasmineAPI的測試js腳本
3. 修改karma.conf.js配置文件(這個配置文件要放在項目根目錄下面)

1). 建立源文件：用於實現某種業務邏輯的文件，就是咱們平時寫的js腳本
有一個需求，要實現單詞倒寫的功能。如：」ABCD」 ==> 「DCBA」

~ vi src.js
function reverse(name){
    return name.split("").reverse().join("");
}

2). 建立測試文件：符合jasmineAPI的測試js腳本

describe("A suite of basic functions", function() {
    it("reverse word",function(){
        expect("DCBA").toEqual(reverse("ABCD"));
    });
});

3). 修改karma.conf.js配置文件(這個配置文件要放在項目根目錄下面)
咱們這裏須要修改：files和exclude變量

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: ['souce/1.js','test/1.js','*.js'],
        exclude: ['karma.conf.js'],
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        captureTimeout: 60000,
        singleRun: false
    });
};

啓動karma
單元測試全自動執行

~ D:\workspace\javascript\karma>karma start karma.conf.js
INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [launcher]: The path should not be quoted.
  Normalized the path to C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket bVGffDWpc1c7QNdYye_6
INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket DtTdVbd4ZsgnMQrgye_7
Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (3.473 secs / 0.431 secs)
Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (0.068 secs / 0.021 secs)
TOTAL: 2 SUCCESS

第三章：安裝JSDuck

第一步：安裝Ruby

Ruby下載地址：http://rubyinstaller.org/downloads/，下載的文件以下：

ruby-2.0.0-p645-i386-mingw32.7z

DevKit-mingw64-32-4.7.2-20130224-1151-sfx.exe

第二步：安裝Development Kit

一、將DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe解壓到指定目錄，原文的做者在ruby的安裝目錄中新建了個叫dev的文件夾，而後解壓到dev裏面的。

二、使用批處理程序生成config.yml，下面是使用的批處理程序：

1 cd /d D:\Ruby200\dev
2 ruby dk.rb init

三、修改config.yml的內容

 1 # This configuration file contains the absolute path locations of all
 2 # installed Rubies to be enhanced to work with the DevKit. This config
 3 # file is generated by the 'ruby dk.rb init' step and may be modified
 4 # before running the 'ruby dk.rb install' step. To include any installed
 5 # Rubies that were not automagically discovered, simply add a line below
 6 # the triple hyphens with the absolute path to the Ruby root directory.
 7 #
 8 # Example:
 9 #
10 # ---
11 # - C:/ruby19trunk
12 # - C:/ruby192dev
13 #
14 ---
15 - D:\Ruby200

我修改爲：D:\Ruby200這個目錄後，反然後面拋出這些異常，不修改（原爲：C:\Ruby200），則能夠繼續下去，那麼這個目錄便是指：安裝ruby的目錄

1 Unable to find rubygems in site_ruby or core ruby ...
2 
3 the rdiscount native gem requires installed build tools...
4 
5 optparse.rb 346 in 'match' invalid byte sequence in...

四、使用批處理執行安裝，下面是使用的批處理程序：

1 cd /d D:\Ruby200-x64\dev
2 ruby dk.rb install

注：cd /d D:\Ruby200-x64\dev 這應該都是引導到devkit的解壓目錄中執行的命令

第三步：安裝rdiscount和jsduck

執行以下批處理程序：

gem install rdiscount
gem install jsduck

第四步：生成api文檔

新建配置文件extjs-conf.json，內容以下：

{
    
    "--": "extjs/src",
    
    "--warnings": [
        
        "-no_doc:extjs/src",
        
        "-no_doc_member:extjs/src",
        
        "-link:extjs/src",
        
        "-type_name:extjs/src"
    
     ],
    
     "--ignore-html": ["locale","debug"],

     "--images": "extjs/docs/images",
    
     "--output":"docsIV"
}

View Code

執行命令：

jsduck --config extjs-conf.json

插曲：最開始不知道何種緣由，執行時始終拋出以下異常：



可是單獨執行某一個文件的壓縮時，倒是能夠的。後來從網上從新找來一個ext-conf.json的文件，纔可以正常執行這個命令(jsduck --config extjs-conf.json)。還有可能，我是在jsduck目錄下執行的（在根目錄下執行時正常）。
總結緣由，可能兩個都有，也多是其中一個緣由：一、ext-conf.json內容有問題；二、ext-conf.json配置文件應該放在根目錄下面，並要在根目錄下執行命令