Node.js、npm、gulp及browser-sync那些事

一、問答

（一）、nodejs 是什么？可以做什么？為什么擅長做？

Node.js是一種JS運行平臺（不是JS應(yīng)用），Node.js采用了Google Chrome瀏覽器的V8引擎，性能很好，同時還提供了很多系統(tǒng)級的API，如文件操作、網(wǎng)絡(luò)編程等。Node.js采用事件驅(qū)動及異步編程的方式設(shè)計，這種設(shè)計理念使得Node.js的優(yōu)勢是：無阻塞式執(zhí)行任務(wù)，充分利用了系統(tǒng)資源，因此其特別適合后端網(wǎng)絡(luò)服務(wù)編程。

（二）、npm 是什么? 如何安裝 node 應(yīng)用？全局安裝和本地安裝有什么區(qū)別？ --save與--saveDev的區(qū)別？ node_module的查找依賴的路線是怎樣的?
  • npm是Node.js的一個包管理器，它可以讓我們方便的復(fù)用他人或分享自己的第三方包或命令行程序。其目前已內(nèi)置在Node.js中。
  • 全局安裝：npm install -g 模塊名。模塊會被下載到到特定的系統(tǒng)目錄下，安裝的模塊能夠在所有目錄下使用。本地安裝：npm install 模塊名。模塊會被下載到當前所在目錄，也只能在當前目錄下使用。
  • npm install 在安裝 npm 包時，有兩種命令參數(shù)可以把它們的信息寫入 package.json 文件，一個是npm install --save另一個是 npm install --save-dev，他們表面上的區(qū)別是--save 會把依賴包名稱添加到 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ā)時用的，比如 我們安裝 js的壓縮包gulp-uglify 時，

Paste_Image.png

我們采用的是 “npm install --save-dev gulp-uglify ” （見上圖）命令安裝，因為我們在發(fā)布后用不到它，而只是在我們開發(fā)才用到它。dependencies 下的模塊，則是我們發(fā)布后還需要依賴的模塊，譬如像jQuery庫或者Angular框架類似的，我們在開發(fā)完后后肯定還要依賴它們，否則就運行不了。
另外需要補充的是：
正常使用npm install時，會下載dependencies和devDependencies中的模塊，當使用npm install --production或者注明NODE_ENV變量值為production時，只會下載dependencies中的模塊。

  • node_module查找依賴的路線是：先在當前目錄下找，找不到的話就向上依次遍歷，直到根目錄為止。
（三）、安裝browser-sync并了解它的使用方式。

我們安裝完最新的node.js后：
1、安裝browser-sync
命令行輸入npm install -g browser-sync即可全局安裝browser-sync。
2、啟動服務(wù)

  • a、對于靜態(tài)網(wǎng)站
    我們可以使用服務(wù)器模式：
// --files 路徑是相對于運行該命令的項目（目錄） 
browser-sync start --server --files "css/*.css, *.html"
// 若你的文件層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件
browser-sync start --server --files "**/*.css, **/*.html"
  • b、對于動態(tài)網(wǎng)站
    如果您已經(jīng)有其他本地服務(wù)器環(huán)境PHP或類似的，您需要使用代理模式。 BrowserSync將通過代理URL(localhost:3000)來查看您的網(wǎng)站。
// 主機名可以是ip或域名
browser-sync start --proxy "主機名" "css/*.css"

在本地創(chuàng)建了一個PHP服務(wù)器環(huán)境，并通過綁定Browsersync.cn來訪問本地服務(wù)器，使用以下命令方式，Browsersync將提供一個新的地址localhost:3000來訪問Browsersync.cn，并監(jiān)聽其css目錄下的所有css文件。

browser-sync start --proxy "Browsersync.cn" "css/*.css"
Paste_Image.png

另外開啟后我們可以進入http://localhost:3001/

Paste_Image.png

查看External項的網(wǎng)址，在移動端輸入該網(wǎng)址，就可實現(xiàn)手機與電腦間的實時同步了~ 而且在Sync Options選項中我們還可以選擇 點擊、滾動或點擊確認鍵等操作是否在這些設(shè)備間進行同步。

Paste_Image.png

以下事項需要特別注意：

  • 1.開啟之前，記得CD到你的Html所在的目錄，再開啟，要不然就會出現(xiàn)CANNOT GET；
  • 2.直接start的話，然后你的Html名稱不是index.html，也會出現(xiàn)CANNOT GET；
  • 3.并不是IDE里面寫什么馬上瀏覽器就變了，要么是點擊瀏覽器切換到瀏覽器，要么在IDE里面保存一下，瀏覽器才會改變

關(guān)于其與gulp間的配合使用可見：
http://www.browsersync.cn/docs/gulp/

