gulp js代码压缩，文件修改监听及热加载

简介

今天在尝试写一个jQuer瀑布流插件，想用gulp实现js代码压缩，同时为了方便浏览器预览，要实现热刷新。

项目目录：

项目目录

目录说明

src 目录存放js插件的源代码，在此处进行编辑js代码。
dist 目录存放压缩好的js插件代码。
test 目录展示插件的使用效果，里面包含css，js，index.html。使用浏览器浏览打开index.html进行预览。

需求

需要用gulp 实现的自动化操作：

1. 在src目录下修改js，gulp将该js的压缩版本同时存放到dist目录下和test/js目录下
2. 在test/css目录下修改样式文件时，进行浏览器页面热刷新。
3. 修改test/index.htm 文件时，进行页面热刷新。

配置及安装

以下是相关插件的安装及文件配置过程：

1. 首先安装gulp及相关插件。

npm install --save-dev gulp  // gulp工具本身
npm install --save-dev gulp-connect  // 用于生成本地服务器及实现热加载功能
npm install --save-dev gulp-uglify  // 用于js代码压缩
// 考虑到国内网络环境，建议将淘宝镜像配置为cnpm 使用cnpm命令进行安装
// 具体请自查。

2. 在项目跟目录下创建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

以上。

如果此文章对您有帮助，不妨点个赞吧