? ? ? 祝賀我成為前端啦!~~從年前得小測試到今年得前端,成功轉型!我真是一個進步得好青年,好少女!
? ? ? 這兩天出去受虐,面了兩家前端,表現非常不好,還是回到我現在得公司好好沉淀技術,做前端,要經常性得整理總結,才是王道嘛!我要在現在得公司認真工作每一天,把自己得技術水平多多提高,明年一定出去有底氣得挑工作!有了能力才能撐得起那么多得報酬,脊背才會直硬!、
? ? ? 廢話不多說,如何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機中安裝成功了!
??
? ? ? ?
?