javascript - Gulp 错误试图让 uglify 和默认 gulp 工作

Question

您好，我在设置 gulp 时遇到了问题，自从我上次使用它以来似乎一切都变了我收到错误，无法弄清楚原因。我将发布一些图片以及我的代码。第一个问题是 uglify 没有完成，第二个问题是 gulp default 不会运行命令提示符应该比我能更好地解释我的问题如果你有任何进一步的问题请问并保持文明。

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');




sass.compiler = require('node-sass');

gulp.task('sass', function () {
 return gulp.src('./Edit/sass/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('./Edit/css'));
});


gulp.task('css', function () {
  gulp.src('./Edit/css/*.css')
    .pipe(uglifycss({
      "maxLineLen": 80,
      "uglyComments": true
    }))
    .pipe(gulp.dest('./upload/css'));
});



gulp.task('run',['sass','css']);

gulp.task('watch', function(){
    gulp.watch('./Edit/sass/*.scss',['sass']);
    gulp.watch('./Edit/css/*.css',['css']);
});

gulp.task('default',['watch', 'run']);

这是我的输出

Answer 1

所以你有两种错误:

<强>1。 必须指定任务函数

gulp 运行依赖任务的方式在 v4.0.0 中发生了变化。而不是像这样在数组中指定这些任务:

gulp.task('run',['sass','css']);

他们引入了 gulp.series 和 gulp.parallel 函数。任务函数，而不是数组，因为必须指定任务函数。在你的情况下，这给出了:

gulp.task('run', gulp.series('sass','css'));

<强>2。 你是不是忘了发出异步完成信号

您可能已经找到了这个问题，因为这个问题现在已经被问过很多次了。您需要向您的 css 任务添加一个返回语句，以便 gulp 知道它何时完成并可以继续。你的任务变成:

gulp.task('css', function () {
  return gulp.src('./Edit/css/*.css')
    .pipe(uglifycss({
      "maxLineLen": 80,
      "uglyComments": true
    }))
    .pipe(gulp.dest('./upload/css'));
});

结果:

把它们放在一起，你会得到这个 gulpfile:

var gulp = require('gulp');
var sass = require('gulp-sass');
var uglifycss = require('gulp-uglifycss');

sass.compiler = require('node-sass');

gulp.task('sass', function () {
 return gulp.src('./Edit/sass/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('./Edit/css'));
});


gulp.task('css', function () {
  return gulp.src('./Edit/css/*.css')
    .pipe(uglifycss({
      "maxLineLen": 80,
      "uglyComments": true
    }))
    .pipe(gulp.dest('./upload/css'));
});



gulp.task('run', gulp.series('sass','css'));

gulp.task('watch', function(){
    gulp.watch('./Edit/sass/*.scss',gulp.series('sass'));
    gulp.watch('./Edit/css/*.css', gulp.series('css'));
});

gulp.task('default', gulp.series('watch', 'run'));

请注意，如果您愿意，可以将 sass 和 css 任务结合起来:

gulp.task('styles', function(){
  return gulp.src('./Edit/sass/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(uglifycss({
    "maxLineLen": 80,
    "uglyComments": true
  }))
  .pipe(gulp.dest('./upload/css'));
});