Gulp 4手表Gulp.series仅运行一次

Gulp 4手表Gulp.series仅运行一次,gulp,gulp-watch,Gulp,Gulp Watch,我从3号大口喝变为4号大口喝,但我无法让它工作 当我运行gulp并保存js或scss文件时,它会成功创建一个新文件。如果我再保存一个,什么都不会发生。我的猜测是,我不明白gulp.series是如何工作的。它只运行一个 var gulp = require('gulp'); var concat = require('gulp-concat'); var sass = require('gulp-sass'); var rename = require('gulp-rename'); var g

我从3号大口喝变为4号大口喝,但我无法让它工作

当我运行
gulp
并保存js或scss文件时,它会成功创建一个新文件。如果我再保存一个,什么都不会发生。我的猜测是,我不明白
gulp.series
是如何工作的。它只运行一个

var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var gutil = require('gulp-util');
var minifyJS = require('gulp-minify');

gulp.task('css', function() {
    gulp.src([
        'assets/css/src/tinyFileTree.scss'
    ])
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'))
    .pipe(rename('tinyFileTree.min.scss'))
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'))
});

// JS
gulp.task('js', function() {
  gulp.src([
    'assets/js/src/tinyFileTree.js'
    ])
    .pipe(minifyJS({
      ext:{
        min:'.min.js'
      },
    }))
    .on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
    .pipe(gulp.dest('assets/js/dist'))
});

// Default
gulp.task('default', function() {
    gulp.watch('assets/css/src/tinyFileTree.scss', gulp.series('css'));
    gulp.watch('assets/js/src/tinyFileTree.js', gulp.series('js'));
});

我做了一个完整的重写,可以在这里找到:

你也可以在这里看到它。希望它能帮助别人

let gulp = require("gulp");
let sass = require("gulp-sass");
let autoprefixer = require("gulp-autoprefixer");
let concat = require("gulp-concat");
let uglify = require('gulp-uglify-es').default;
let csso = require('gulp-csso');
let rename = require('gulp-rename');

var css = {
  src: 'assets/css/src/**/*.scss',
  dest: 'assets/css/dist',
  filename: 'style.scss'
};

var js = {
  src: 'assets/js/src/**/*.js',
  dest: 'assets/js/dist',
  filename: 'script.js'
};

function style() {
  return (
    gulp
      .src(css.src)
      .pipe(concat(css.filename))
      .pipe(sass())
      .on("error", sass.logError)
      .pipe(autoprefixer())
      .pipe(gulp.dest(css.dest))
      .pipe(csso())
      .pipe(rename({extname: '.min.css'}))
      .pipe(gulp.dest(css.dest))
  );
}

function script() {
  return (
    gulp
      .src(js.src)
      .pipe(concat(js.filename))
      .pipe(gulp.dest(js.dest))
      .pipe(uglify())
      .pipe(rename({extname: '.min.js'}))
      .pipe(gulp.dest(js.dest))
  );
}

function watch(){
  gulp.watch(css.src, style);
  gulp.watch(js.src, script);
}

exports.css = style;
exports.js = script;
exports.default = watch;

如果您不想返回一个gulp实例。您只需按照gulp watch文档中使用的方法操作即可。该函数需要一个带有一个参数的回调函数,您需要在任务结束时执行该参数。我花了几个小时才弄明白这个问题,但问题就在这里

注意cb()


第一步:将return语句添加到您的任务中,如“return gulp.src………”并查看是否有帮助。我看到您添加了return语句-没有它们,这些任务将只运行一次。@Mark我看到了。看起来你一直都是对的。谢谢!=)在我掌握窍门之前,我需要混上一段时间。我的代码现在看起来可读性更强了。
gulp.task('css', function(cb) {
    gulp.src([
        'assets/css/src/tinyFileTree.scss'
    ])
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'))
    .pipe(rename('tinyFileTree.min.scss'))
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(gulp.dest('assets/css/dist'));

    cb();
});