Question

我是gulp的新手，并尝试为较少的文件创建一个源图。但是它会因missing semicolon错误而中断。但是，当我使用IDE检查错误时，我似乎无法找到丢失的分号。

我正在使用gulpfile任务：

gulp.task('styles', function() {
  return gulp.src(paths.less + '/styles.less')
    // .pipe(less().on('error', gutil.log))
    .pipe(plumber()) // Checks for errors
    .pipe(maps.init())
    .pipe(less())
    .pipe(maps.write('./'))
    .pipe(autoprefixer({browsers: ['last 2 version']})) // Adds vendor prefixes
    .pipe(pixrem())  // add fallbacks for rem units
    .pipe(gulp.dest(paths.css))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano()) // Minifies the result
    .pipe(gulp.dest(paths.css));
});

，错误是：

less/styles.css.map:1:69: Missed semicolon> 1 | {"version":3,"sources":["mixins.less","base.less","responsive.less"],"names":[],"mappings":"A
..........

max-width: 140px;\n                margin: 0 auto;\n                .caption {\n                    font-size: 12px;\n                    background: #fff;\n                    padding: 0 15px;\n                    padding-bottom: 15px;\n                    color: @color-2;\n                    font-family: arial, sans-serif;\n                }\n            }\n        }\n    }\n    \n    .navbar-fixed-top .navbar-collapse {\n        padding-left: 15px;\n        padding-right: 15px;\n    }\n    \n    .features-video {\n        padding-top: 170px;\n    }\n    \n    .pricing {\n        padding-top: 170px;\n    }\n    \n    .apps-section {\n        padding-top: 160px;\n    }\n    \n    .story-section {\n        padding-top: 170px;\n    }\n    \n    .contact-section {\n        padding-top: 125px;\n    }\n    \n    .bg-slider-wrapper {\n        position: fixed;\n    }\n    \n    \n}\n\n/* Large devices (large desktops, 1200px and up) */\n@media (min-width: 1200px) {\n \n};\n\n\n"],"file":"styles.css","sourceRoot":"/source/"}

Answer 1

您的问题是您在管道中过早地致电maps.write()。这会将.map源映射文件发送到流中，后续插件如autoprefixer尝试解析为CSS。由于源映射文件不包含有效的CSS autoprefixer会引发错误。

通常，您希望在任何maps.write()调用之前直接调用gulp.dest()调用，以便尽可能晚地发出源映射（这也可确保所有先前的转换都记录在源映射中）。

在您的情况下，您有两个gulp.dest()次调用，因此在第一次调用后，您需要使用gulp-filter过滤掉源地图文件。否则cssnano会尝试解析源地图文件，您最终会再次出错。

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

gulp.task('default', function() {
  return gulp.src(paths.less + '/styles.less')
    .pipe(plumber()) // Checks for errors
    .pipe(maps.init())
    .pipe(less())
    .pipe(autoprefixer({browsers: ['last 2 version']}))
    .pipe(pixrem())
    .pipe(maps.write('./'))
    .pipe(gulp.dest(paths.css))
    .pipe(filter('**/*.css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano())
    .pipe(maps.write('./'))
    .pipe(gulp.dest(paths.css));
});

gulp sourcemaps错误输出不清楚

1 个答案: