grunt學習筆記（適用初學者），grunt學習筆記

grunt學習筆記（適用初學者），grunt學習筆記

1、在學習grunt之前，首先要對nodejs有一些簡單的理解。安裝nodejs的步驟很簡單，根據官網的提示安裝即可，在此文中將不再累述。http://www.nodejs.org/

2. Grunt介紹

Grunt是一個自動化的項目構建工具. 如果你需要重複的執行像壓縮, 編譯, 單元測試, 代碼檢查以及打包發布的任務. 那麼你可以使用Grunt來處理這些任務, 你所需要做的只是配置好Grunt, 這樣能很大程度的簡化你的工作.

如果在團隊中使用Grunt, 你只需要與其他人員約定好使用Grunt應該規避的問題, 就能夠很方便的自動化的處理大部分的常見工作任務, 你所付出的努力幾乎為0.

3. Grunt安裝

Grunt和Grunt外掛程式都是通過npm, Node.js包管理器安裝和管理的.

D:\>cd nodeTest1\nodejs-grunt\D:\>cd nodeTest1\nodejs-grunt\npm install -g grunt-cli

這是全域安裝。

D:\>cd nodeTest1\nodejs-grunt\grunt

將會出現如下錯誤：

grunt-cli: The grunt command line interface. (v0.1.9)Fatal error: Unable to find local grunt.If you're seeing this message, either a Gruntfile wasn't found or grunthasn't been installed locally to your project. For more information aboutinstalling and configuring grunt, please see the Getting Started guide:http://gruntjs.com/getting-started

執行grunt命令，我們發現系統報錯了，提示不能載入本地庫。因為，grunt命令執行，是需要目前的目錄中包括package.json和Gruntfile.js兩個檔案。

package.json，是npm項目設定檔
Gruntfile.js，是專門用來配置grunt的設定檔

為了做驗證，本文做了一個例子：

~ D:\>express -e nodejs-grunt~ D:\>cd nodejs-grunt && npm install ~ D:\nodejs-grunt>npm install grunt --save-dev

在 package.json檔案中輸入如下量：

{  "name": "nodejs-grunt",  "version": "0.0.1",  "private": true,  "scripts": {    "start": "node app.js"  },  "dependencies": {    "express": "3.2.2",    "ejs": "*"  },  "devDependencies": {    "grunt": "~0.4.1",  }}

並在Gruntfile.js檔案中輸入如下量(需要建立)：

module.exports = function(grunt) {  // Project configuration.  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    uglify: {      options: {        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'      },      build: {        src: 'src/<%= pkg.name %>.js',        dest: 'build/<%= pkg.name %>.min.js'      }    }  });  // Load the plugin that provides the "uglify" task.  grunt.loadNpmTasks('grunt-contrib-uglify');  // Default task(s).  grunt.registerTask('default', ['uglify']);};

再次編輯package.json, 在devDependencies中增加grunt-contrib-uglify的依賴庫

{  "name": "nodejs-grunt",  "version": "0.0.1",  "private": true,  "scripts": {    "start": "node app.js"  },  "dependencies": {    "express": "3.2.2",    "ejs": "*"  },  "devDependencies": {    "grunt": "~0.4.1",    "grunt-contrib-uglify": "~0.1.1"  }}

繼而，再在 nodejs-grunt目錄下建立 src和build，和nodejs-grunt.js的檔案，其中nodejs-grunt.js

var sayHello=function(name) {return "你好 "+ name;}

為確保依賴庫被載入，需要 再次執行npm install 命令

接著執行：

D:\nodejs-grunt>grunt

控制台輸入如下：

Running "uglify:build" (uglify) taskFile "build/nodejs-grunt.min.js" created.Uncompressed size: 59 bytes.Compressed size: 40 bytes gzipped (43 bytes minified).Done, without errors.

開啟nodejs-grunt\build\nodejs-grunt.min.js

/*! nodejs-grunt 2014-09-08 */var sayHello=function(l){return"hello "+l};

這是一個壓縮執行個體。

Grunt常用外掛程式

• grunt-contrib-uglify：壓縮js代碼
• grunt-contrib-concat：合并js檔案
• grunt-contrib-qunit：單元測試
• grunt-contrib-jshint：js代碼檢查
• grunt-contrib-watch：監控檔案修改並重新執行註冊的任務

上述已經講述一個壓縮執行個體。後面幾個外掛程式就不再一一介紹。

下面將demo放到資源中供大家免費下載

http://download.csdn.net/detail/zz410675629/7881187

參考文章：http://blog.fens.me/nodejs-grunt-intro/

推薦一本適用的韓語學習書籍初學者那種，簡單一點的

快樂韓國語----針對生活化口語。
標準韓國語---針對文法
 
初學者適用的日語學習軟體下載

日語的軟體的話那就只有背單詞背文法什麼的了 還有就是做能力考題的軟體 滬江日語上面有 你可以去看看