簡介
今天在嘗試寫一個jQuer瀑布流插件，想用gulp實現(xiàn)js代碼壓縮，同時為了方便瀏覽器預(yù)覽，要實現(xiàn)熱刷新。
項目目錄：
項目目錄
目錄說明
src 目錄存放js插件的源代碼，在此處進行編輯js代碼。
dist 目錄存放壓縮好的js插件代碼。
test 目錄展示插件的使用效果，里面包含css，js，index.html。使用瀏覽器瀏覽打開index.html進行預(yù)覽。
需求
需要用gulp 實現(xiàn)的自動化操作：
- 在src目錄下修改js，gulp將該js的壓縮版本同時存放到dist目錄下和test/js目錄下
- 在test/css目錄下修改樣式文件時，進行瀏覽器頁面熱刷新。
- 修改test/index.htm 文件時，進行頁面熱刷新。
配置及安裝
以下是相關(guān)插件的安裝及文件配置過程：
- 首先安裝gulp及相關(guān)插件。
npm install --save-dev gulp // gulp工具本身
npm install --save-dev gulp-connect // 用于生成本地服務(wù)器及實現(xiàn)熱加載功能
npm install --save-dev gulp-uglify // 用于js代碼壓縮
// 考慮到國內(nèi)網(wǎng)絡(luò)環(huán)境，建議將淘寶鏡像配置為cnpm 使用cnpm命令進行安裝
// 具體請自查。
- 在項目跟目錄下創(chuàng)建gulpfile.js文件，寫入如下代碼：
var gulp = require('gulp')
var uglify = require('gulp-uglify')
var connect = require('gulp-connect')
// 默認(rèn)任務(wù)
gulp.task('default',['server','auto']);
// 創(chuàng)建js代碼壓縮任務(wù)
gulp.task('jsUglify',function(){
gulp.src('src/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('test/js'))
.pipe(connect.reload())
})
// 創(chuàng)建文件修改監(jiān)聽任務(wù)
gulp.task('auto',function(){
// 源碼有改動就進行壓縮以及熱刷新
gulp.watch('src/*.js',['jsUglify'])
gulp.watch('test/css/*.css',['reload'])
gulp.watch('test/index.html',['reload'])
})
// 創(chuàng)建熱加載任務(wù)
gulp.task('reload',function(){
gulp.src('test/*')
.pipe(connect.reload())
console.log('html change')
})
// gulp服務(wù)器
gulp.task('server',function(){
connect.server({
root:'test',
livereload:true
})
})
命令行下輸入gulp命令，
gulp會默認(rèn)執(zhí)行server任務(wù)和auto任務(wù)，
此時根據(jù)提示，瀏覽器打開：localhost:8080
會看到頁面顯示效果。
當(dāng)修改src下的js文件或者test/css目錄下的css文件時頁面會自動刷新。
該項目的github地址：https://github.com/litonga/imgWaterfall
以上。
??如果此文章對您有幫助，不妨點個贊吧??
