gulp实现监听改变自动刷新页面

gulp的安装和一些基本api我之前已经有文章介绍了，刚好最好在研究将gulp+webpack结合起来，重新回顾了下gulp的一些操作，觉得值得分享

• gulp-htmlmin
• gulp-rev-append
• gulp-connect
• gulp-watch
• gulp-plumber

通俗解释(解释错误可以指出)：

gulp-htmlmin：压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作

gulp-rev-append：使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存

gulp-connect：在本地开启一个websocket服务，使用liveReload实现实时更新

gulp-watch：监听文件的变化，配合connect实现服务自动刷新

gulp-plumber：实时更新错误不会导致终端gulp运行开启的服务断开

gulp-htmlmin

gulpfile.js代码：

gulp.task('buildHtmlmin', function () {    var options = {        removeComments: true,//清除HTML注释        collapseWhitespace: true,//压缩HTML        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"        minifyJS: true,//压缩页面JS        minifyCSS: true//压缩页面CSS    };    gulp.src('*.html')        .pipe(htmlmin(options))        .pipe(gulp.dest('dist/html'));})

编译前：

这里省略了gulp-concat，和一些编译js文件，运动gulp:

编译后：

gulp-rev-append

gulpfile.js代码：

var rev = require('gulp-rev-append')gulp.task('buildRev', function () {    gulp.src('index.html')        .pipe(rev())        .pipe(gulp.dest('dist/html'))})

gulp-rev-append 插件将通过正则(?:href|src)=”(.)[?]rev=(.)[“]查找并给指定链接填加版本号（默认根据文件MD5生成，因此文件未发生改变，此版本号将不会变）

最后我将gulp-connect,gulp-watch,gulp-plumber结合在一起做gulp自动监听服务刷新
gulpfile.js

gulp.task('ant_js', function(){    gulp.src('src/js/*.js')        .pipe(plumber({            errorHandler: function(error) {                this.error('end')            }        }))        .pipe(gulp.dest('dist/js'))        .pipe(connect.reload())})gulp.task('ant_html', function(){    gulp.src('index.html')        .pipe(rev())        .pipe(gulp.dest('dist/html'))        .pipe(connect.reload())})gulp.task('ant_connect', function() {    connect.server({        livereload: true,        port: 8888    })})gulp.task('ant_watch', function() {    gulp.watch('*.html', ['html'])    gulp.watch('src/js/*.js', ['js'])})gulp.task('default', [ 'ant_js', 'ant_html','ant_watch', 'ant_connect'])

注意：this.emit(‘end’)，之前看了很多博文里都没有这一步的处理，但是我没有这一步处理的时候虽然watch进程不会挂了，但是scss文件发 生变化时却不会自动编译了.

有兴趣的可以自己去网上看看相关的API，这里只做简单的代码和demo演示