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.jsonGruntfile.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機中安裝成功了!

??

? ? ? ?

?

轉載于:https://www.cnblogs.com/yang-11/p/4778029.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/272997.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/272997.shtml
英文地址,請注明出處:http://en.pswp.cn/news/272997.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

android sdk eclipse沒導入,Android—新的eclipse導入SDK出錯解決辦法

原先系統崩潰,重裝系統,加入一塊內存條,從32位變成62位,原先的eclipse用不了;去官網下載64位的eclipse,安裝,用一樣的方法導入SDK。這時候肯定會提示錯誤,如下:1.This An…

兩個分數化簡比怎么化_我學《分數的意義》心得

停課不停學已經有將近兩個月了,我們邁入了“分數”這一部分。聽媽媽說,這一塊內容很重要,可我覺得到目前為止(明天就學真分數、假分數和帶分數了),分數好像并不比四年級難。看了看書,再做點練習,把這點新的…

html在線拖拽環繞,jQuery實現html元素拖拽

代碼很簡單,效果非常棒,直接給大家上源碼:html定投金額 :元10050010002000300040005000600070008000900010000單位:元css.money-input{margin:36px auto 0;width:330px;font-size:14px;color:#818181}.input-rela{width:250px;height:42px;di…

iphone 抹除設備是什么意思_SMT設備有哪些,SMT是什么意思?

SMT設備其實就是表面貼裝技術所需要的機器,一般一條SMT整線常規包含以下設備:上板機、印刷機、接駁臺、SPI、貼片機、插件機、回流焊、波峰焊、AOI、X-ray、下板機等設備,以上設備是一條比較完整的smt配線清單設備,不同工廠可根據…

visual studio 安裝Entity framework失敗

今日通過Nuget安裝Entity Framwork 6.1.3時候在最后一步石一直報錯,提示“安裝失敗,正在回滾”。 回滾也就罷了,居然還卸載不了安裝了一半的EF。 shit 考慮是不是得用管理員模式run Visual Studio 試之,然并卵。 是不是Nuget版本太…

筆記本軟件頁面分辨率低_筆記本最容易忽略的屏幕 有幾個參數一定要知道

對于第一次購買筆記本的朋友來說,往往會忽視一個重要的硬件,那就是屏幕。尺寸有多大?分辨率是多少?色彩好不好?這些都應該是大家應該關心的問題。下面筆者就和大家聊聊筆記本屏幕應該注意的幾個參數。1、尺寸屏幕尺寸示…

html優美界面左側下拉,一組時尚的側邊欄菜單和下拉列表UI設計

這是一款非常時尚的可伸展的側邊欄菜單和select下拉列表以及手風琴式垂直下拉列表UI設計效果。它們通過簡單的CSS樣式設置,以及和jQuery,jqueryUI的配合,制作出非常時尚的web組件UI設計效果。制作方法HTML結構側邊欄的HTML結構使用在中嵌套無…

.NET基礎 (03)生成、部署和管理

生成、部署和管理1 如何生成強簽名的程序集2 如何把程序集放入GAC中3 延遲簽名及其作用4 程序集的版本分哪幾部分 1 如何生成強簽名的程序集在生成程序集時,CLR提供了兩種可選類型:強簽名程序集。弱簽名程序集。 強簽名程序集是一個帶有公鑰和數字簽名的…

.net 識別一維碼_天若OCR文字識別 v5.0 原創好用的OCR及翻譯小工具

一款非常好用的OCR及翻譯小工具,集合百度、騰訊、有道、搜狗,調用了各大網站的ocr接口,免費不限次數(有道免費接口有ip限制僅供娛樂)。1、對于搜狗的接口調用的還是http://ocr.shouji.sogou.com/v2/ocr/json,這個接口識別效果很好…

html中div中加顏色,css怎樣給div加邊框顏色

css怎樣給div加邊框顏色1、css為div四個邊分別添加邊框border-color:#000(設置4邊邊框顏色為黑色)border-color:顏色值,即可設置對象邊框顏色border-left-color:#000 設置左邊框顏色為黑色border-right-color:#000 設置右邊框顏色為黑色border-top-color:#000 設置上…

Microsoft Dynamics CRM 前瑞開發

做CRM開發最大的感受就是其前瑞開發過程中,調試起來比較麻煩,需要做一些斷點還要配制一些瀏覽器設置,對新手來說比較困難。還有就是對REST調試,經常為了調試一個正確的結果而花費大量的時間。現在推薦一個REST 工具來調試CRM的前瑞…

割線法求解過程_求解稀疏優化問題2——臨近點方法+半光滑牛頓法

這篇文章是我之前一篇文章的兄弟篇,沒看過的可以看下面這個。鄧康康:求解稀疏優化問題——半光滑牛頓方法?zhuanlan.zhihu.com我們考慮的問題仍然是如下的一般問題:其中 ,并且 特別大;表示一個凸可微函數,例如 表示一…

html 樹形圖可拖拽,HTML5拖拽API實現vue樹形拖拽組件

因業務場景需要一個可拖拽修改節點位置的樹形組件,因此動手擼了一個,乘此機會摸了一把html5原生拖拽。近期有時間將核心部分代碼抽出,簡單說下實現方式。1.樹形結構-組件遞歸使用樹形結構非常簡單,tree組件作為父組件,…

navicat 或者workbench 無法連接127.0.0.1(61)的解決方法

1、輸入mysql -uroot 進入命令行模式, 2、輸入"show variables like %sock%;"查看sock文件所在位置 如: 3、配置客戶端(以navicat為例) (1)打開mac 下的navicat(2)建立相應的連接&…

jmeter如何定位網絡延時_JMeter用戶定義變量和properties變量高級使用

Jmeter有個配置元素叫做用戶自定義變量(英文名稱是UserDefinedVariables)而我們提到的vars即是Variables的簡寫。 之前我們也說到過Jmeter的腳本中(jsr223sampler或者beanshell編寫的腳本)使用varsput和varsget的操作(varsget和put的操作僅在threadgroup測試組線程中執行&#…

html5與跨平臺開發,HTML5應用與跨平臺應用開發

本課程將總體講解開發HTML5應用和跨平臺應用的方法,共分成三部分。第一部分為HTML5開發基礎,帶你分析并掌握多種移動開發技術和設計方式;第二部分為HTML5高級應用,講解在HTML5中調用其它應用或服務的方法;第三部分為跨…

jQuery中的幾個模塊總結

Query插件,以備并希望在前端方面有所長進。請批評指正。 一,類型判斷全解 JQuery判斷類型擴展方法:$.type() 1 /*type: function( obj ) { 2 if ( obj null ) { 3 return obj ""; 4 } …

python實現連續數列相加_技術 | Python經典面試題解析實現斐波那契數列

黑馬程序員微信號:heiniu526傳智播客旗下互聯網資訊,學習資源免費分享平臺大家在面試過程中經常會考到斐波那契數列,斐波那契數列(Fibonacci)最早由印度數學家Gopala提出,而第一個真正研究斐波那契數列的是意大利數學家 Leonardo …

廣西2021高考成績位次查詢,2020年廣西高考一分一段表及高考位次成績排名查詢(理科+文科)...

一、2020年廣西高考一分一段表查詢排名方法廣西招辦(考試院)會公布的省市高考每一分分數的考生數額統計表就是我們所說的——高考“一分一段表”,其顯示出每一分的分數值全省考生有多少名,就可以讓考生估算出自己的排名位次。2020年廣西高考一分一段表排…

PV公式

IP(獨立IP): 即Internet Protocol,指獨立IP數。00:00-24:00內相同IP地址之被計算一次。PV(訪問量): 即Page View, 即頁面瀏覽量或點擊量,用戶每次刷新即被計算一次。UV(獨立訪客):即Unique Visitor,訪問您網站的一臺電腦客戶端為…