Как сгенерировать правильные исходные карты для файлов sass с автофиксом и минификацией - PullRequest
Новая
       50

Как сгенерировать правильные исходные карты для файлов sass с автофиксом и минификацией

0 голосов

Я пытаюсь настроить gulp для преобразования файлов SASS (* .scss) в CSS с автоматическим префиксом, а также хотел бы создать файл исходной карты для скомпилированного файла CSS. Я пытаюсь создать два css-файла, один обычный и другой уменьшенный вариант. Оба эти CSS-файла должны иметь исходные карты. У меня есть следующий файл конфигурации gulp, однако сгенерированные этим исходные карты неверны. Когда я запускаю задачу gulp без автоматического префикса, тогда все в порядке, однако с автоматическим префиксом исходные карты испорчены, т. Е. При открытии в инструментах chorme dev он указывает на неправильный номер строки.

Я пробовал несколько конфигураций, таких как встроенные исходные карты и отдельные исходные карты. Я даже пытался загрузить исходные карты перед автофиксом, а затем записать его в файл после того, как автофикс будет завершен. 

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const clone = require('gulp-clone');
const merge = require('merge-stream');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const sassUnicode = require('gulp-sass-unicode');

const prefix = require('autoprefixer');
const minify = require('cssnano');

const {paths} = require('./config.js');

/* 
* Node Sass will be used by defualt, but it is set explicitly here for -
* forwards-compatibility in case the default ever changes 
*/
sass.compiler = require('node-sass');

sass_options = {
    // outputStyle: 'compressed',
    outputStyle: 'compact',
    // outputStyle: 'nested',
    // outputStyle: 'expanded'
    sourceComments: false,
    precision: 10
};

prefix_options = {
    browsers: ['last 2 versions', '> 5%', 'Firefox ESR'],
    cascade: false
};

minify_options = {
    discardComments: {
        removeAll: true
    }
}

// Process, compile, lint and minify Sass files
const buildStyles = function (done) {
    var source = src(paths.styles.input)
        .pipe(sourcemaps.init())
        .pipe(sass(sass_options).on('error', sass.logError))
        // .pipe(sassUnicode()) 
        .pipe(sourcemaps.write({includeContent: false}))
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(postcss([prefix(prefix_options)]));

    // Create non-minified css file and its sourcemaps 
    var pipe1 = source.pipe(clone())
        .pipe(sourcemaps.write('.'))
        .pipe(dest(paths.styles.output));

    // Create minified css file and its sourcemaps
    var pipe2 = source.pipe(clone())
        .pipe(rename({ suffix: '.min' }))
        .pipe(postcss([minify(minify_options)]))
        .pipe(sourcemaps.write('.'))
        .pipe(dest(paths.styles.output));

    return merge(pipe1, pipe2);
};

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

Например, в приведенном ниже примере, когда я проверяю элемент h2, исходные карты указывают на корневой элемент .shopping-cart (строка # 445) вместо (строка # 459)

введите описание изображения здесь

1 Ответ

0 голосов
/ 14 мая 2019

Есть ли причина, по которой вы вызываете sourcemaps.init дважды в buildStyles -> source?

sourcemaps.init должен предшествовать sourcemaps.write . In your code, you have it the other way around for source in buildFiles`.

Честно говоря, мне кажется, что ваша сборка сложнее, чем должна быть, и это вызывает проблемы.

См. Документацию для справки

Кроме того, зачем вам нужен не минимизированный код, если у вас есть исходные карты?

...