Schluck Sourcemaps Fehler Ausgang unklar

Question

Ich bin neu zu schlucken und versucht, eine Quellkarte für meine weniger Dateien zu erstellen. Aber es bricht mit einem missing semicolon Fehler. Allerdings kann ich das fehlende Semikolon nicht finden, wenn ich mit meiner IDE nach Fehlern suche.

Ich verwende die gulpfile Aufgabe:

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

und der Fehler ist:

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

Ihr Problem ist, dass Sie maps.write() zu früh in der Pipeline sind anrufen. Dies sendet eine .map Quellkartendatei in den Stream, die nachfolgende Plugins wie autoprefixer versuchen, als CSS zu analysieren. Da Quellzuordnungsdateien kein gültiges CSS enthalten, gibt autoprefixer einen Fehler aus.

Im Allgemeinen möchten Sie Ihre maps.write() Aufrufe direkt vor jedem gulp.dest() Aufrufe, so dass Quellkarten so spät wie möglich emittiert werden (dies stellt auch sicher, dass alle vorherigen Transformationen in Ihren Quellkarten aufgezeichnet werden).

In Ihrem Fall haben Sie zwei gulp.dest() Aufrufe, also nach dem ersten müssen Sie die Quelle Karten Datei mit gulp-filter herausfiltern. Sonst wird cssnano versuchen, die Quellkartendatei zu analysieren, und Sie werden wieder mit einem Fehler enden.

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