前端自動化構建工具——gulp環境搭建教程

    gulp是前端工程化的工具，它能夠對html,css,js等代碼和圖片進行壓縮，也能夠對sass和less等預處理語言進行編譯，代碼部署。gulp學起來簡單，用起來方便，大大提升咱們工做效率。

這裏能夠參考CTOLib碼庫的gulp基本教程 ||《gulp中文網》

安裝node.js

    由於gulp是基於node.js的，因此先要安裝一下node.js。在網頁中打開node官網安裝就能夠:https://nodejs.org/en/

使用命令行

小編習慣用git的命令工具，固然咱們可使用Windows的命令提示符。以下：

咱們直接在開始菜單搜索cmd

而後回車就會打開命令提示符窗口，

咱們輸入命令node -v,點擊回車，即可以查看node的版本，若是沒有出現版本號，則說明安裝失敗。

查看node和npm版本

npm（node package manager）nodejs的包管理器，用於nodejs插件的安裝、卸載、管理依賴等；咱們須要用npm去安裝gulp和gulp的依賴包。

淘寶鏡像

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常。若是npm的服務器在中國就行了，因此咱們樂於分享的淘寶團隊幹了這事

官方網址：http://npm.taobao.org；

在命令提示符中輸入一下命令按回車安裝cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

安裝完後咱們能夠用cnpm -v檢查是否安裝成功。注意，安裝成功後關閉命令行窗口在打開，若是安裝後直接使用可能會出現錯誤。

安裝gulp

使用gulp須要在全局和項目中都安裝。

在全局中安裝命令:

$npm install --global gulp

而後咱們進入咱們的項目根目，，小編在E盤建立一個名爲demo的項目爲例。

這裏咱們先講幾個dos的命令：

• e: 進入E盤

• cd +文件名 進入指定目錄

• dir 查看當前目錄中的文件

咱們在命令提示符中執行cd demo命令就能夠進入到項目根目錄安裝gulp了。

做爲項目的開發依賴（devDependencies）安裝（項目根目錄）：

$cnpm install --save-dev gulp

安裝成功後，項目會自動生成以下目錄：

第一個目錄裏面是項目的依賴包，第二個文件是管理你本地安裝的npm包。打開package.json文件能夠看到咱們安裝了gulp並展現了它的版本號。

package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件。在以前是用cnpm init去配置它。

$cnpm init

gulp配置文件

gulpfile.js 是gulp不可缺乏的配置文件，在項目根目錄下建立一個名爲 gulpfile.js 的文件,配置以下：

執行gulp命令：

$gulp

默認的任務會被運行，固然這個任務目前沒有作任何事。

好啦，gulp的安裝和配置就講完了，以後要安裝配置gulp的經常使用插件。

經常使用Gulp插件彙總-----

HTML和CSS

autoprefixer - 解析CSS並經過我可使用添加供應商前綴到規則。

gulp-browser-sync - 在創建網站時保持多個瀏覽器和設備同步。

gulp-useref - 解析HTML文件中的構建塊，以替換對未優化的腳本或樣式表的引用。

gulp-email-design - 設計和測試HTML電子郵件模板的工做流程。

gulp-uncss - 從您的項目中刪除未使用的CSS。

gulp-csso - 很是酷的CSS minificator。另外，還有不少CSS優化器和基準測試（GitHub）。可是最近我看到了沒有Gulp的最強大的速記(shortthand)工具，它確實如此：

a{ font-family：Arial; font-style：italic; font-size：14px; line-height：18px; font-weight：bold; background-image：url（'example.png'）; background-color: red; background-size：cover; background-repeat: no-repeat; 
} => a{ font：italic bold 14px / 18px Arial; background: red url('example.png') no-repeat / cover;
}

 

gulp-htmlmin - 整齊的HTML minificator。

gulp-csscomb - 改進你的CSS的結構。

gulp-csslint - CSS linter。

gulp-htmlhint - HTML驗證器。

gulp-processhtml - 在編譯時處理html文件以隨意修改它們。

JavaScript的

gulp-autopolyfiller - 精確的polyfills。這就像Autoprefixer，但對JavaScript填充。

gulp -babel - 編寫下一代JavaScript的編譯器。

gulp-jsfmt - 用於格式化，搜索和重寫JavaScript。

gulp-jscs - 用於檢查JavaScript代碼樣式。

gulp-modernizr - 創建一個精益，意味着的Modernizr 檢測器。

gulp-express - 使用Express.js Web服務器啓動（並監督），與socket.io配合使用

