创建源图时出现Gulp错误(“CssSyntaxError”)

时间:2015-10-23 12:34:38

标签: sass gulp source-maps

我无法弄清楚我在这里做错了什么。当我尝试使用Gulp创建源图文件时,我收到一条非常奇怪的错误消息。

events.js:85
      throw er; // Unhandled 'error' event
            ^
CssSyntaxError: /www/static/sass/maps/main.css.map:1:198: Missed semicolon

我希望它们在单独的.map文件中创建。我无法理解为什么它告诉我在我要求它创建的文件中有错误??

我做错了什么?

这是我的gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    minifyCSS = require('gulp-minify-css'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    input = 'static/sass/**/*.scss',
    output = 'static/css';

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

gulp.task('sass', function() {
    return gulp
        .src(input)
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions).on('error', sass.logError))
        .pipe(sourcemaps.write('.'))
        .pipe(autoprefixer())
        .pipe(minifyCSS())
        .pipe(gulp.dest(output))
});

gulp.task('watch', function() {
    gulp.watch(input, ['sass']);
});

// Default task - Compile then set Watch
gulp.task('default', ['sass', 'watch']);

1 个答案:

答案 0 :(得分:29)

事实证明,这只是行.pipe(sourcemaps.write('.'))的位置。移动它解决了这个问题:

return gulp
    .src(input)
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(minifyCSS())
    .pipe(sourcemaps.write('.')) // This line moved to here
    .pipe(gulp.dest(output))

很想知道原因: - /