Question

我一直在使用gulpfile，我现在已经修改过，尝试将源图添加到我编译的css和缩小的css文件中。

我在文件中有以下任务：

join "", @chars[0..$#chars-1], chr (1 + ord $chars[-1])

但是，在尝试编译时，我收到以下错误：

gulp.task('sass', function () {
return gulp.src('./src/sass/zebra.scss')

    .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: autoprefixrBrowsers,
            cascade: false
        }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(destination))
    .pipe(cssnano())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest(destination));
});

Answer 1

导致问题的源图文件。

执行sourcemaps.write('.')时，您会在流中发出.map个文件。这意味着您现在在流中有两个文件：CSS文件和源图文件。

当CSS文件到达cssnano()时，它会缩小。但是，当源映射文件在错误发生时达到cssnano()时。 cssnano()尝试将文件解析为CSS，但由于源图文件不是有效的CSS文件，因此会失败，cssnano()会抛出。

使用gulp.dest()将源文件持久保存到磁盘后，必须从流中删除该源文件。您可以使用gulp-filter插件：

var filter = require('gulp-filter');

gulp.task('sass', function () {
   return gulp.src('./src/sass/zebra.scss')

    .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: autoprefixrBrowsers,
            cascade: false
        }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(destination))
    .pipe(filter('**/*.css'))
    .pipe(cssnano())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(destination));
});

在上面的filter('**/*.css')中，只允许通过CSS文件而不是源文件文件修复问题。

我还在结束前添加了第二个sourcemaps.write('.')，因为您可能需要缩小和未缩小CSS文件的源图。

管道中的Gulp Unhandled流错误

1 个答案: