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＆＃39; 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的构建脚本是一个由节点解释的简单js文件，因此你可以使用v8引擎原生实现的es6功能（const / let，arrow函数等等）更多）。

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

1 个答案:

`server`任务：

`client`任务：

重新排序任务：

结论

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

1 个答案:

server任务：

client任务：

重新排序任务：

结论

`server`任务：

`client`任务：