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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/YIDBoy/article/details/78362817

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演示