gulp sourcemaps error output notlear

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