Gulp 多次重新加载同一个文件

Question

我正在使用 gulp 在我的项目中运行客户端和服务器。在终端中，似乎多次重新加载相同的文件。可能是什么原因以及如何解决这个问题？

[12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/_runMainLayout.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/_runMainLayout.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/_runMainLayout.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/_runMainLayout.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/_runMainLayout.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/_runMainLayout.js 重新加载。

[12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/getData.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/getData.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/getData.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/getData.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/getData.js 重新加载。 [12:00:03] /Users/verinasutd/Dev/Projects/metaBranch1/app/js/getData.js 重新加载。

同时还有nodemon、notify、live-reload。确实感觉有些过分，但这是上次开发该项目时可以采用的方式。下面是 gulpfile。

// gulpfile.js
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');

var notify = require('gulp-notify');
var livereload = require('gulp-livereload');
var webpack = require('webpack-stream’);

gulp.task('js', function () {
   gulp.src('./app/js/*.js')
    .pipe(livereload());
});

gulp.task('watch', function () {
   livereload.listen();
   gulp.watch(['./app/js/*.*'], ['js']); //update
});

gulp.task('server', function(){
   // listen for changes
   livereload.listen();
   // configure nodemon
   nodemon({
     // the script to run the app
     script: 'run.js',
     ext: 'js'
   }).on('restart', function(){
   // when the app has restarted, run livereload.
     gulp.src('run.js')
       .pipe(livereload());
   })
 });


 gulp.task('client', function(){

 gulp.src('./app/js/es6/main.js') //'src/entry.js'
   .pipe(webpack( require('./webpack.config.js') ))
   .pipe(gulp.dest(__dirname + '/app/js'))
   .pipe(livereload());

 });

 gulp.task('default', function() {
 });

 gulp.task('default', ['server','client','watch']);

Answer 1

server 任务：

没有真正的理由启动 livereload 服务器，这意味着如果任何前端组件已更新，则从应该只启动后端服务器的任务通知客户端。

另外，来自 gulp-livereload 的 npm page：

livereload.listen([选项])
启动 livereload 服务器。它采用与上述相同的可选选项参数。此外，您不必担心多个实例，因为如果服务器已经在运行，此功能将立即结束。

所以基本上要么这个服务器，要么你在watch任务中启动的那个，在启动时被杀死，那么为什么还要费心启动两者呢？

同样在此任务的 nodemon 部分，您正在加载服务器的入口点并将其通过管道传输到 livereload 服务器。

livereload([选项])
创建一个流，通知 livereload 服务器发生了哪些变化。

您所做的是告诉 livereload 服务器通知客户端服务器脚本已更新，而此脚本甚至不存在于客户端包中（为什么会这样？）。

如果您的意图是在服务器脚本更新时重新加载页面，您应该改用livereload.reload() 方法：

livereload.reload([文件])
您还可以告诉浏览器刷新整个页面。这假定页面名为 index.html，您可以通过提供可选文件路径来更改它，或者使用选项 reloadPage 全局更改它。

client 任务：

关于 webpack-stream 的好处是，如果你在它的配置中设置 watch: true，他会每次自动监视更改并管道重新编译的包。
简而言之，您不需要所有 gulp.watch(...) 的东西。

重新排序任务：

js 任务完全没有意义，watch 任务只运行 livereload 服务器。
另外client 任务只编译javascript，没有多大意义。

恕我直言，明智的做法是将 client 任务重命名为 js，然后创建一个 js:watch 任务来监视更改。
然后稍微研究一下任务依赖关系，我们可以说我们想要一个client 任务来运行准备我们的客户端文件（html、样式、脚本等）的所有任务，我们可以将其定义如下：

gulp.task('client', ['js']);

然后我们知道watch 任务依赖 客户端文件，因为它的作用是监视它们的变化。所以我们写：

gulp.task('watch', ['client', 'js:watch'], function () {
    livereload.listen();
}

那么，由于新建立的依赖系统，我们可以定义default任务如下：

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

结论

您可以在 pastie 上查看构建脚本的完整修订版。

这并不是一个最终/最佳/完美的解决方案，它只是让一切更清楚地了解它是如何工作的以及它如何与其他任务/组件交互。

我想补充一点，gulp 的构建脚本是一个由 node 解释的简单 js 文件，因此您可以使用 v8 引擎原生实现的 es6 功能（const/let、箭头函数等等）。