資訊專欄INFORMATION COLUMN
摘要：安裝成功的驗(yàn)證方式中輸入如果輸出版本號(hào)就說(shuō)明沒(méi)有問(wèn)題。這里再提一點(diǎn)，因?yàn)閲?guó)內(nèi)的某些原因，通過(guò)安裝工具可能會(huì)非常慢，這里需要我們做一點(diǎn)修改，也就是使用淘寶鏡像。
最近看視頻學(xué)習(xí)了前端自動(dòng)化的一些知識(shí)，確實(shí)讓我大開(kāi)眼界。感覺(jué)前端越來(lái)越神器了。同時(shí)跟著視頻自己也嘗試運(yùn)用了一些工具去構(gòu)建前端項(xiàng)目，但是中間遇見(jiàn)了很多坑，磕磕絆絆的才實(shí)現(xiàn)了一點(diǎn)功能，所以打算記錄一下學(xué)習(xí)過(guò)程中的筆記。
首先列舉一下關(guān)鍵詞：NodeJS、Git、Yeoman、bower、Grunt。 其中NodeJS作為核心，在它的基礎(chǔ)上我們可以利用Yeoman、bower、Grunt這三個(gè)前端工具實(shí)現(xiàn)前端自動(dòng)化，而Git，主要是用它自帶的 Git Bash命令行。為啥要用Git自帶的命令行呢，這我就得吐槽一下了：網(wǎng)上的視頻、博客、資料、翻譯等等上面出現(xiàn)的有關(guān)Yeoman，Grunt這樣的例 子都特么是用Mac OS X 下面實(shí)現(xiàn)的，我一個(gè)窮屌絲用windows系統(tǒng)的CMD跟著跟著就出問(wèn)題了，換不了硬件設(shè)備，所以只能先用軟件彌補(bǔ)。。
下面進(jìn)入主題：
第一步：下載Node并安裝。傳送門(mén)：Node官網(wǎng)，去上面下載適合你系統(tǒng)的版本，然后安裝就OK。安裝成功的驗(yàn)證方式 ：cmd 中輸入 node -v ,如果輸出node版本號(hào)就說(shuō)明沒(méi)有問(wèn)題。
第二步：安裝Git。傳送門(mén)：下載Git ,去上面下載適合你系統(tǒng)的版本，然后安裝。安裝教程百度即可，但是需要注意一點(diǎn)，執(zhí)行窗口還是要選擇windows自帶的比較好
也就是最后一步配置要選擇 下面的選項(xiàng)。
這樣做只是為了以后使用方便一點(diǎn)。具體方便在哪里，不告訴你們，你們自己去試。。。。
安裝好Git 之后，桌面或者任意文件夾內(nèi)點(diǎn)擊鼠標(biāo)右鍵就會(huì)看到 Git Bash here,這樣的選項(xiàng)，點(diǎn)擊后就可以看到我們最主要的工具了。接下來(lái)就是安裝Yeoman、bower、Grunt這三個(gè)工具了。
這里再提一點(diǎn)，因?yàn)閲?guó)內(nèi)的某些原因，通過(guò)node安裝工具可能會(huì)非常慢，這里需要我們做一點(diǎn)修改，也就是使用淘寶npm鏡像。具體方法如下：
1.命令窗口（上面提到的Git Bash here ）執(zhí)行：npm config set registry https://registry.npm.taobao.org
2繼續(xù)執(zhí)行命令驗(yàn)證：npm info underscore （如果上面配置正確這個(gè)命令會(huì)有字符串response）
切換淘寶鏡像的方法還有其他的，感興趣的自行Google/百度。
安裝Yeoman的命令：npm install -g yo
驗(yàn)證方式： yo -v 或者 yo --version 顯示版本號(hào)
安裝bower的命令 ：npm install -g bower
驗(yàn)證方式： bower -v 顯示版本號(hào)
安裝grunt的命令 ：npm install -g grunt-cli
驗(yàn)證方式： 輸入grunt 會(huì)有提示
到這里基本的工具都已經(jīng)安裝好了。
這里再講一下Yeoman、bower、Grunt分別是干什么的。
Yeoman：我理解它的作用是生成前端項(xiàng)目的整體文件結(jié)構(gòu)。通過(guò)Yeoman可以生成一個(gè)簡(jiǎn)單的但是非常完整的前端項(xiàng)目文件結(jié)構(gòu)，這個(gè)生成的項(xiàng)目已經(jīng)是一個(gè)可以運(yùn)行的Demo,我們可以在這個(gè)結(jié)構(gòu)上拓展和改造，實(shí)現(xiàn)想要的功能。
bower：它的官網(wǎng)上的解釋是： A package manager for the web，它就是一個(gè)依賴包管理工具，通過(guò)它我們可以在項(xiàng)目中自動(dòng)生成我們需要的依賴包例如：JQuery、angular等，不需要再去網(wǎng)上找到它們的文件，下載下來(lái)在復(fù)制進(jìn)項(xiàng)目這樣繁瑣的工作。
grunt：grunt的功能就厲害了，它可以對(duì)項(xiàng)目中的JS、CSS文件進(jìn)行壓縮、合并、混淆等等操作，還能實(shí)現(xiàn)前端的自動(dòng)化單元測(cè)試，各種牛X的功能，讓我這個(gè)前端小菜鳥(niǎo)看的眼花繚亂的。。。
到這里前端自動(dòng)化的第一步已經(jīng)邁出去了，接著學(xué)著用他們了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82665.html
摘要：一般前端項(xiàng)目安裝依賴使用。包括，，以及程序主入口文件。然后頁(yè)面顯示正常。這樣就實(shí)現(xiàn)了使用構(gòu)建一個(gè)項(xiàng)目，并簡(jiǎn)單開(kāi)發(fā)了一下，創(chuàng)建一個(gè)新的頁(yè)面并實(shí)現(xiàn)了路由跳轉(zhuǎn)。 一. 安裝 第一步：安裝npm所需模塊 首先需要安裝Node.js，然后使用npm安裝所需要的模塊 npm install -g grunt-cli bower yo generator-karma generator-angula...
摘要：這些任務(wù)包括但不限于將源代碼編譯為二進(jìn)制文件打包二進(jìn)制文件運(yùn)行測(cè)試用例發(fā)布到線上環(huán)境添加文檔或發(fā)行注釋為什么很重要呢，因?yàn)樗芄?jié)省程序員的時(shí)間。 Update: 別用 Grunt 了，用 Gulp ！拜拜。 （原文發(fā)表于我的個(gè)人博客 http://frankfang.com/2013/12/29/grunt-is-awesome/ ，如有錯(cuò) 誤，還請(qǐng)賜教） 在生產(chǎn)環(huán)境中使用 Gru...
摘要：通過(guò)官方的生成器，他們建立了一個(gè)的工作流，這個(gè)流是由一個(gè)強(qiáng)大的固定的客戶端組建，包含工具和框架幫助開(kāi)發(fā)者快速建立牛逼的應(yīng)用。 原文還是在簡(jiǎn)書(shū)上： Yeoman-- 一個(gè)強(qiáng)大的前端構(gòu)建工具,我只是自己的搬運(yùn)工！！ 上期跟大家試了試Vue-cli這個(gè)構(gòu)建工具，這個(gè)讓我想起了很多其他的前端工具，其中一個(gè)就是Yeoman（上次就劇透了的）,所以這期跟大家先簡(jiǎn)單介紹下這個(gè)腳手架工具，然后慢慢一步...
摘要：通過(guò)官方的生成器，他們建立了一個(gè)的工作流，這個(gè)流是由一個(gè)強(qiáng)大的固定的客戶端組建，包含工具和框架幫助開(kāi)發(fā)者快速建立牛逼的應(yīng)用。 原文還是在簡(jiǎn)書(shū)上： Yeoman-- 一個(gè)強(qiáng)大的前端構(gòu)建工具,我只是自己的搬運(yùn)工！！ 上期跟大家試了試Vue-cli這個(gè)構(gòu)建工具，這個(gè)讓我想起了很多其他的前端工具，其中一個(gè)就是Yeoman（上次就劇透了的）,所以這期跟大家先簡(jiǎn)單介紹下這個(gè)腳手架工具，然后慢慢一步...
閱讀 3325·2021-11-18 10:02
閱讀 3473·2021-10-11 10:58
閱讀 3399·2021-09-24 09:47
閱讀 1180·2021-09-22 15:21
閱讀 4037·2021-09-10 11:10
閱讀 3303·2021-09-03 10:28
閱讀 1775·2019-08-30 15:45
閱讀 2173·2019-08-30 14:22
