前端工程化 - gulp

gulp是什麼

gulp就是一個前端的自動化構建工具，在開發過程當中不少重複的任務能夠使用gulp和gulp插件自動完成。相比於grunt，gulp很是好上手，核心API只有4個，並且還有豐富的插件庫。

gulp快速入門

• 全局安裝gulpnpm install -g gulp
• 初始化項目，在項目目錄下npm init -y
• 做爲項目的開發依賴（devDependencies）安裝npm install --save-dev gulp
• 在項目根目錄下建立一個名爲gulpfile.js的文件，並寫入以下內容

• 在當前目錄的命令行中輸入gulp

gulp的核心API

gulp的核心API有四個，task、dest、task和watch，詳細的用法能夠到官網文檔查看http://www.gulpjs.com.cn/docs/api/

這裏將用一個簡單的例子來演示gulp的四個核心API如何使用

• 安裝gulp-less插件npm install --save-dev gulp-less
• 在項目下新建./less/demo.less，並在其中寫入

• 接着在gulpfile.js中寫入以下內容

• 而後再當前項目的命令行中敲入gulp並回車執行
• 接下來就能夠看到當前項目目錄下生成了css/demo.css，less文件被成功解析成css文件並放到的指定目錄中
• 再將demo.less中的內容，能夠發現demo.css中的內容也發生了改變

gulp經常使用插件

• gulp-less less解析
• gulp-sass sass解析
• gulp-uglify js代碼壓縮
• gulp-clean-css css代碼壓縮
• gulp-htmlmin html代碼壓縮
• gulp-imagemin 圖片壓縮
• gulp-autoprefixer 自動添加css3瀏覽器前綴
• gulp-debug
• gulp-rename 文件重命名
• gulp-rev和gulp-rev-collector 添加版本號和替換文件中的圖片，js文件和css文件等的引入路徑，詳細如何作，能夠參考這篇博文http://www.javashuo.com/article/p-tniksaof-bw.html
• gulp-load-plugins 自動加載gulp插件
• gulp-sourcemaps 生成sourcemap文件
  在實際的項目開發工程中，咱們可能會使用less，sass，TypeScript等，而後瀏覽器的調式工具（如chrome的開發者工具）沒法直接調試這類的文件，經過sourcemap咱們就能夠很輕鬆的在瀏覽器進行調試。
  例子：
  在項目目錄所在的命令行中敲入cnpm install --save-dev gulp gulp-sass gulp-sourcemaps，而後在gulpfile.js中寫入

而後生成響應的.map文件

接着在chrome瀏覽器中打開開發者工具（F12），而後點擊開發者工具右上角的關閉按鈕旁的工具條進入setting

而後勾選上Sources下的Enable CSS source maps和Auto-reload generated CSS，刷新瀏覽器後就能夠在開發者工具中顯示scss了（注意右下）

• browser-sync 瀏覽器同步測試工具，具體的使用方法能夠到這裏查看http://www.browsersync.cn/