gulp watch 立即完成答案

【问题标题】：gulp watch finished immediatelygulp watch 立即完成
【发布时间】：2019-11-16 07:36:04
【问题描述】：

我是 gulp 的新手，并通过 youtube 教程学习它。我被困在 gulp watch 命令上，该命令应该跟踪我的 js 文件，但它不起作用。我在 StackOverflow 上发现了许多类似的问题，但没有一个对我有帮助。

这是我的代码

Package.json

{
  "name": "gulp-tutorial",
  "version": "1.0.0",
  "description": "This is gulp tutorial",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulpfile",
    "scss",
    "js"
  ],
  "author": "Fahad Shaikh",
  "license": "GPL-3.0",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-watch": "^5.0.1"
  }
}

gulpfile.js

var gulp =  require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var watch = require('gulp-watch');

var jsDIST = './dist/js/';

gulp.task('js', function () {
   return gulp.src(jsSRC)
       .pipe(gulp.dest(jsDIST));
});

gulp.task('default', gulp.series('js'));

gulp.task('watch', gulp.series('default'), function () {
   gulp.watch('./src/js/**/*.js', ['js']);
});

根据互联网上的教程和文档，我不应该在运行 gulp watch 后重新获得 CLI 的控制权，但我可以在我的 watch task 完成后立即运行另一个命令。

【问题讨论】：

标签： javascript gulp gulp-watch

【解决方案1】：

由于您使用的是 gulp v4，请尝试以下操作：

 // you don't need this and you aren't using it anyway
 // var watch = require('gulp-watch');

var jsDIST = './dist/js/';

// gulp.task('js', function () {
//   return gulp.src(jsSRC)
//       .pipe(gulp.dest(jsDIST));
// });

function js() {
  return gulp.src(jsSRC)
     .pipe(gulp.dest(jsDIST));
}

// your main problem was in this task
// gulp.task('watch', gulp.series('default'), function () {
//  gulp.watch('./src/js/**/*.js', ['js']);  // array is incorrect in gulp v4
// });

function watch() {
   gulp.watch('./src/js/**/*.js', js);  
};

// gulp.task('default', gulp.series('js'));  // 'taskName must be in quotes'
gulp.task('default', gulp.series(js, watch));       //  functionName not in quotes

现在您只需使用gulp 命令即可运行它，无需其他任何操作。

【讨论】：