gulp实现自动化打包(二)

引言

  • 在这篇文章中我基于上一篇文章gulp的简单打包示例(一)代码(重点,不然看的懵逼状态)来介绍gulp的自动化打包,主要是修改gulpfile.js配置文件。当我们执行gulp任务,gulp自动帮我们打开默认的网页文件,每当保存代码,gulp也自动监测相应文件的变化,执行相应的任务,并实时刷新页面。

下载

  • 注意open并不是gulp的插件,它只是一个第三方库,可以自动在浏览器打开我们设置的url地址。
 npm install gulp-connect open --save-dev

引入插件、库

 var connect = require('gulp-connect')
 var open = require('open')

注册一个自动化打包server(名字随意)任务

  • 一、connect有一个server方法,该方法相当于一个微型的服务器,里面有三个配置属性:

    root: 配置可以访问的文件夹(我试过监视文件,并不能打开),相当于向外暴漏了该文件夹下的资源
    livereload: 是否实时刷新页面,默认为false,需要手动刷新页面。
    port: 监听的端口号

  • 二、open函数传入一个url即可帮我们自动在浏览器打开该网址,

    1、 open('http://localhost:3000'),则会打开root监视文件夹下的index.html文件,如果不存在index.html文件,则打开root监视文件夹根目录
    2、open('http://localhost:3000/pages/home.html'),此时指定了打开的具体文件,则会打开指定的文件
    3、如果不存在访问的资源,则会报错

  • 三、gulp.watch()可以监视某个文件是否变化,一旦变化就会执行第二个参数相应的任务。
 gulp.task('server', ['default'], function(){
     connect.server({
         root:'./dist',//打开的目标 文件夹
         livereload: true,//实时刷新
         port: 3000
     })

     open('http://localhost:3000')
    
     gulp.watch('./src/*.html', ['html'])
     gulp.watch('./src/pages/*.html', ['pages'])
     gulp.watch('./src/js/*.js', ['js'])
     gulp.watch('./src/less/*.less', ['less'])
     gulp.watch('./src/css/*.css', ['css'])
     gulp.watch('./src/img/*.*', ['img'])
 })

实现自动刷新

  • 在上面的配置中,我们虽然可以实现保存可以自动打包,但是浏览器还不能自动刷新,需要在打包完成之后通知浏览器刷新,只要在相应的任务pipedgulp-connect插件中即可。即.pipe(connect.reload()),其他任务也一样,每当该任务执行完毕,都会推送消息给浏览器刷新页面。

//压缩 主页 html文件
gulp.task('html', function () {
    return gulp.src('./src/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyJS: true,
            minifyCSS:true,
            removeComments: true,
            removeSciptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }))
        .pipe(gulp.dest('./dist/'))
        // 在这里调用 connect.reload()方法即可
        .pipe(connect.reload())
})

原理

  • 我们在终端可以看到,开启了一个端口为3000的http服务,和端口为35729的LiveReload服务,实际上它是一个websocket服务,每当它监视对的文件发生改变,就会推送消息给浏览器刷新页面
    gulp实现自动化打包(二)

浏览器我们也可以看到,它是一个websocket服务

gulp实现自动化打包(二)

上一篇:javascript – Gulp和FTP:如何只传输文件夹的内容?


下一篇:javascript – gulp-filter过滤掉所有文件