Сочетание gulp-sourcemaps с gulp-csso и gulp-sass

Question

Сочетание gulp-sourcemaps с gulp-csso и gulp-sass

1

Я пытаюсь заставить эту часть моего gulpfile.js работать:

gulp.task('compileSass', function() {
    return gulp.src(folders.src+'/scss/*scss')
    .pipe(sass())
    .pipe(gulp.dest(folders.dest+'/css'));
});

gulp.task('minifyStyles', ['compileSass'], function() {
    return gulp.src(folders.dest+'/css/style.css')
    .pipe(maps.init())
    .pipe(minCss({
        sourceMap: true
    }))
    .pipe(maps.write('./'))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(folders.dest+'/css'));
});

Я бы хотел, чтобы инструменты dev отображали файлы .scss. Я не уверен, что это связано с rename() или если я вызываю свои исходные файлы в неподходящее время, но когда я проверяю инструменты dev, источником всегда является style.min.css.

brunouno 19 окт. 2017, в 19:21

Источник

Теги:

javascript

node.js

gulp

gulp-sass

gulp-sourcemaps

1 ответ

Ещё вопросы

scniro · Answer 1 · 2017-10-19T19-06-00.000Z

Я не вижу начального отображения вашей задачи. Вы должны вызвать это дважды и установить loadMaps соответствующим образом для документов. Попробуйте следующее...

gulp.task('compileSass', function() {
  return gulp.src(folders.src+'/scss/*scss')
  .pipe(maps.init()) /* 'init' here */
  .pipe(sass())
  .pipe(gulp.dest(folders.dest+'/css'));
});

gulp.task('minifyStyles', ['compileSass'], function() {
  return gulp.src(folders.dest+'/css/style.css')
  .pipe(maps.init({
    loadMaps: true /* 'init' again, load prior from sass */
  }))
  .pipe(minCss({
    sourceMap: true
  }))
  .pipe(maps.write('./'))
  .pipe(rename('style.min.css'))
  .pipe(gulp.dest(folders.dest+'/css'));
});

Я попробовал это, все еще сопоставляет style.min.css: 1