nodejs 是什么？可以做什么？為什么擅長做？
JavaScript是一門腳本語言，包括圍繞瀏覽器API的功能核心DOM，BOM以及JS的語法核心ECMAscript，所以瀏覽器就是JavaScript的解釋器，脫離瀏覽器JS無法運行。
而發明node的Ryan Dahl一開始是想做一個非阻塞I/O，事件驅動的web服務器，找來找去發現Javascript歷史包袱最少，語言也較為輕便于是和JS相結合（引用其語法核心ECMAscript）成為了今天的nodejs。官方解釋是：NodeJS是基于chrome V8引擎的運行時。其特點為：
- 單線程（繼承JavaScript的特性）
- 事件驅動（各種回調，所以必定不會鎖死線程）
- 非阻塞I/O（由特性二）
由于它的這些特性，注定不能適用于CPU密集型的場景，而適用于I/O密集型的場合。所以現在NodeJs多用于做計算簡單的后端處理或是中間層（來接受/發送請求，把客戶的復雜請求交給純后端去計算，同時將結果拋給前端去讓其呈獻給用戶）。
npm 是什么? 如何安裝 node 應用？全局安裝和本地安裝有什么區別？ --save與--saveDev的區別？ node_module的查找依賴的路線是怎樣的?
npm（node package manager）顧名思義它是NodeJS的包管理器，能夠讓用戶上傳或下載第三方庫或應用，用于node插件管理（包括安裝、卸載、管理依賴等）。
安裝node應用步驟：
- 首先，下載安裝NodeJS（官網）
- 安裝完畢后輸入
node -v以及npm -v，如果出現版本號則安裝成功。 - npm現在內置于NodeJS中，但由于服務器在USA，下載速度不穩定，所以國內可使用淘寶團隊的cnpm作為替代，安裝方式：在命令行輸入：
npm install cnpm -g --registry=https://registry.npm.taobao.org，同樣命令行輸入cnpm -v來驗證成功。如果執行該步，往下所有的npm均可用cnpm代替； - 使用npm安裝插件，在命令行輸入：
npm install <name> [-g][--save-dev]（<>表示必填，[]表示選填）：
name：插件名；
-g：全局安裝。在windows系統中將會安裝在C:\Users\Administrator\AppData\Roaming\npm，并且寫入系統環境變量； 非全局安裝：將會安裝在當前定位目錄；
全局安裝可以通過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，通過require()調用；
--save：將安裝信息保存在pacakge.json中，package.json是npm的項目配置文件，保存在項目根目錄下。（項目開發過程中需要使用的插件大多相同，所以成功配置好package.json后應當保留，在有packge.json的當前目錄下輸入npm install即可按照配置下載插件）；
-dev：將插件名版本號保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點。兩者的區別在于，前者是生產環境，后者是開發環境。 - node_module的查找是從當前目錄一直查找到根目錄，所以這也是全局為什么能夠生效的原因。
安裝browser-sync并了解它的使用方式
browser-sync是一個npm上的插件，它能讓瀏覽器快速響應即時修改的html,css,js的修改，省去了每次修改都要刷新瀏覽器的煩惱。
- 首先通過npm將其安裝:
npm install browser-sync -g； - 輸入
browser-sync --version，若響應版本號則表示安裝成功； - 在項目文件下打開命令行輸入
browser-sync start --server --files <file name>（file name為需要關聯的文件名，若多個可用,隔開如browser-sync start --server --files "*.css,*.html"）。此時，該插件將自動創建端口號為3000的本地服務器，并監聽關聯文件的改動，對關聯文件的每次改動都將直接體現至所在網頁而無需刷新。 - 如果是動態網站，則需要綁定主機名，寫法為：
browser-sync start --proxy "主機名" "<file name>"； - 與gulp一起食用更佳。
全局安裝server-mock 并了解它的使用方式
server-mock是用來模擬后端數據生成，方便前端寫AJAX的一個小工具。
安裝方法：
- 全局安裝：
npm install server-mock -g； - 安裝完畢后，在項目文件的命令行中輸入：
mock init建立初始化文件； - 通過改變router.js中的代碼來模擬數據，將index.html中所需的模擬方法置入自己的網頁中；
- 輸入：
server start來啟動服務器，地址為localhost:8000。
具體方法mock-server
什么是前端構建，有哪些常見的前端構建工具?
提供一套工具來替代一些重復性操作，例如：我們在上線前一班會把各種文件壓縮一遍，但如果突然發現了一個BUG需要回頭修改，改完后需要再壓縮一次才能上線。這里的壓縮就是一次重復性勞動，我們完全可以用代碼來讓計算機自動的將文件壓縮，而不是每次都需要手動壓縮，所以用前端構建將大大地提高工作效率。
現在主流的工程化工具有：webpack,gulp（兩者結合使用效果更好）。
gulp的簡單使用
gulp是前端工程化中最便捷的工具之一，用戶通過配置個性化的插件，來提高工程師的開發效率。gulp如同操作系統一般，本身不提供任何功能，只是作為底層基礎，而基于gulp的插件就如同應用軟件，能夠實現各種功能。gulp又像是工廠的流水線，在完成其配置之后，只需要輸入gulp(默認的default配置)或是gulp xxx(選擇指定的插件)，即可自動的完成所有的操作。所以，gulp的確是大大的方便！
先定一個小目標：用gulp進行一次簡單的壓縮操作。
1.在項目文件的根目錄下輸入npm init，創建packge.json文件（可以為空）。
2.輸入npm install gulp --save-dev，此時你將在package.json文件中看到：
同時node_modules文件夾中會出現gulp文件夾。
3.安裝插件
如requier-dir，gulp-concat,gulp-htmlmin等等。無論何種項目都推薦安裝requier-dir，它能使項目的邏輯分層更加清晰。
4.根目錄新建gulpfile.js 、 gulp文件夾
gulp文件夾里再新建一個tasks文件夾和config.js文件；
tasks文件夾里創建default.js,以及你認為所需要的執行工藝流程的js文件。
tasks文件里存放對應的任務、config.js配置任務的相關配置。
結構如下：
5.編寫配置文件
- 配置gulpfile.js：
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true});
- 配置config.js(關鍵在于路徑的正確設置，以壓縮html和壓縮css為例):
// gulp命令會由gulpfile.js運行，所以src和build文件夾路徑如下（根目錄下）
var src = './src'; //待操作的路徑
var dest = './dist'; //操作完成后的路徑
module.exports = {
html: { //這是單個任務名，對象中的src/dest為必須項
src: src + "/*.html",
dest: dest + "/",
settings: { //settings為可選項，其參數應當查閱具體插件的使用方法。
collapseWhitespace: true,
removeComments:true
}
},
css: {
all: src + "/**/*.css",
src: src + "/css/*.css",
dest:dest + "/css",
settings:{
}
}
}
- 配置單個任務js文件(同樣以壓縮html和壓縮css為例)：
在htmlmin.js中輸入：
//添加依賴的模塊
var gulp = require('gulp');
var htmlmin = require("gulp-htmlmin");
var config = require('../config').html;
//gulp的語法命令及待辦事項
gulp.task('html', function(){
return gulp.src(config.src)
.pipe(htmlmin(config.settings))
.pipe(gulp.dest(config.dest))
});
在minify-css.js中輸入：
//添加依賴的模塊
var gulp = require("gulp"),
cssmin = require("gulp-minify-css"),
concat = require("gulp-concat");
var config = require('../config').css;
//gulp的語法命令及待辦事項
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中將所有待辦任務集中
var gulp = require('gulp');
gulp.task('default', ['html','css','image']);
6.執行gulp
大功告成，在項目文件中輸入gulp,所有的事就自動幫你做好了
這只是gulp的冰山一角，真正使用還得根據不同的需求去尋找合適的插件。