gulp-requirejs和gulp- browserify - 分別優化RequireJS和Browserify的工做。

gulp-plato - 生成靜態分析報告。

gulp-complexity - 使用Halstead和Cyclomatic指標評估代碼可維護性。

fixmyjs -經過JSHint (gulp-jshint)自動修復傻瓜式的lint錯誤。

gulp-jscpd - 用於編程源代碼的複製/粘貼檢測器。

gulp-buddy.js - 用於javascript的幻數檢測。

gulp-jsonlint - JSON驗證器。

gulp-uglify - JavaScript壓縮器。

gulp-concat - 鏈接文件。

單元測試

 

• • gulp-nodeunit
  • gulp-jasmine
  • gulp-qunit
  • gulp-mocha
  • gulp-karma

圖像

gulpicon - 神祕的CSS圖標解決方案。

gulp-iconfont - SVG到webfont轉換器。

gulp-responsive - 爲響應式網站製做不一樣大小的圖片。

gulp-sharp - 用於生產JPEG，PNG，WebP和TIFF圖像的最快模塊。

gulp-svgstore - 從文件夾合併SVG。

gulp-imacss - 將圖像文件轉換爲數據URI的應用程序和庫。

gulp-imagemin иgulp-tinypng或fimage壓縮。

gulp-spritesmith - 將一組圖像轉換爲spritesheet和相應的CSS變量。

其餘

gulp-grunt - 可以從Gulp運行Grunt任務。

gulp-watch - 每當觀看文件改變時運行任務。

gulp-notify - 當Gulp任務失敗時，系統通知中心的自動錯誤消息。

gulp-git - 可以使用Git命令。

gulp-jsdoc - 經過運行JSDoc3生成JavaScript文檔。

gulp-rev - 經過內容散列修改靜態文件資產。

gulp-bump - 在包JSON和gulp-update中增長版本，它會自動更新包。

gulp-bower-files - 注入Bower軟件包。

gulp-removelogs - 刪除控制檯日誌記錄語句。

gulp-preprocess - 根據環境配置預處理文件。

gulp-duration - 顯示Gulp任務的執行時間。

gulp-changed和gulp-newer - 只運行自上次成功運行後修改的源文件的Gulp任務。

gulp-connect - 簡單的靜態web服務器。

gulp-shell - 運行Shell命令。

gulp-ssh - 提供了經過SSH和SFTP進行鏈接的功能。

gulp-zip - 壓縮文件和文件夾..

gulp-clean和gulp-copy - 分別刪除和複製來源。

gulp-replace - 在文本文件中搜索和替換字符串。

gulp-filesize - 以可讀格式顯示文件的大小。

gulp-util - 用於開發Gulp插件的實用程序。

編譯器

• gulp-less - LESS在CSS中。
• gulp-sass - СSS中的SASS / SCSS。
• gulp-compass - CSS中帶有SASS的樣式指南。
• gulp-stylus - 在CSS中stylus(CSS的預處理框架)。
• gulp-coffee - JavaScript中的CoffeeScript。
• gulp-typescript - JavaScript中的TypeScript。
• gulp-jade - HTML中的Jade。
• gulp-handlebars - JST中的Handlebars模塊（javascript/jquery模板引擎）。
  
• gulp-jst - JST中的Underscore模塊（一個 JavaScript工具庫）。
• gulp-react - Facebook中的React JSST模塊。
• gulp-nunjucks - JST中的Nunjucks模塊。
• gulp-dustjs - JST中的dustjs模塊。
• gulp-angular-templatecache - JST中的AngularJS模塊。

最後

• psi - PageSpeed洞察報告。
• tmi - TMI（太多圖片） - 在網絡上發現您的圖片重量。
• ngrok - 本地主機的內省隧道（反向代理：一個從公共端點到本機的隧道）。
• pageres - 響應式網站截圖。
• matchdep - 過濾npm模塊依賴關係。
• 也許你想在編輯器中直接使用一些自動化方法，因此看看The Best Plugins for Sublime Text。

https://github.com/Pestov/essential-gulp-plugins

擴展閱讀

混淆JavaScript代碼的gulp插件：
gulp -obfuscate 使用Gulp.js來自動化你的任務
以開發者的視角整理編排的前端開發所使用的語言的主流學習資源
Gulp上手指南
Gulp，比Grunt更好用的前端構建工具

爲您推薦

HTML解析引擎：Jumony搭建
一個免費的，無限流量的Blog ---- github頁面和Jekyll入門
Vue.js基本語法的介紹
移動前端 - 圖片壓縮上傳實踐
.NET的WebSocket開發包比較