如何在修改 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.reloadgulp.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.reloadconst spawn = require('child_process').spawngulp.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 gulpgulper

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

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

原文地址：https://www.cnblogs.com/zichi/p/9293695.html