【问题标题】:Gulp watch not watching .js filesGulp watch 不看 .js 文件
【发布时间】:2020-12-31 22:47:33
【问题描述】:

刚刚回到一个非常老的项目并更新到 Gulp 4.0.2。

设法让它监视和编译 css,但似乎没有监视 JavaScript 文件的更改?

它不会抛出任何错误,只是在我进行更改时不会编译 JS。

(我是一名设计师,我的 JS 很糟糕,所以你可能需要真正为我拼写出来????)

gulpfile.js

// Include gulp
var gulp = require('gulp');

// --------------------------------------------------------------
// Plugins
// ---------------------------------------------------------------

var concat          = require('gulp-concat');
var include         = require('gulp-include');
var jshint          = require('gulp-jshint');
var map             = require('map-stream');

var notify          = require('gulp-notify');
var plumber         = require('gulp-plumber');

var postcss         = require('gulp-postcss');
var sass            = require('gulp-sass');
var cssnano         = require('gulp-cssnano');
var autoprefixer    = require('autoprefixer');
var replace         = require('gulp-replace');

var fs              = require('fs');
var path            = require('path');

var stripDebug      = require('gulp-strip-debug');
var uglify          = require('gulp-uglify');
var watch           = require('gulp-watch');


// --------------------------------------------------------------
// Paths
// ---------------------------------------------------------------

var base = path.join(__dirname, '/site/themes/theme_name/');

var basePaths  = {
  src:       base + 'src/'
};

var paths = {
  styles: {
      src:    basePaths.src  + 'styles/',
      dist:   base           + 'css/'
  },
  scripts: {
      src:    basePaths.src  + 'scripts/custom/',
      dist:   base           + 'js/'
  },
  vendor: {
      src:    basePaths.src  + 'scripts/vendor/',
      dist:   base           + 'js/'
  }
};


// --------------------------------------------------------------
// Styles
// ---------------------------------------------------------------

gulp.task('styles', function() {
   return gulp.src(paths.styles.src + 'styles.scss')
      .pipe(include())
      .pipe(plumber({errorHandler: errorStyles}))
      .pipe(sass({style: "compressed", noCache: true}))
      .pipe(cssnano({
        autoprefixer: {browsers: ['> 0%', 'last 2 versions', 'Firefox >= 20'], add: true}
      }))
      .pipe(gulp.dest(paths.styles.dist))
});

function errorStyles(error) {
    notify.onError({title: "Sass Error", message: "", sound: "Sosumi"})(error);
    console.log(error.toString());
    this.emit("end");
}


// --------------------------------------------------------------
// Scripts
// ---------------------------------------------------------------

gulp.task('scripts', function() {
    return gulp.src(paths.scripts.src + '**/*')
          .pipe(jshint())
          .pipe(notify(function(file) {
            if (file.jshint.success)
            return false;
            var errors = file.jshint.results.map(function(data) {
              if (data.error)
                return "(" + data.error.line + ':' + data.error.character + ') ' + data.error.reason;
              }).join("\n");
            return {
              title: 'JavaScript error',
              message: file.relative + " (" + file.jshint.results.length + " errors)\n" + errors,
              sound: 'Frog',
            };
          }))
        .pipe(concat('script.js'))
        .pipe(uglify().on('error', function(e){
          console.log(e);
        }))
        .pipe(gulp.dest(paths.scripts.dist))
});


// --------------------------------------------------------------
// Vendor
// ---------------------------------------------------------------

gulp.task('vendor', function() {
    return gulp.src(paths.vendor.src + '**/*')
        .pipe(concat('vendor.js'))
        .pipe(uglify())
        .pipe(gulp.dest(paths.vendor.dist))
});


// --------------------------------------------------------------
// Watch
// ---------------------------------------------------------------

gulp.task('watch', function() {
    gulp.watch(paths.styles.src  + '*.scss', gulp.parallel('styles'));
    gulp.watch(paths.scripts.src + '/*.js',  gulp.parallel('scripts'));
    gulp.watch(paths.vendor.src  + '/*.js',  gulp.parallel('vendor'));
});

gulp.task('default', gulp.parallel('styles', 'scripts', 'vendor', 'watch'));

【问题讨论】:

  • 您是否更改了脚本的路径?
  • 嘿,不,它是相同的路径(该项目在其他方面都没有变化,而且我在 2018 年最后一次接触它时它肯定是有效的)。我什至尝试输入绝对路径,但也没有用。
  • paths.scripts.src + '/*.js'paths.vendor.src + '/*.js' 包含一个额外的 /。是这个问题吗?
  • 做到了!太奇怪了,因为我没有碰过任何路径,而且它以前有效。也许 Gulp 4 对路径或其他东西更敏感。谢谢你,新年快乐!

标签: javascript gulp gulp-watch


【解决方案1】:

paths.scripts.src + '/*.js'paths.vendor.src + '/*.js' 包含一个额外的 /

感谢托马斯·萨布里克

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-18
    • 1970-01-01
    • 1970-01-01
    • 2017-07-31
    相关资源
    最近更新 更多