MAC終端安裝grunt--javascript世界得構建工具

      祝賀我成爲前端啦！~~從年前得小測試到今年得前端，成功轉型！我真是一個進步得好青年，好少女！

      這兩天出去受虐，面了兩家前端，表現很是很差，仍是回到我如今得公司好好沉澱技術，作前端，要常常性得整理總結，纔是王道嘛！我要在如今得公司認真工做每一天，把本身得技術水平多多提升，明年必定出去有底氣得挑工做！有了能力才能撐得起那麼多得報酬，脊背纔會直硬！、

      廢話很少說，如何mac下安裝grunt來也。。。

       Q:爲什麼要用構建工具？

       一句話：自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。

       是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：

•  壓縮文件
•  合併文件
•  簡單語法檢查

      安裝homebrew任務管理器

      下載homebrew很簡單，只須要用下面得ruby語句，在官網中介紹了homebrew得用法。

      ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

       url: http://brew.sh/      是Mac OSX上的軟件包管理工具，能在Mac中方便的安裝軟件或者卸載軟件， 只須要一個命令， 很是方便。

          下面如有安裝不成功，可前面加sudo ,以管理員身份安裝。

      安裝NodeJS

      運行grunt得首要條件是你的系統上運行安裝了NodeJs和NPM，簡單瞭解下安裝NodeJs和NPM。

       能夠到官網下載NodeJs : https://nodejs.org/en/

       也能夠在終端以命令行形式安裝： 

$ brew install node

      安裝NPM

     在終端執行下面的命令安裝NPM

 

curl http://npmjs.org/install.sh | sh

 

      檢查NodeJs和NPM有沒有安裝完成

$ node -v

  v0.12.6

$ npm -v

  2.11.2

       安裝grunt

      若之前安裝過grunt,要先卸載之前版本得grunt,再升級新版本。

$ npm uninstall -g grunt

 

       爲了方便使用Grunt，要全局範圍安裝grunt得命令行接口CLI。

$ npm install -g grunt-cli
成功後：

grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli

├── resolve@0.3.1

├── nopt@1.0.10 (abbrev@1.0.7)

└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11) 

      這條命令會把grunt 命令移植在你得系統路徑中，這樣就容許你從任意目錄中運行grunt命令。

      安裝了grunt-cli,不意味着安裝了grunt任務運行器，Grunt CLI的工做很簡單：在Gruntfile所在目錄調用運行已安裝好的相應版本的Grunt。這就意味着能夠在同一臺機器上同時安裝多個版本的Grunt。

 

     CLI如何工做

 

      每次運行grunt時，它都會使用node的require()系統查找本地已安裝好的grunt。正由於如此，你能夠從你項目的任意子目錄運行grunt。

 

      若是找到本地已經安裝好的Grunt，CLI就會加載這個本地安裝好的Grunt庫，而後應用你項目中的Gruntfile中的配置(這個文件用於配置項目中使用的任務，Grunt也正是根據這個文件中的配置來處理相應的任務)，並執行你所指定的全部任務。

 

讀下面源碼瞭解工做原理： 

#!/usr/bin/env node

'use strict';

process.title = 'grunt';

// Especially badass external libs.
var findup = require('findup-sync');
var resolve = require('resolve').sync;

// Internal libs.
var options = require('../lib/cli').options;
var completion = require('../lib/completion');
var info = require('../lib/info');
var path = require('path');


var basedir = process.cwd();
var gruntpath;

// Do stuff based on CLI options.
if ('completion' in options) {
  completion.print(options.completion);
} else if (options.version) {
  info.version();
} else if (options.gruntfile) { //Note: if both `gruntfile` and `base` are set, use `gruntfile`
  basedir = path.resolve(path.dirname(options.gruntfile));
} else if (options.base) {
  basedir = path.resolve(options.base);
}

try {
  gruntpath = resolve('grunt', {basedir: basedir});
} catch (ex) {
  gruntpath = findup('lib/grunt.js');
  // No grunt install found!
  if (!gruntpath) {
    if (options.version) { process.exit(); }
    if (options.help) { info.help(); }
    info.fatal('Unable to find local grunt.', 99);
  }
}

// Everything looks good. Require local grunt and run it.
require(gruntpath).cli();

     安裝指定版本的Grunt

      要安裝指定版本的Grunt或者Grunt插件，能夠運行：

 

$ npm install grunt@VERSION --save-dev  

  $ sudo npm install -g grunt   全局安裝

成功後

grunt@0.4.5 /usr/local/lib/node_modules/grunt

├── which@1.0.9

├── dateformat@1.0.2-1.2.3

├── eventemitter2@0.4.14

├── getobject@0.1.0

├── colors@0.6.2

├── rimraf@2.2.8

├── async@0.1.22

├── hooker@0.2.3

├── grunt-legacy-util@0.2.0

├── exit@0.1.2

├── lodash@0.9.2

├── nopt@1.0.10 (abbrev@1.0.7)

├── coffee-script@1.3.3

├── underscore.string@2.2.1

├── iconv-lite@0.2.11

├── minimatch@0.2.14 (sigmund@1.0.1, lru-cache@2.6.5)

├── grunt-legacy-log@0.1.2 (grunt-legacy-log-utils@0.1.1, underscore.string@2.3.3, lodash@2.4.2)

├── glob@3.1.21 (inherits@1.0.2, graceful-fs@1.2.3)

├── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)

└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.16)

 

      其中VERSION就是你所須要的版本(指定版本號便可)。這樣會安裝指定版本的Grunt或者插件，並將它做爲你的項目依賴添加到package.json。

      檢查一下grunt是否安裝成功：

$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5

    要正確運行Grunt項目，必須依賴於package.json和Gruntfile.js文件，所以咱們緊接下來須要在項目的根目錄下建立這兩個文件：

 

$ touch package.json Gruntfile.js

 

     咱們經常安裝Grunt和Grunt插件的方法和上面的是反過來的，先建立package.json文件中添加所須要的Grunt或Grunt插件，好比說如今須要在項目中添加一個Grunt的插件Sass，咱們先在package.json文件中的devDependencies中添加相關的依賴關係，若是同時安裝多個Grunt插件時，一條一條這樣執行彷佛非常麻煩，其實還有一種更好的方式，先在package.json文件中添加須要的Grunt插件依賴關係：

{
    "name":"install-grunt",
    "description": "Example project to demonstrate Grunt.",
    "version":"0.1.0",
    "private": true,
    "author": {
        "name": "w3cplus",
        "email": "w3cplus@hotmail.com"
    },
    "devDependencies": {
        "grunt": "~0.4.0",
        "grunt-contrib-sass":"*",
        "grunt-contrib-jshint":"*",
        "grunt-contrib-uglify":"*",
        "grunt-contrib-watch":"*"
    }
}

添加完所需的依賴關係以後，能夠在終端執行：

$ npm install
installGrunt |----Gruntfile.js |----node_modules |----+----grunt |----+----grunt-contrib-jshint |----+----grunt-contrib-sass |----+----grunt-contrib-uglify |----+----grunt-contrib-watch |----package.json

就能夠一次性安裝package.json文件中所聲明的依賴關係的grunt插件。同時會在你項目的根目錄下添加一個node_modules目錄，目錄中會放置對應grunt插件所需的插件目錄名。

更多詳細內容可參考：

http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html

http://www.cnblogs.com/yexiaochai/p/3594561.html

        根據上面得內容我把grunt在本地mac機中安裝成功了！