一、問答
（一）、nodejs 是什么？可以做什么？為什么擅長(zhǎng)做？
Node.js是一種JS運(yùn)行平臺(tái)（不是JS應(yīng)用），Node.js采用了Google Chrome瀏覽器的V8引擎，性能很好，同時(shí)還提供了很多系統(tǒng)級(jí)的API，如文件操作、網(wǎng)絡(luò)編程等。Node.js采用事件驅(qū)動(dòng)及異步編程的方式設(shè)計(jì)，這種設(shè)計(jì)理念使得Node.js的優(yōu)勢(shì)是：無阻塞式執(zhí)行任務(wù)，充分利用了系統(tǒng)資源，因此其特別適合后端網(wǎng)絡(luò)服務(wù)編程。
（二）、npm 是什么? 如何安裝 node 應(yīng)用？全局安裝和本地安裝有什么區(qū)別？ --save與--saveDev的區(qū)別？ node_module的查找依賴的路線是怎樣的?
- npm是Node.js的一個(gè)包管理器，它可以讓我們方便的復(fù)用他人或分享自己的第三方包或命令行程序。其目前已內(nèi)置在Node.js中。
- 全局安裝：npm install -g 模塊名。模塊會(huì)被下載到到特定的系統(tǒng)目錄下，安裝的模塊能夠在所有目錄下使用。本地安裝：npm install 模塊名。模塊會(huì)被下載到當(dāng)前所在目錄，也只能在當(dāng)前目錄下使用。
- npm install 在安裝 npm 包時(shí)，有兩種命令參數(shù)可以把它們的信息寫入 package.json 文件，一個(gè)是npm install --save另一個(gè)是 npm install --save-dev，他們表面上的區(qū)別是--save 會(huì)把依賴包名稱添加到 package.json 文件 dependencies 鍵下，--save-dev 則添加到 package.json 文件 devDependencies 鍵下，譬如：
{
"name": "yo",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-compass": "~0.7.0",
"grunt-contrib-jshint": "~0.7.0",
"grunt-contrib-cssmin": "~0.7.0",
}
}
不過這只是它們的表面區(qū)別。它們真正的區(qū)別是，devDependencies 下列出的模塊，是我們開發(fā)時(shí)用的，比如 我們安裝 js的壓縮包gulp-uglify 時(shí)，
我們采用的是 “npm install --save-dev gulp-uglify ” （見上圖）命令安裝，因?yàn)槲覀冊(cè)诎l(fā)布后用不到它，而只是在我們開發(fā)才用到它。dependencies 下的模塊，則是我們發(fā)布后還需要依賴的模塊，譬如像jQuery庫或者Angular框架類似的，我們?cè)陂_發(fā)完后后肯定還要依賴它們，否則就運(yùn)行不了。
另外需要補(bǔ)充的是：
正常使用npm install時(shí)，會(huì)下載dependencies和devDependencies中的模塊，當(dāng)使用npm install --production或者注明NODE_ENV變量值為production時(shí)，只會(huì)下載dependencies中的模塊。
- node_module查找依賴的路線是：先在當(dāng)前目錄下找，找不到的話就向上依次遍歷，直到根目錄為止。
（三）、安裝browser-sync并了解它的使用方式。
我們安裝完最新的node.js后：
1、安裝browser-sync
命令行輸入npm install -g browser-sync即可全局安裝browser-sync。
2、啟動(dòng)服務(wù)
- a、對(duì)于靜態(tài)網(wǎng)站
我們可以使用服務(wù)器模式：
// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄）
browser-sync start --server --files "css/*.css, *.html"
// 若你的文件層級(jí)比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件
browser-sync start --server --files "**/*.css, **/*.html"
- b、對(duì)于動(dòng)態(tài)網(wǎng)站
如果您已經(jīng)有其他本地服務(wù)器環(huán)境PHP或類似的，您需要使用代理模式。 BrowserSync將通過代理URL(localhost:3000)來查看您的網(wǎng)站。
// 主機(jī)名可以是ip或域名
browser-sync start --proxy "主機(jī)名" "css/*.css"
在本地創(chuàng)建了一個(gè)PHP服務(wù)器環(huán)境，并通過綁定Browsersync.cn來訪問本地服務(wù)器，使用以下命令方式，Browsersync將提供一個(gè)新的地址localhost:3000來訪問Browsersync.cn，并監(jiān)聽其css目錄下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"
另外開啟后我們可以進(jìn)入http://localhost:3001/
查看External項(xiàng)的網(wǎng)址，在移動(dòng)端輸入該網(wǎng)址，就可實(shí)現(xiàn)手機(jī)與電腦間的實(shí)時(shí)同步了~ 而且在Sync Options選項(xiàng)中我們還可以選擇 點(diǎn)擊、滾動(dòng)或點(diǎn)擊確認(rèn)鍵等操作是否在這些設(shè)備間進(jìn)行同步。
以下事項(xiàng)需要特別注意：
- 1.開啟之前，記得CD到你的Html所在的目錄，再開啟，要不然就會(huì)出現(xiàn)CANNOT GET；
- 2.直接start的話，然后你的Html名稱不是index.html，也會(huì)出現(xiàn)CANNOT GET；
- 3.并不是IDE里面寫什么馬上瀏覽器就變了，要么是點(diǎn)擊瀏覽器切換到瀏覽器，要么在IDE里面保存一下，瀏覽器才會(huì)改變
關(guān)于其與gulp間的配合使用可見：
http://www.browsersync.cn/docs/gulp/
（四）、全局安裝server-mock 并了解它的使用方式。
安裝
npm install -g server-mock
使用
- 切換到項(xiàng)目文件夾
cd myTargetFolder - 初始化使用范例
mock init
此時(shí)myTargetFolder下會(huì)自動(dòng)生成 index.html 、router.js、user.ejs。 其中index.html是前端靜態(tài) html，里面有 ajax 的接口調(diào)用。 router.js 是后端對(duì)應(yīng)的路由處理范例文件，當(dāng)mock-server啟動(dòng)后請(qǐng)求會(huì)被該文件對(duì)應(yīng)的路由接口處理。 user.ejs是模板范例，當(dāng)需要開發(fā)模板時(shí)可以在 router.js里渲染該模板。 - 啟動(dòng) webserver
mock start
在瀏覽器輸入 http://localhost:8080 即可預(yù)覽
詳細(xì)使用方法
mock start --port 3000 // 設(shè)置服務(wù)器啟動(dòng)端口為3000
mock start --public public //設(shè)置靜態(tài)文件路徑為當(dāng)前文件 public 目錄。默認(rèn)是當(dāng)前文件夾
mock start --views views //設(shè)置模板路徑為當(dāng)前文件 views 目錄。默認(rèn)是當(dāng)前文件夾
mock start --tpl ejs //設(shè)置模板，支持 ejs, jade, velocity
mock start --tpl ejs --port 3000" //設(shè)置模板為ejs,端口為3000。 默認(rèn)端口是8080
更具體詳見：https://github.com/jirengu/server-mock
（五）、什么是前端構(gòu)建，有哪些常見的前端構(gòu)建工具?
實(shí)現(xiàn)前端代碼的編譯（sass、less）、壓縮、測(cè)試；圖片的壓縮以及瀏覽器自動(dòng)刷新等等功能的過程就叫做前端構(gòu)建。常見的前端構(gòu)建工具有g(shù)ulp、Grunt、webpack、Yeoman及百度的fis3。
另：除了npm，其實(shí)還有Yarn包管理工具，其與npm間的對(duì)比可見Yarn vs npm: 你需要知道的一切
二、代碼
使用 gulp，實(shí)現(xiàn)一個(gè)項(xiàng)目的自動(dòng)化構(gòu)建, 要求：
1、項(xiàng)目中包括多個(gè) css 文件, 多個(gè) js 文件，多個(gè)圖片
2、操作 src 目錄，css 需要壓縮合并，js 需要壓縮合并，圖片需要壓縮，處理后放入 dist 目錄
3、以下是范例，推薦構(gòu)建前面的任務(wù)中包含 css js和圖片的項(xiàng)目
+ dist
+ css
- merge.min.css
+ js
- merge.min.js
+ img
- a.png
- b.png
+ src
+ css
- a.css
- b.css
+ js
- a.js
- b.js
+ img
- a.png
- b.png
- index.html
注意事項(xiàng)：
1.全局安裝gulp之后，再你CD到的目錄之后，再npm init一下，要不然你的目錄沒有package.json；
2.如果不做第一步，npm install -save-dev module-name之后，只會(huì)提示你找不到package.json；
3.html中，把css和js的src都給改寫成被壓縮后的地址；
4.如果同時(shí)依賴模塊，然后text/javascript又要去用，必須在gulpfile.js中的每一個(gè)task中加一個(gè)return，要不然你依賴模塊的接口，就是未定義；
5.最后一項(xiàng)的任務(wù)名記得填dafault，即：gulp.task('default',['html','css','js','pic','font']);否則會(huì)報(bào)錯(cuò)！
6、我在壓縮html時(shí)報(bào)錯(cuò)，但是由于html的里面的字太多把錯(cuò)誤信息給擠掉了，后來通過body里的所有內(nèi)容，發(fā)現(xiàn)正常，然后我再通過“二分法”，將body里的一半內(nèi)容又放進(jìn)去，發(fā)現(xiàn)是<a> < </a>及<a> > </a>（<和>是我之前設(shè)置輪播向前后切換的按鈕。。。）報(bào)錯(cuò)，沒有使用< 及> 進(jìn)行轉(zhuǎn)義。
7、我壓縮js時(shí)報(bào)錯(cuò)，發(fā)現(xiàn)我在函數(shù)return時(shí)加了{(lán)},導(dǎo)致壓縮js包報(bào)錯(cuò)。
browser-sync start --server --files "css/*.css, *.html" -no-ghost-mode --open external --host=10.0.0.0
browser-sync start --server --files "*.css, *.html , *.js" --reload-delay 800 -no-ghost-mode --open external --host=10.0.0.0
**本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝！ *
