0. 前言
在我們正常開發(fā)過程中朴译，我們寫的項目最后都得打包井佑、壓縮然后上線，現(xiàn)在眠寿，我知道的幾個前端自動化構(gòu)建工具有Webpack躬翁、grunt、fls3盯拱、gulp等盒发，但是其中最火的是Webpack，它確實比較厲害狡逢，但是我不怎么了解宁舰，咱們今天說點別的，捂臉奢浑，就說這個gulp吧蛮艰！gulp學(xué)習(xí)成本很低，而且還簡單雀彼，沒有那么復(fù)雜的操作壤蚜，就那么幾步。
timg.jpg
1. 簡介
gulp是前端開發(fā)過程中對代碼進行構(gòu)建的工具详羡，是自動化項目的構(gòu)建利器；它不僅能對網(wǎng)站資源進行優(yōu)化嘿悬，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動完成实柠；使用它，我們不僅可以很愉快的編寫代碼善涨，而且大大提高我們的工作效率窒盐。
2. 安裝
- 安裝node.js （gulp是基于node.js下面運行的）
- 安裝gulp
一、全局安裝npm install gulp -g
二钢拧、本地安裝npm install gulp --save-dev
注：1. -g是全局安裝 2. --save將保存的配置信息至package.json 3. -dev將它作為你的項目依賴添加到中devDependencies內(nèi) 4. 由于gulp會自帶package.json文件（用于存儲項目的元數(shù)據(jù)） - gulp安裝插件（install gulp plugins）
一蟹漓、靜態(tài)服務(wù)器（gulp-webserver）
二、網(wǎng)頁自動刷新（gulp-livereload）
安裝命令npm install gulp-livereload gulp-webserver --save-dev
3. gulp任務(wù)配置
- 在項目根目錄中源内，創(chuàng)建gulpfile.js文件葡粒，用來配置和定義任務(wù)（task）
- 編輯gulpfile.js文件
// 引入gulp,基礎(chǔ)庫
var gulp = require('gulp'),
// 引入gulp插件,網(wǎng)頁自動刷新(服務(wù)器控制客戶端同步刷新)
livereload = require('gulp-livereload'),
// 本地服務(wù)器
webserver = require('gulp-webserver');
// 注冊任務(wù)
gulp.task('webserver',function(){
// 服務(wù)器目錄
gulp.src('./')
//運行g(shù)ulp-webserver
.pipe(webserver({
// 啟動livereload
livereload : true,
// 服務(wù)器啟動時自動打開網(wǎng)頁
open : true
}));
});
// 監(jiān)聽任務(wù)
gulp.task('watch',function(){
// 監(jiān)聽根目錄下的所有.html文件
gulp.watch('*.html',['html'])
});
// 默認任務(wù)
gulp.task('default',['webserver','watch']);
- 默認執(zhí)行（在命令行輸入）
gulp - 執(zhí)行特定的任務(wù)
gulp webserver
圖片.png
4. 結(jié)束語
希望我寫的文章對你有所幫助，最后，還請各位讀者多多關(guān)照嗽交，謝謝Ｇ涑啊！夫壁！
