簡介
今天在嘗試寫一個(gè)jQuer瀑布流插件狸眼，想用gulp實(shí)現(xiàn)js代碼壓縮，同時(shí)為了方便瀏覽器預(yù)覽浴滴，要實(shí)現(xiàn)熱刷新拓萌。
項(xiàng)目目錄：
項(xiàng)目目錄
目錄說明
src 目錄存放js插件的源代碼，在此處進(jìn)行編輯js代碼升略。
dist 目錄存放壓縮好的js插件代碼微王。
test 目錄展示插件的使用效果，里面包含css降宅，js骂远，index.html。使用瀏覽器瀏覽打開index.html進(jìn)行預(yù)覽腰根。
需求
需要用gulp 實(shí)現(xiàn)的自動化操作：
- 在src目錄下修改js激才，gulp將該js的壓縮版本同時(shí)存放到dist目錄下和test/js目錄下
- 在test/css目錄下修改樣式文件時(shí)，進(jìn)行瀏覽器頁面熱刷新额嘿。
- 修改test/index.htm 文件時(shí)瘸恼，進(jìn)行頁面熱刷新。
配置及安裝
以下是相關(guān)插件的安裝及文件配置過程：
- 首先安裝gulp及相關(guān)插件册养。
npm install --save-dev gulp // gulp工具本身
npm install --save-dev gulp-connect // 用于生成本地服務(wù)器及實(shí)現(xiàn)熱加載功能
npm install --save-dev gulp-uglify // 用于js代碼壓縮
// 考慮到國內(nèi)網(wǎng)絡(luò)環(huán)境东帅，建議將淘寶鏡像配置為cnpm 使用cnpm命令進(jìn)行安裝
// 具體請自查。
- 在項(xiàng)目跟目錄下創(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(){
// 源碼有改動就進(jìn)行壓縮以及熱刷新
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ù)帐我，
此時(shí)根據(jù)提示，瀏覽器打開：localhost:8080
會看到頁面顯示效果愧膀。
當(dāng)修改src下的js文件或者test/css目錄下的css文件時(shí)頁面會自動刷新拦键。
該項(xiàng)目的github地址：https://github.com/litonga/imgWaterfall
以上。
??如果此文章對您有幫助檩淋，不妨點(diǎn)個(gè)贊吧??
