gulp sourcemapsのエラー出力が不明確

Question

私はgulpが新しく、lessファイル用のソースマップを作成しようとしました。しかし、それはmissing semicolonエラーで壊れます。しかし、私は私のIDEでエラーをチェックするときに、行方不明のセミコロンを見つけることができないようです。

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)); 
}); 

を、エラーは次のとおりです：

私はgulpfileタスクを使用していますが、あまりにも早くあなたのパイプラインのmaps.write()を呼び出していることを

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

あなたの問題があります。これによりautoprefixerのような後続のプラグインがCSSとして解析しようとするストリームに.mapソースマップファイルがストリームとして出力されます。ソースマップファイルには有効なCSSが含まれていないため、autoprefixerはエラーをスローします。

一般的には、ソースマップが（これも以前のすべての変換がソースマップに記録されているを確認します）できるだけ遅く放出されるように、直接、任意のgulp.dest()の呼び出し前に、あなたのmaps.write()通話を載せていきたいと思います。

あなたの場合は2つの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)); 
});