在 Windows 下安裝 GruntJS

標籤：des   style   blog   class   code   java   

在你安裝 Grunt.js 之前你需要先安裝 Node.js。對於本教程而言，我已經安裝好了 node.js v0.10.0。

我將要安裝 Grunt.js v0.4.1。警告：如果你已經安裝了 Grunt.js 0.3.x 或者更低的版本，請先卸載它。

Grunt 的命令列介面

為了安裝 grunt.js，我們需要要安裝好全域的 Grunt 命令列介面（CLI），當前的 CLI 版本是 1.0.6。開啟 Windows 命令視窗（CMD）並輸入以下指令：

npm install grunt-cli -g

這條指令會把 grunt 添加到你的系統內容變數，然後你就可以在任何目錄運行 grunt 了。

Windows 小技巧 —— 在檔案夾中開啟命令提示字元

1. 在地址欄裡輸入“CMD”並斷行符號

2. 按住 Shift 鍵然後在檔案夾空白處右鍵滑鼠，選擇“在此處開啟命令視窗”

建立檔案夾和 package.json

現在我們需要安裝 Grunt.js 了。在命令提示字元中進入專案檔夾，我喜歡把編譯檔案放在一個名叫 _build 的檔案夾中，因此，這個例子的路徑是“C:\Users\codebelt\Desktop\first-grunt-project\_build”。

有好幾種安裝 Grunt.js 和外掛程式的方法，但是我會分享其中我認為最簡單的一種方法。我們需要先建立一個 package.json 的檔案，把它放到 _build 檔案夾中，複製並粘貼以下代碼到 package.json 中。

{    "name": "Test-Project",    "version": "0.1.0",    "devDependencies": {        "grunt": "~0.4.1",        "grunt-contrib-concat": "~0.1.3"    }}

當下面的代碼被運行後，grunt v0.4.1 和 grunt 外掛程式 concat v0.1.3 就被安裝進了 _build 檔案夾。

命令如下：

npm install

建立 Grunt 檔案

現在 Grunt.js 和 Concat 外掛程式應該已經安裝好了。現在我們需要新增一個 Grunt 檔案來配置和編譯我們的項目。建立一個 Gruntfile.js 檔案到 _build 檔案夾下，然後粘貼以下代碼到 Gruntfile.js。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

module.exports = function(grunt) {         // Project configuration.     grunt.initConfig({             //Read the package.json (optional)         pkg: grunt.file.readJSON(‘package.json‘),             // Metadata.         meta: {             basePath: ‘../‘,             srcPath: ‘../src/‘,             deployPath: ‘../deploy/‘         },             banner: ‘/*! <%= pkg.name %> - v<%= pkg.version %> - ‘ +                 ‘<%= grunt.template.today("yyyy-mm-dd") %>\n‘ +                 ‘* Copyright (c) <%= grunt.template.today("yyyy") %> ‘,             // Task configuration.         concat: {             options: {                 stripBanners: true             },             dist: {                 src: [‘<%= meta.srcPath %>scripts/fileone.js‘, ‘<%= meta.srcPath %>scripts/filetwo.js‘],                 dest: ‘<%= meta.deployPath %>scripts/app.js‘             }         }     });         // These plugins provide necessary tasks.     grunt.loadNpmTasks(‘grunt-contrib-concat‘);         // Default task     grunt.registerTask(‘default‘, [‘concat‘]);     };

　　

如果你有看以上代碼內容，你可以發現我在 ../src/scripts 目錄下建立了 fileone.js 和 filetwo.js 兩個檔案。這個 GruntJS 指令碼會把這兩個檔案合并匯出到 ../deploy/scripts 檔案夾下的 app.js。我用 <%= meta.srcPath %> 作為常量或基礎路徑來定義我的檔案夾路徑。這樣我就可以只在一個地方修改基礎路徑，而不用在 Gruntfile 中修改所有的路徑了。

現在，在命令提示字元中輸入 grunt，接下來就是見證奇蹟的時刻。

?

1

grunt

它會運行 Default 任務，也就是合并兩個 js 檔案到一個檔案中。試試吧，希望這對你有用。你應該可以看到命令提示字元中輸出：

?

1 2 3 4

Running "concat:dist" (concat) task File "../deploy/scripts/app.js" created.    Done, without errors.

Grunt 是個好東西，搞前端開發的同學都有必要學會使用這樣的工具來方便管理自己的開發。