gulp sourcemaps错误输出不清楚

我是gulp新手，尝试为我的less文件创建sourcemap。但是，它会出现一个

缺少分号的错误。然而，当我用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/"}

您的问题是在管道中调用
maps.write（）
太早。这会将
.map
源映射文件发送到流中，后续插件（如
autoprefixer
）会尝试将其作为CSS进行解析。由于源地图文件不包含有效的CSS
autoprefixer
将引发错误

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

在本例中，您有两个
gulp.dest（）
调用，因此在第一个调用之后，您需要使用。否则，
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));
});

您的问题是在管道中调用
maps.write（）
太早。这会将
.map
源映射文件发送到流中，后续插件（如
autoprefixer
）会尝试将其作为CSS进行解析。由于源地图文件不包含有效的CSS
autoprefixer
将引发错误

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

在本例中，您有两个
gulp.dest（）
调用，因此在第一个调用之后，您需要使用。否则，
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));
});

如果没有你的LESS文件，这个问题不是特别有用。阅读如何创建。感谢链接我的less文件在这里：如果没有less文件，这个问题不是特别有用。阅读如何创建一个。感谢链接我的小文件在这里：非常好的解释。是的，精辟的解释，总是比一个答案更有价值。谢谢你帮我理解。解释得很好。是的，解释得很好，总是比一个答案更有价值。谢谢你帮我理解。