gulp sourcemaps错误输出不清楚

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()太早。 这autoprefixer .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));
});