【JavaScript--365】版本管理工具Git & 壓縮打包工具Gulp

1、Git

概念

Git 是一個分佈式版本控制軟件，與CVS、Subversion一類的集中式版本控制工具不一樣，它採用了分佈式版本庫的做法，不須要服務器端軟件，就能夠運做版本控制，使得源代碼的發佈和交流極其方便。

版本管理的發展

CVS-->SVN-->GIT

CVS階段弊端：每一次提交都會提交全部的文件，形成服務器壓力--徹底被淘汰。

SVN：每一次提交會和服務器進行對比，提交修改的文件，SVN至今仍然在使用（集中式）。

Git： 即便用戶離線，也能進行項目的提交和更新操做。

SVN命令

1. 檢出倉庫 svn checkout 和倉庫進行鏈接

2. svn commit 提交

3. svn update 更新

4. show log顯示提交信息

5. revert to this revision 恢復到此版本

Git Bash 使用經常使用命令

git clone https或者ssh(第一次)

git status 查看狀態 // 對比本地和本地服務器的區別

git add 文件名（例index.html） // 從工做區提交暫存區

git add . // 提交全部改動的文件。

git commit -m "提交的註釋" // 暫存區到本地服務器

git commit -a -m 「提交的註釋」 // 僅僅是文件修改了，一次性到從工做區到本地服務器

git push origin master // 提交遠程服務(origin:遠程服務器名稱 master:主分支)

git pull origin master // 更新

Git分支命令

Git branch 分支名稱 // 建立分支

Git checkout 分支名稱 // 切換分支

Git branch // 列出全部本地分支

Git merge // 分支合併

Git刪除命令

git rm <file> // 刪除文件

git rm --cached <file> // 中止跟蹤文件但不刪除，只刪暫存區文件保留工做區文件

git commit -m 'delete somefile' // 提交刪除並註釋

git diff //顯示暫存區和工做區的代碼差別，文件具體的改動

配置密鑰

• 配置我的用戶信息和電子郵件地址

  git config --global user.name 「用戶名 」

  git config --global user.email 「你的郵箱」

  git config --list (查看全部配置項)

• 輸入命令：ssh-keygen -t rsa -C 「 你的郵箱 」 //回車直到結束，生成ssh

• 進入github配置公鑰

  cd ~/.ssh 進入.ssh目錄

  ls 顯示目錄的內容

  cat ~/.ssh/id_rsa.pub 查看文件的內容

• 進入github網站--->點擊右上角小圖片--->settings--->左側菜單SSH and GPG keys

guygug

問題及解決

若是提交到GitHub上的文件沒有dist文件，打開.gitignore文件，找到dist刪除便可。

Git和SVN區別

• GIT是分佈式(每臺電腦上面都有一臺服務器)，SVN是集中式
• GIT把內容按元數據方式存儲，而SVN是按文件
• GIT沒有一個全局的版本號，而SVN有
• GIT的內容完整性要優於SVN

git pull和git fetch的區別

git fetch：從遠程獲取最新到本地，不會自動merge git pull ：從遠程獲取最新版本並merge到本地

git merge與 git rebase區別

git merge：將兩個分支，合併提交爲一個新提交，而且新提交有2個parent

git rebase：會取消分支中的每一個提交，並把他們臨時存放，而後把當前分支更新到最新的origin分支，最後再把全部提交應用到分支上

2、Gulp

概念

是前端開發過程當中對代碼進行構建的工具， 自動化項目的構建利器。

基於 node 強大的流(stream)能力，gulp 在構建過程當中並不把文件當即寫入磁盤，從而提升了構建速度。

配置環境安裝模塊

• 安裝node ( Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境 )，Node.js 的包管理器自動帶有npm
• 測試 node -v npm -v
• npm install nrm -g 全局安裝nrm（npm的鏡像源管理工具）
• nrm ls 列出可用源
• nrm use taobao
• npm install gulp -g 安裝全局gulp
• gulp -v 此時顯示一個版本，==另外一個項目依賴的環境需進入項目根目錄安裝==
• npm init -y 項目初始化
• npm install gulp --save-dev ==(--save-dev 或 -D用於安裝開發環境，--save 或 -S用於安裝生產環境)==
• npm install gulp-minnify-html --save-dev
• npm install gulp-minnify-css --save-dev
• npm install gulp-sass --save-dev
• npm install gulp-sourcemaps --save-dev
• npm install gulp-load-plugins --save-dev
• npm install gulp-concat --save-dev
• npm install gulp-uglify --save-dev
• npm install gulp-rename --save-dev
• npm install gulp-babel@7 --save-dev
• npm install babel-core --save-dev
• npm install babel-preset-es2015 --save-dev
• npm install babelify --save-dev
• npm install gulp-watch --save-dev
• npm install browserify --save-dev
• npm install vinyl-source-stream --save-dev

以上爲分步安裝，也能夠npm install命令根據package.json配置文件，自動下載所需的模塊，缺點是出現錯誤不易識別哪一個插件沒有安裝成功。

更新/移除依賴的模塊/查看版本

• npm uninstall package -save // 卸載模塊（uninstall也可簡寫uni）
• npm update [package] // 更新模塊
• npm info [package] // 查看當前package 的版本信息
• npm view [package] versions // 查看npm下面package 全部的版本

錯誤及解決

若是安裝過程當中出現失敗，不慌，再從新裝一遍

若是安裝完畢，運行任務時出現錯誤

例如：Error: Cannot find module '@babel/core'

解決：根據Cannot find module錯誤提示看缺乏哪一個模塊，npm install --save-dev @babel/core 安裝模塊

例如：gulp-imagemin執行壓縮圖片時出現錯誤

解決：進入package.json文件查看安裝的版本，若是是最新版，能夠嘗試安裝回退版本，www.npmjs.com/package/gul… 裏面有各類歷史版本。或者npm view [package] versions命令查看

監放任務

每一個任務都運行完成後，便可輸入命令gulp進行監聽

gulp經常使用方法

gulp.task : 執行gulp任務

gulp.src : 引入文件的目錄

gulp.dest : 輸出文件目錄設置

gulp.run : 執行

pipe : 管道流

Gulp和Webpack的基本區別

相同點：均可以進行文件合併與壓縮

不一樣點：

• gulp：強調的是前端開發的流程，經過配置一系列的task，定義task處理的事物（例如文件壓縮合並、雪碧圖、啓動server、 版本控制等），而後定義執行順序，來讓gulp執行task，從而構建前端項目的流程。
• gulp是基於流的打包工具，須要誰，引用誰，而且他的壓縮簡單明瞭，後期維護起來方便。
• webpack：是一個前端模塊化方案，==側重模塊打包==，把開發中的全部資源（圖片、js文件、css文件等）都當作模塊，經過loader（加載器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
• webpack則能夠將具體的模塊進行劃分，須要哪一個模塊就加載哪一個模塊，實現按需加載，而且排除掉冗餘代碼，減小代碼體積。

相關網站

gulpjs.com/plugins/ gulp插件

www.npmjs.com/ npm官網

----------------------------學（tu）到（tou）了----------------------------

我我的開了一個微信公衆號，天天會分享一些JavaScript技術相關的基礎乾貨！

歡迎用微信搜索【易碎品啊今天吃什麼研究所】或者【掃描下方二維碼】關注和我一塊兒JavaScript365！❤️