javascript - gulpfile 中的引用错误

Question

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

gulp.task('sass', done => {
    gulp.src('./css/**/*.sass')
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('.'));

    done()
});

gulp.task('sass:watch', done => {
    gulp.watch('./css/**/*.sass', gulp.series('sass'));

    done()
});

gulp.task('compressed-js', done => {
    gulp.src('js/src/*.js')
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('js'));

    done()
});

gulp.task('compressed-js:watch', done => {
    gulp.watch('./js/src/*.js', gulp.series('compressed-js'));

    done()
});

在phpstorm中出现错误:“ReferenceError:sourcemaps未定义”

Answer 1

error非常不言自明:您指的是 sourcemaps 变量，但它不存在。

通常，您需要在 gulpfile 的顶部声明它，如下所示:

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

但是，Gulp 4 有 sourcemap functionality built-in ，因此您可以像这样重写您的 sass 任务:

gulp.task('sass', () =>
  gulp.src('./css/**/*.sass', { sourcemaps: true })
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(gulp.dest('.', { sourcemaps: '.' }))
);

请注意，我删除了 done 回调，如果您只是返回流，则不需要该回调。

请注意，运行 compressed-js 任务时您会遇到同样的问题。您需要定义 uglify 和 rename:

var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

并确保您需要的软件包已安装。