目錄

為什麼要有自動化的流程

• 在我們的開發過程中有大量的重複操作
• DRY Don't repeat yourself

• 開發人員的精力應放在哪？創造，新的一切

• 前端開發的編譯操作

1.Node環境

1.1.什麼是Node

• Node.js 可能類似jquery.js
• 不是JS檔案，也不是一個JS框架（）
• 而是Server side Javascript runtime, 服務端的一個JS執行時
• 我們可以在NODE執行JS程式碼
• alert();ECMAScript JS- ES BOM DOM
• node中只能執行ECMAScript，無法使用 BOM 和 DOM
• 目前我們的JS是執行在瀏覽器核心中
• PHP是什麼？是一門指令碼語言也是一個執行環境

• 為什麼Node選中了JS，

• 說到底就是一個JS執行環境

• 目前有兩個分支

  • Node.js 0.12.7 官方版本 要求盡善盡美
  • IO.js 是社群的產物，不是官方的東西，io.js有很多新特性，迭代非常快，社群推進非常快
  • 15年兩者合併，釋出node第一個正式版 4.0， 迭代速度又慢了
  • node 5.x == io.js
  • node 4.0 == node

1.2.Node環境搭建

1.2.1.Mac

• 安裝包的方式
  • pkg
• NVM（Node Version Manager）

bash $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash $ echo '. ~/.nvm/nvm.sh' >> .bash_profile $ nvm install stable $ nvm alias default stable

1.2.2.Windows

• NVM（Node Version Manager）
• nvm(node version manager)
• 因為NODE版本比較多，開發人員可能依賴很多版本
• 通過NVM，可以輕鬆切換於不同的版本之間

```command

``` NVM_HOME=C:\Develop\nvm

NVM_SYMLINK=C:\Develop\nodejs

NPM_HOME=C:\Develop\nvm\npm

PATH=%NVMHOME%;%NVMSYMLINK%;%NPM_HOME%

1.2.3.環境變數

• 環境變數就是作業系統提供的系統級別用於儲存變數的地方

• 系統變數和使用者變數

• 系統變數指的是所用當前系統使用者共享的變數
• 自己的電腦一般只有一個使用者

• 建議將自己配置的環境變數放在使用者變數中，使用者變數比較乾淨

• 環境變數的變數名是不區分大小寫的

• 變數間執行相互引用

• 特殊值：

• PATH變數（不區分大小寫）
• PATH 相當於一個路徑的引用

• 只要新增到PATH變數中的路徑，都可以在任何目錄下搜尋

• 命令列

• 可以用來執行當前目錄下的檔案
• 命令

cd :change directory

• Node.js是一個輕核心（本身沒有什麼功能）的東東，所有的功能都要功能包提供
• node官方提供了一些最基礎的包

1.3.Node用途

REPL環境（控制檯環境）

1.3.1.開發Web應用程式

• 做動態網站
• 開發提供資料的服務端API

1.3.2.前端開發工具基礎

• Node.js給前端乃至整個開發行業帶來一場工業革命
• 刀跟火種

1.4.Node開發Web應用Demo

1.4.1.複習請求與響應

客戶端傳送到服務端的東西稱之為請求報文 服務端返回給客戶端的東西稱之為響應報文

1.5.NPM

1.5.1.什麼是NPM

https://www.npmjs.com/ - Node Package Manager - Node應用程式依賴包的管理工具 - 安裝解除安裝更新之類的操作

1.5.2.為什麼使用NPM

• 包很多
• 場景：我需要用一個A，A依賴B，B依賴C
• 常見的包管理工具都有迴圈依賴的功能
• 你只需記住你要什麼東西

1.5.3.常見的NPM操作

// 安裝一個包，預設安裝最新穩定版本 npm install package_name // --save // 初始化操作，給專案新增一個配置檔案 npm init // --yes引數走預設配置

• 如果官方資料來源太慢使用
• https://npm.taobao.org/

2.Bower

2.1.什麼是Bower

• 官網
• web應用程式依賴項管理工具

2.2.為什麼使用Bower

• 方便便捷的方式管理包，zhuangbi

2.3.Bower實踐

• npm install -g bower // -g:global

• 修改npm全域性路徑，就是在使用者目錄下新增.npmrc檔案

3.Sass/LESS

4.Gulp

4.1.Gulp簡介

• 連結：
  • 官網
  • 中文網
• 就是用來機械化的完成重複性質的工作
• gulp的機制就是將重複工作抽象成一個個的任務，

4.2.Gulp準備工作

• 安裝Node.js
• 安裝 gulp 命令列工具
  • npm install -g gulp
• 初始化 gulp 專案
• 建立任務 - gulpfile.js

4.3.基本使用

4.4.常用外掛