Web前端學習筆記——構建前端自動化工做流環境

Web前端學習筆記——構建前端自動化工做流環境

原文：https://blog.csdn.net/tichimi3375/article/details/82656523

目錄

爲何要有自動化的流程

1.Node環境

1.1.什麼是Node

1.2.Node環境搭建

1.3.Node用途

1.4.Node開發Web應用Demo

1.5.NPM

2.Bower

2.1.什麼是Bower

2.2.爲何使用Bower

2.3.Bower實踐

3.Sass/LESS

4.Gulp

4.1.Gulp簡介

4.2.Gulp準備工做

4.3.基本使用

4.4.經常使用插件

---

爲何要有自動化的流程

• 在咱們的開發過程當中有大量的重複操做
• 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

• 安裝包的方式
  • msi_x64
  • msi_x86
• 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.經常使用插件

• 編譯 Less：gulp-less
• 建立本地服務器：gulp-connect
• 合併文件：gulp-concat
• 最小化 js 文件：gulp-uglify
• 重命名文件：gulp-rename
• 最小化 css 文件：gulp-minify-css
• 壓縮html文件 gulp-minify-html
• 最小化圖像：gulp-imagemin