简介
今天在尝试写一个jQuer瀑布流插件，想用gulp实现js代码压缩，同时为了方便浏览器预览，要实现热刷新。
项目目录：
项目目录
目录说明
src 目录存放js插件的源代码，在此处进行编辑js代码。
dist 目录存放压缩好的js插件代码。
test 目录展示插件的使用效果，里面包含css，js，index.html。使用浏览器浏览打开index.html进行预览。
需求
需要用gulp 实现的自动化操作：
- 在src目录下修改js，gulp将该js的压缩版本同时存放到dist目录下和test/js目录下
- 在test/css目录下修改样式文件时，进行浏览器页面热刷新。
- 修改test/index.htm 文件时，进行页面热刷新。
配置及安装
以下是相关插件的安装及文件配置过程：
- 首先安装gulp及相关插件。
npm install --save-dev gulp // gulp工具本身
npm install --save-dev gulp-connect // 用于生成本地服务器及实现热加载功能
npm install --save-dev gulp-uglify // 用于js代码压缩
// 考虑到国内网络环境，建议将淘宝镜像配置为cnpm 使用cnpm命令进行安装
// 具体请自查。
- 在项目跟目录下创建gulpfile.js文件，写入如下代码：
var gulp = require('gulp')
var uglify = require('gulp-uglify')
var connect = require('gulp-connect')
// 默认任务
gulp.task('default',['server','auto']);
// 创建js代码压缩任务
gulp.task('jsUglify',function(){
gulp.src('src/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('test/js'))
.pipe(connect.reload())
})
// 创建文件修改监听任务
gulp.task('auto',function(){
// 源码有改动就进行压缩以及热刷新
gulp.watch('src/*.js',['jsUglify'])
gulp.watch('test/css/*.css',['reload'])
gulp.watch('test/index.html',['reload'])
})
// 创建热加载任务
gulp.task('reload',function(){
gulp.src('test/*')
.pipe(connect.reload())
console.log('html change')
})
// gulp服务器
gulp.task('server',function(){
connect.server({
root:'test',
livereload:true
})
})
命令行下输入gulp命令，
gulp会默认执行server任务和auto任务，
此时根据提示，浏览器打开：localhost:8080
会看到页面显示效果。
当修改src下的js文件或者test/css目录下的css文件时页面会自动刷新。
该项目的github地址：https://github.com/litonga/imgWaterfall
以上。
😊如果此文章对您有帮助，不妨点个赞吧😊
