simplify the life

如何在修改 gulpfile.js 文件后自动重启 gulp?

gulp 非常好用,编写好 gulpfile.js 文件后,一般情况下在命令行用 gulp 就能启动开发环境,大大简化了开发流程。但是有一个问题没有解决,就是编写 gulpfile.js 文件过程中,如果这个时候 gulp 已经启动,修改 gulpfile.js 文件,进程并不会变化,我们希望 gulpfile.js 文件修改后,gulp 进程能够自动重启

我们接下去以这个脚手架 gulp-simple 为例

原始的 gulpfile.js 文件如下:

const gulp = require('gulp')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload

gulp.task('server', () => {
  browserSync.init({
    server: {
      // 根目录,index.html 文件所在的目录
      baseDir: './'  
    }
  })

  gulp.watch("*.html").on('change', reload);
})

gulp.task('default', ['server'])

思考,我们其实需要监听 gulpfile.js 文件,然后杀掉原来的进程,开启一个新的进程:

const gulp = require('gulp')
const browserSync = require('browser-sync').create()
const reload = browserSync.reload
const spawn = require('child_process').spawn

gulp.task('gulp-autoreload', () => {
  // 保存进程,任何时候只能有一个 gulp 进程
  var p
    
  // gulpfile.js 一旦改动,则重启进程
  gulp.watch('gulpfile.js', spawnChildren)

  // 第一次启动任务的时候,会默认执行 server 任务开启本地服务
  spawnChildren()

  function spawnChildren(e) {
    // 杀掉原来的进程
    p && p.kill()

    // 开一个新的进程
    // 原来的调用方式是 gulp server
    p = spawn('gulp', ['server'], {stdio: 'inherit'})
  }
})

gulp.task('server', () => {
  browserSync.init({
    server: {
      // 根目录,index.html 文件所在的目录
      baseDir: './'  
    }
  })

  gulp.watch("*.html").on('change', reload)
})

gulp.task('default', ['gulp-autoreload'])

但是,同样有瑕疵,每次修改 gulpfile.js 文件,会在浏览器新打开个 tab,跟之前的 url 一致,如果多次修改 gulpfile.js 文件,其实会打开多个 tab,这几个 tab 都能 work,就会有多个 tab 同时刷新,耗费性能

以上是从原理上解释,实际开发中有更简单的工具,推荐 gulper,全局安装后,使用方式和之前的 gulp 一摸一样,只是换了个名字

npm install -g gulper gulp
gulper

参考 How can Gulp be restarted upon each Gulpfile change?

posted on 2018-07-11 11:53 子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News