nodejs 是什么？可以做什么？為什么擅長(zhǎng)做梆暖？
JavaScript是一門(mén)腳本語(yǔ)言，包括圍繞瀏覽器API的功能核心DOM掂骏，BOM以及JS的語(yǔ)法核心ECMAscript轰驳，所以瀏覽器就是JavaScript的解釋器，脫離瀏覽器JS無(wú)法運(yùn)行弟灼。
而發(fā)明node的Ryan Dahl一開(kāi)始是想做一個(gè)非阻塞I/O级解，事件驅(qū)動(dòng)的web服務(wù)器，找來(lái)找去發(fā)現(xiàn)Javascript歷史包袱最少田绑，語(yǔ)言也較為輕便于是和JS相結(jié)合（引用其語(yǔ)法核心ECMAscript）成為了今天的nodejs勤哗。官方解釋是：NodeJS是基于chrome V8引擎的運(yùn)行時(shí)。其特點(diǎn)為：
- 單線(xiàn)程（繼承JavaScript的特性）
- 事件驅(qū)動(dòng)（各種回調(diào)掩驱，所以必定不會(huì)鎖死線(xiàn)程）
- 非阻塞I/O（由特性二）
由于它的這些特性芒划，注定不能適用于CPU密集型的場(chǎng)景，而適用于I/O密集型的場(chǎng)合欧穴。所以現(xiàn)在NodeJs多用于做計(jì)算簡(jiǎn)單的后端處理或是中間層（來(lái)接受/發(fā)送請(qǐng)求民逼，把客戶(hù)的復(fù)雜請(qǐng)求交給純后端去計(jì)算，同時(shí)將結(jié)果拋給前端去讓其呈獻(xiàn)給用戶(hù)）涮帘。
npm 是什么? 如何安裝 node 應(yīng)用拼苍？全局安裝和本地安裝有什么區(qū)別？ --save與--saveDev的區(qū)別调缨？ node_module的查找依賴(lài)的路線(xiàn)是怎樣的?
npm（node package manager）顧名思義它是NodeJS的包管理器疮鲫，能夠讓用戶(hù)上傳或下載第三方庫(kù)或應(yīng)用苟鸯，用于node插件管理（包括安裝、卸載棚点、管理依賴(lài)等）早处。
安裝node應(yīng)用步驟：
- 首先，下載安裝NodeJS（官網(wǎng)）
- 安裝完畢后輸入
node -v以及npm -v瘫析，如果出現(xiàn)版本號(hào)則安裝成功砌梆。 - npm現(xiàn)在內(nèi)置于NodeJS中，但由于服務(wù)器在USA贬循，下載速度不穩(wěn)定咸包，所以國(guó)內(nèi)可使用淘寶團(tuán)隊(duì)的cnpm作為替代，安裝方式：在命令行輸入：
npm install cnpm -g --registry=https://registry.npm.taobao.org杖虾，同樣命令行輸入cnpm -v來(lái)驗(yàn)證成功烂瘫。如果執(zhí)行該步，往下所有的npm均可用cnpm代替奇适； - 使用npm安裝插件坟比，在命令行輸入：
npm install <name> [-g][--save-dev]（<>表示必填，[]表示選填）：
name：插件名嚷往；
-g：全局安裝葛账。在windows系統(tǒng)中將會(huì)安裝在C:\Users\Administrator\AppData\Roaming\npm，并且寫(xiě)入系統(tǒng)環(huán)境變量皮仁； 非全局安裝：將會(huì)安裝在當(dāng)前定位目錄籍琳；
全局安裝可以通過(guò)命令行在任何地方調(diào)用它，本地安裝將安裝在定位目錄的node_modules文件夾下贷祈，通過(guò)require()調(diào)用趋急；
--save：將安裝信息保存在pacakge.json中，package.json是npm的項(xiàng)目配置文件势誊，保存在項(xiàng)目根目錄下呜达。（項(xiàng)目開(kāi)發(fā)過(guò)程中需要使用的插件大多相同，所以成功配置好package.json后應(yīng)當(dāng)保留键科，在有packge.json的當(dāng)前目錄下輸入npm install即可按照配置下載插件）闻丑；
-dev：將插件名版本號(hào)保存至package.json的devDependencies節(jié)點(diǎn)，不指定-dev將保存至dependencies節(jié)點(diǎn)勋颖。兩者的區(qū)別在于嗦嗡，前者是生產(chǎn)環(huán)境，后者是開(kāi)發(fā)環(huán)境饭玲。 - node_module的查找是從當(dāng)前目錄一直查找到根目錄侥祭，所以這也是全局為什么能夠生效的原因。
安裝browser-sync并了解它的使用方式
browser-sync是一個(gè)npm上的插件，它能讓瀏覽器快速響應(yīng)即時(shí)修改的html,css,js的修改矮冬，省去了每次修改都要刷新瀏覽器的煩惱谈宛。
- 首先通過(guò)npm將其安裝:
npm install browser-sync -g； - 輸入
browser-sync --version胎署，若響應(yīng)版本號(hào)則表示安裝成功吆录； - 在項(xiàng)目文件下打開(kāi)命令行輸入
browser-sync start --server --files <file name>（file name為需要關(guān)聯(lián)的文件名，若多個(gè)可用,隔開(kāi)如browser-sync start --server --files "*.css,*.html"）琼牧。此時(shí)恢筝，該插件將自動(dòng)創(chuàng)建端口號(hào)為3000的本地服務(wù)器，并監(jiān)聽(tīng)關(guān)聯(lián)文件的改動(dòng)巨坊，對(duì)關(guān)聯(lián)文件的每次改動(dòng)都將直接體現(xiàn)至所在網(wǎng)頁(yè)而無(wú)需刷新撬槽。 - 如果是動(dòng)態(tài)網(wǎng)站，則需要綁定主機(jī)名趾撵，寫(xiě)法為：
browser-sync start --proxy "主機(jī)名" "<file name>"侄柔； - 與gulp一起食用更佳。
全局安裝server-mock 并了解它的使用方式
server-mock是用來(lái)模擬后端數(shù)據(jù)生成占调，方便前端寫(xiě)AJAX的一個(gè)小工具暂题。
安裝方法：
- 全局安裝：
npm install server-mock -g； - 安裝完畢后妈候，在項(xiàng)目文件的命令行中輸入：
mock init建立初始化文件敢靡； - 通過(guò)改變r(jià)outer.js中的代碼來(lái)模擬數(shù)據(jù)，將index.html中所需的模擬方法置入自己的網(wǎng)頁(yè)中苦银；
- 輸入：
server start來(lái)啟動(dòng)服務(wù)器，地址為localhost:8000赶站。
具體方法mock-server
什么是前端構(gòu)建幔虏，有哪些常見(jiàn)的前端構(gòu)建工具?
提供一套工具來(lái)替代一些重復(fù)性操作，例如：我們?cè)谏暇€(xiàn)前一班會(huì)把各種文件壓縮一遍贝椿，但如果突然發(fā)現(xiàn)了一個(gè)BUG需要回頭修改想括，改完后需要再壓縮一次才能上線(xiàn)。這里的壓縮就是一次重復(fù)性勞動(dòng)烙博，我們完全可以用代碼來(lái)讓計(jì)算機(jī)自動(dòng)的將文件壓縮瑟蜈，而不是每次都需要手動(dòng)壓縮，所以用前端構(gòu)建將大大地提高工作效率渣窜。
現(xiàn)在主流的工程化工具有：webpack,gulp（兩者結(jié)合使用效果更好）铺根。
gulp的簡(jiǎn)單使用
gulp是前端工程化中最便捷的工具之一，用戶(hù)通過(guò)配置個(gè)性化的插件乔宿，來(lái)提高工程師的開(kāi)發(fā)效率位迂。gulp如同操作系統(tǒng)一般，本身不提供任何功能，只是作為底層基礎(chǔ)掂林，而基于gulp的插件就如同應(yīng)用軟件臣缀，能夠?qū)崿F(xiàn)各種功能。gulp又像是工廠的流水線(xiàn)泻帮，在完成其配置之后精置，只需要輸入gulp(默認(rèn)的default配置)或是gulp xxx(選擇指定的插件)，即可自動(dòng)的完成所有的操作锣杂。所以脂倦，gulp的確是大大的方便！
先定一個(gè)小目標(biāo)：用gulp進(jìn)行一次簡(jiǎn)單的壓縮操作蹲堂。
1.在項(xiàng)目文件的根目錄下輸入npm init狼讨，創(chuàng)建packge.json文件（可以為空）。
2.輸入npm install gulp --save-dev柒竞，此時(shí)你將在package.json文件中看到：
同時(shí)node_modules文件夾中會(huì)出現(xiàn)gulp文件夾政供。
3.安裝插件
如requier-dir，gulp-concat,gulp-htmlmin等等朽基。無(wú)論何種項(xiàng)目都推薦安裝requier-dir布隔，它能使項(xiàng)目的邏輯分層更加清晰。
4.根目錄新建gulpfile.js 稼虎、 gulp文件夾
gulp文件夾里再新建一個(gè)tasks文件夾和config.js文件衅檀；
tasks文件夾里創(chuàng)建default.js,以及你認(rèn)為所需要的執(zhí)行工藝流程的js文件。
tasks文件里存放對(duì)應(yīng)的任務(wù)霎俩、config.js配置任務(wù)的相關(guān)配置哀军。
結(jié)構(gòu)如下：
5.編寫(xiě)配置文件
- 配置gulpfile.js：
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true});
- 配置config.js(關(guān)鍵在于路徑的正確設(shè)置，以壓縮html和壓縮css為例):
// gulp命令會(huì)由gulpfile.js運(yùn)行打却，所以src和build文件夾路徑如下（根目錄下）
var src = './src'; //待操作的路徑
var dest = './dist'; //操作完成后的路徑
module.exports = {
html: { //這是單個(gè)任務(wù)名杉适，對(duì)象中的src/dest為必須項(xiàng)
src: src + "/*.html",
dest: dest + "/",
settings: { //settings為可選項(xiàng)，其參數(shù)應(yīng)當(dāng)查閱具體插件的使用方法柳击。
collapseWhitespace: true,
removeComments:true
}
},
css: {
all: src + "/**/*.css",
src: src + "/css/*.css",
dest:dest + "/css",
settings:{
}
}
}
- 配置單個(gè)任務(wù)js文件(同樣以壓縮html和壓縮css為例)：
在htmlmin.js中輸入：
//添加依賴(lài)的模塊
var gulp = require('gulp');
var htmlmin = require("gulp-htmlmin");
var config = require('../config').html;
//gulp的語(yǔ)法命令及待辦事項(xiàng)
gulp.task('html', function(){
return gulp.src(config.src)
.pipe(htmlmin(config.settings))
.pipe(gulp.dest(config.dest))
});
在minify-css.js中輸入：
//添加依賴(lài)的模塊
var gulp = require("gulp"),
cssmin = require("gulp-minify-css"),
concat = require("gulp-concat");
var config = require('../config').css;
//gulp的語(yǔ)法命令及待辦事項(xiàng)
gulp.task("css",function () {
return gulp.src(config.src)
.pipe(concat("merge.min.css"))
.pipe(cssmin(config.settings))
.pipe(gulp.dest(config.dest));
});
- 在default.js中將所有待辦任務(wù)集中
var gulp = require('gulp');
gulp.task('default', ['html','css','image']);
6.執(zhí)行g(shù)ulp
大功告成猿推，在項(xiàng)目文件中輸入gulp,所有的事就自動(dòng)幫你做好了
這只是gulp的冰山一角，真正使用還得根據(jù)不同的需求去尋找合適的插件捌肴。