（四）、全局安裝server-mock 并了解它的使用方式。

安裝
npm install -g server-mock

使用

  1. 切換到項目文件夾
    cd myTargetFolder
  2. 初始化使用范例
    mock init
    此時myTargetFolder下會自動生成 index.html 、router.js、user.ejs。 其中index.html是前端靜態(tài) html，里面有 ajax 的接口調(diào)用。 router.js 是后端對應(yīng)的路由處理范例文件，當mock-server啟動后請求會被該文件對應(yīng)的路由接口處理。 user.ejs是模板范例，當需要開發(fā)模板時可以在 router.js里渲染該模板。
  3. 啟動 webserver
    mock start
    在瀏覽器輸入 http://localhost:8080 即可預(yù)覽
    詳細使用方法
    mock start --port 3000 // 設(shè)置服務(wù)器啟動端口為3000
    mock start --public public //設(shè)置靜態(tài)文件路徑為當前文件 public 目錄。默認是當前文件夾
    mock start --views views //設(shè)置模板路徑為當前文件 views 目錄。默認是當前文件夾
    mock start --tpl ejs //設(shè)置模板，支持 ejs, jade, velocity
    mock start --tpl ejs --port 3000" //設(shè)置模板為ejs,端口為3000。 默認端口是8080

更具體詳見：https://github.com/jirengu/server-mock

Paste_Image.png
（五）、什么是前端構(gòu)建，有哪些常見的前端構(gòu)建工具?

實現(xiàn)前端代碼的編譯（sass、less）、壓縮、測試；圖片的壓縮以及瀏覽器自動刷新等等功能的過程就叫做前端構(gòu)建。常見的前端構(gòu)建工具有g(shù)ulp、Grunt、webpack、Yeoman及百度的fis3。

另：除了npm，其實還有Yarn包管理工具，其與npm間的對比可見Yarn vs npm: 你需要知道的一切

二、代碼

使用 gulp，實現(xiàn)一個項目的自動化構(gòu)建, 要求：
1、項目中包括多個 css 文件, 多個 js 文件，多個圖片
2、操作 src 目錄，css 需要壓縮合并，js 需要壓縮合并，圖片需要壓縮，處理后放入 dist 目錄
3、以下是范例，推薦構(gòu)建前面的任務(wù)中包含 css js和圖片的項目

+ 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

注意事項：

1.全局安裝gulp之后，再你CD到的目錄之后，再npm init一下，要不然你的目錄沒有package.json；
2.如果不做第一步，npm install -save-dev module-name之后，只會提示你找不到package.json；
3.html中，把css和js的src都給改寫成被壓縮后的地址；
4.如果同時依賴模塊，然后text/javascript又要去用，必須在gulpfile.js中的每一個task中加一個return，要不然你依賴模塊的接口，就是未定義；
5.最后一項的任務(wù)名記得填dafault，即：gulp.task('default',['html','css','js','pic','font']);否則會報錯！

6、我在壓縮html時報錯，但是由于html的里面的字太多把錯誤信息給擠掉了，后來通過body里的所有內(nèi)容，發(fā)現(xiàn)正常，然后我再通過“二分法”，將body里的一半內(nèi)容又放進去，發(fā)現(xiàn)是<a> < </a>及<a> > </a>（<和>是我之前設(shè)置輪播向前后切換的按鈕。。。）報錯，沒有使用< 及> 進行轉(zhuǎn)義。
7、我壓縮js時報錯，發(fā)現(xiàn)我在函數(shù)return時加了{},導(dǎo)致壓縮js包報錯。

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)歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請注明出處。謝謝！ *

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • gulpjs是一個前端構(gòu)建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數(shù)，API也非常簡單，學(xué)...
    依依玖玥閱讀 3,185評論 7贊 55
  • 編輯于2015年 轉(zhuǎn)載自某作者的譯文 作者要是看到請聯(lián)系我注明出處 對網(wǎng)站資源進行優(yōu)化，并使用不同瀏覽器測試并不是...
    krock01閱讀 455評論 0贊 2
  • 對網(wǎng)站資源進行優(yōu)化，并使用不同瀏覽器測試并不是網(wǎng)站設(shè)計過程中最有意思的部分，但是這個過程中的很多重復(fù)的任務(wù)能夠使用...
    懵逼js閱讀 1,088評論 0贊 8
  • 1、gulp的安裝 首先確保你已經(jīng)正確安裝了nodejs環(huán)境。然后以全局方式安裝gulp： npm install...
    F_imok閱讀 2,401評論 1贊 11
  • gulpjs是一個前端構(gòu)建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數(shù)，API也非常簡單，學(xué)...
    井皮皮閱讀 1,325評論 0贊 10