Grunt - 安裝指南

發現周圍有些人對前端存在偏見。
他們認為前端只是用沒那么復雜的技術對着界面調來調去，一點點打磨，最后做出一個沒什么實用價值的“花瓶”。
其實，前端的技術棧並不簡單，比如我們可以用Grunt進行一些自動化操作。
這里簡單記錄下Grunt的安裝，希望對大家有幫助。

 

Node.js

我們用到的很多組建都是依賴Node.js構建的，所以首先要安裝Node.js。
安裝Node.js幾乎沒什么難度，可以直接進Node.js的官網，或者使用brew,apt-get,yum等進行安裝。

安裝結束后，執行一下命令，檢查輸出是否正確:

$ node --version
v0.12.7

npm會跟着Node.js安裝進來，我們需要經常執行npm install之類的操作。
所以如果之前沒有解除過npm，你可能需要過一次Getting Started。 

 

Grunt

進入Grunt的官網看到一頭野豬，Grunt將自己定義為Javascript Task Runner，而我們通過Grunt執行的就是一個個task。

 

先install再說，注意是grunt-cli

npm install -g grunt-cli

看看是否成功安裝

Ezra:~ Kavlez$ grunt --version
grunt-cli v0.1.13

該怎么用起來呢？這里列出簡單步驟。

• 創建一個目錄，在這個目錄下試試

  mkdir my-grunt
  cd my-grunt

• 執行npm init來創建package.json，會出現一些填寫選項的提示，接着執行npm install來安裝需要的組件即可，比如：

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

• 執行vim package.json查看，會發現grunt-contrib-uglify唄加入到了配置文件中

   "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.9.2"
  }

• package.json並不是用來配置任務的，我們要在Gruntfile.js中配置任務，比如這樣：

  module.exports = function(grunt) {
  
      grunt.initConfig({
          pkg: grunt.file.readJSON('package.json'),
          uglify: {
              build: {
                  src: 'omg.js',
                  dest: 'omg.min.js'
              }
          }
      });
  
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.registerTask('default', ['uglify']);
  
  };

• grunt-contrib-uglify可以用來壓縮源文件，我們創建一個omg.js並寫入以下內容來試試uglify:

  'use strict';
  
  function omg(){
      alert('omg!!!!!!');
  }

• 執行任務！ 如果順利的話，我們可以在目錄下看到omg.min.js。

  grunt uglify

僅靠一頭野豬，我們仍無法避免一些重復的操作。
於是我們需要別的小伙伴，比如一只鳥。

 

Bower

Bower就是那只鳥，我是說logo。

Bower在官網做了如下介紹：

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.

也就是為我們管理各種各樣的依賴，比如框架、庫、工具等。

安裝方法依然簡單，直接npm

$ npm install -g bower

安裝結束后，查看版本檢查是否成功

$ bower -v
1.5.1

使用方法非常簡單，這里簡單舉個例子，比如我們要在工程中引入一個backbone:

$ bower install backbone

bower是如何根據名稱找到backbone的? 我們可以到http://bower.io/search/看看。
backbone是使用"backbone"這個名字在bower進行注冊的。

此外，我們還有以下幾種方式引入依賴:

# GitHub shorthand
$ bower install desandro/masonry
# Git endpoint
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js

你可能會有這樣的疑問，npm 和 bower都可以做依賴管理，那它們的區別是什么?

這里，我引用下stackoverflow的答案:

npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify and/or $ npm dedupe.

Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).

A nested dependency tree means that your dependencies can have its own dependencies which can have their own, and so on. This is really great on the server where you don't have to care much about space and latency. It lets you not have to care about dependency conflicts as all your dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end. Imagine a site having to download three copies of jQuery.

The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc.

All package managers have many downsides. You just have to pick which you can live with.

相信這段答案會在使用npm和bower過程中更有體會 :D
答案中提到了Yeoman，這是干什么用的？

 

Yeoman

yeoman整合了最佳實踐和常用工具。
創建項目時，我們可以用來生成項目文件、代碼結構。

 

直接使用npm直接進行安裝，注意這里的名字是yo，而不是yoeman。

$ npm install -g yo

可能並不順利。

看到有些朋友建議使用sudo執行安裝，事實上這樣會帶來一些權限問題，比如一些模塊會無法加載，或者每次執行一些命令時都需要加上sudo。
我們可以參考 https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md來解決這個問題。

在此簡單引用下這個帖子的內容，過程如下：

$ mkdir "${HOME}/.npm-packages"

在.bashrc(或者可能是.bash_profile)加入以下代碼:

NPM_PACKAGES="${HOME}/.npm-packages"
NODE_PATH="$NPM_PACKAGES/lib/node_modules:$NODE_PATH"

PATH="$NPM_PACKAGES/bin:$PATH"

# 根據自己的情況設置manpath
unset MANPATH
MANPATH="$NPM_PACKAGES/share/man:$(manpath)"

在.npmrc加入以下代碼:

prefix=~/.npm-packages

最后，不要忘了source:

$ source ~/.bashrc

如果是使用brew安裝node，可能會出現其他問題，比如:
http://yeoman.io/learning/faq.html#yo-command-not-found https://github.com/yeoman/yeoman/issues/466#issuecomment-8602733

如果出現提示：

sh: yodoctor: command not found

可以執行以下命令解決:

$ npm config set unsafe-perm true

Yeoman有個東西叫generator，我們可以讓Yeoman根據特定的generator生成相應的工程。 http://yeoman.io/generators/中為我們列出了目前可用的generator。

這里以列表中的第一條——AngularJS的generator為例，簡單記錄下使用步驟。

• 首先安裝generator，列表中AngularJS的generator名稱為angular，在名稱前面加上generator_便是在npm中注冊的名稱。

  npm install -g generator-angular

• 為自己的工程創建一個目錄並進入。

  mkdir yo-my-angular

• 執行一下yo，開始生成。

  yo angular yo-my-angular

• Yeoman會提示以下一些問題，根據需要選擇即可，剩下的便是稍等片刻。

  ? Would you like to use Sass (with Compass)? Yes
  ? Would you like to include Bootstrap? Yes
  ? Would you like to use the Sass version of Bootstrap? Yes
  ? Which modules would you like to include? (Press <space> to select)

• 如果執行正常，Yeoman最后會提示Done, without errors.

當然，我們可以忽略Yeoman，而直接使用Grunt，並一點點編寫相關任務的配置。
我們可能只是需要一些簡單的功能，但Yeoman提供的最佳實踐會給我們帶來更多的啟發，誰會跟更好的方法過不去呢？