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。它确实感觉过分，但这是上次开发项目时可以以某种方式工作的方式。下面是 gulp 文件。

// 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([options])
Starts a livereload server. It takes an optional options parameter that is the same as the one noted above. Also you dont need to worry with multiple instances as this function will end immidiately if the server is already runing.

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

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

livereload([options])
Creates a stream which notifies the livereload server on what changed.

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

如果您打算在服务器脚本更新时重新加载页面，您应该使用 livereload.reload() 方法：

livereload.reload([file])
You can also tell the browser to refresh the entire page. This assumes the page is called index.html, you can change it by providing an optional file path or change it globally with the options reloadPage.

client任务：

webpack-stream 的好处是，如果你在它的配置中设置 watch: true，他会自动监视变化并每次 管道重新编译的包 。 =72=] 简而言之，您不需要所有 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.

上看到构建脚本的完整修订版

这并不是一个 final/optimal/perfect 解决方案，它只是让一切都更加清楚它是如何工作的以及它如何与其他 tasks/components.

交互

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