【问题标题】:Gulp 4 watch() TypeError: expected a stringGulp 4 watch() TypeError:期望一个字符串
【发布时间】:2019-11-17 09:48:40
【问题描述】:

我在启动 gulp 时遇到了问题。我得到的信息来自 https://coder-coder.com/gulp-4-walk-through/https://www.youtube.com/watch?v=-lG0kDeuSJk

我的 gulpfile.js

// Initialize modules
const { src, dest, watch, series, parallel } = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const replace = require('gulp-replace');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const terser = require('gulp-terser');

// File path variables
const files = {
  scssPath: './assets/styles/sass/**/*.scss',
  jsPath: './assets/js/**/*.js'
}

// Sass taks
function scssTask(){
 return src(files.scssPath)
   .pipe(sourcemaps.init())
   .pipe(sass())
   .pipe(postcss([ autoprefixer(), cssnano() ]))
   .pipe(sourcemaps.write('.'))
   .pipe(dest('dist'));
}

 // JS taks
 function jsTask(){
   return src(files.jsPath)
       .pipe(concat('main.js'))
       .pipe(terser())
       .pipe(dest('dist'));
 }

 // Cachebusting taks
 const cbString = new Date().getTime();
 function cacheBustTask(){
   return src(['index.html'])
       .pipe(replace(/cb=\d+/g, 'cb=' + cbString))
       .pipe(dest('.'));
 }     

 // Watch taks
 function watchTask(){
   watch([files.scssPath, files.jsFiles],
     series(
       parallel(scssTask, jsTask),
       cacheBustTask
     )
   );
 }
 // Default task
 exports.default = series(
   parallel(scssTask, jsTask),
   cacheBustTask,
   watchTask
 );

当我在文件夹中启动命令 gulp 时,我收到一条错误消息:

[09:53:25] 'watchTask' 在 1.81 毫秒后出错

[09:53:25] TypeError: 需要一个字符串

at module.exports (D:\Web-Development\Startup\practise\sassStructure-Copy\node_modules\is-negated-glob\index.js:5:11)

at sortGlobs (D:\Web-Development\Startup\practise\sassStructure-Copy\node_modules\glob-watcher\index.js:66:18)

at Array.forEach (<anonymous>)

at watch (D:\Web-Development\Startup\practise\sassStructure-Copy\node_modules\glob-watcher\index.js:63:18)

at Gulp.watch (D:\Web-Development\Startup\practise\sassStructure-Copy\node_modules\gulp\index.js:48:10)

at watchTask (D:\Web-Development\Startup\practise\sassStructure-Copy\gulpfile.js:46:3)

at bound (domain.js:420:14)

at runBound (domain.js:433:12)

at asyncRunner (D:\Web-Development\Startup\practise\sassStructure-Copy\node_modules\async-done\index.js:55:18)

at processTicksAndRejections (internal/process/task_queues.js:75:11)

[09:53:25] 'default' 在 721 毫秒后出错

我该如何解决这个问题?它需要字符串,我给它一个字符串喷射它不起作用。 我放了

   function watchTask(){
      watch([files.scssPath, files.jsFiles],
        series(
          parallel(scssTask, jsTask),
          cacheBustTask
        )
      );
    }

然后我没有收到任何错误,watchTask 启动但没有文件更新,只是静音哈哈

这是文件夹结构:[a link]https://i.ibb.co/LPYsxWG/brisi.png

有人能解释一下为什么它不知道它在每个人的项目中都是字符串,我必须使用 toString() 将其转换为字符串,以及为什么监视函数 watchTask 无法识别任何更新? 提前致谢。

【问题讨论】:

  • 也许您的监视数组第二个参数应该是 files.jsPath?例如 watch([files.scssPath, files.jsPath]

标签: javascript gulp frontend gulp-watch gulp-4


【解决方案1】:

您似乎使用了错误的变量名。应该使用jsPath。无论哪种方式,请尝试使其更具可读性...例如,您可以使用:

const watch = function() {
    gulp.watch("./assets/styles/sass/**/*.scss", {usePolling : true}, gulp.series(css));
    gulp.watch("./assets/js/**/*.js", {usePolling : true}, gulp.series(js));
};

如果您使用此代码,则手表不必在代码的第一行中要求 gulp。

最后把块做成这样:

 // Default task
 exports.default = series(
   parallel(scssTask, jsTask),
   cacheBustTask,
   watch
 );

exports.watch = 观看;

【讨论】:

  • 感谢它的工作,但我只需要在开始时添加 const gulp = require('gulp') ,一切都很好。再次感谢您。
  • 很高兴听到它有效。如果您认为您的问题已得到解决,我鼓励您将答案标记为好答案。
猜你喜欢
  • 1970-01-01
  • 2017-04-18
  • 1970-01-01
  • 1970-01-01
  • 2012-09-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多