Исходные карты находятся в неправильном месте или имеют неправильные пути

Я пытался заставить gulp sass и gulp sourcemaps делать именно то, что я хочу, и мне это трудно. Я хочу взять входной файл sass (src/sass/index.scss), создать выходной файл (dist/css/index.css) и отдельную исходную карту для этого индексного файла (dist/css/index.css.map) который имеет sourceRoot, установленный на базу проекта (абсолютный путь: /home/damon/projects/test), и записи исходной карты должны быть относительными к этому пути.

Вот что я пробовал:

попытка 1: прямой пример кода из gulp-sass:

var sassEntry = 'src/sass/index.scss';
gulp.src(sassEntry)
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write())
 .pipe(gulp.dest('dist/css'));

Результат: это встраивает исходную карту в файл CSS, поэтому я не могу сказать, правильно это или нет.

попытка 2: записать в отдельный файл

gulp.src(sassEntry)
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('.'))
 .pipe(gulp.dest('dist/css'));

Результат: пишет отдельный sourcemap, но sourceRoot говорит '/sources/' (WTF это?!, его не существует, и я никогда его не настраивал), и все пути относятся к файлу входа sass, а не к базе проекта , что также будет бессмысленно, когда мой браузер попытается найти исходные файлы.

попытка 3: попытаться исправить исходный корень (также я нашел includeContent: false)

gulp.src(sassEntry)
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
 .pipe(gulp.dest('dist/css'));

Результат: sourceroot теперь является моей рабочей папкой, что хорошо, содержимое не включено, что хорошо, но файлы в sourcemap по-прежнему относятся к файлу записи sass, а не к sourceRoot, поэтому моя карта по-прежнему бесполезна.

попытка 4: установить базу gulp.src

gulp.src(sassEntry, { base: __dirname })
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
 .pipe(gulp.dest('dist/css'));

Результат: К сожалению, установка базы на gulp.src исправляет исходную карту - sourceRoot по-прежнему верен, а пути к исходным файлам относятся к sourceRoot, НО теперь он выводит в dist/css/src/sass/index.css, что неверно. ВТФ!

попытка 5: используйте абсолютные пути

gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(gulp.dest(__dirname + '/dist/css'));

Итог: никаких изменений, он по-прежнему выводит в ту же глубокую структуру в dist.

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


gulp gulp-sass gulp-sourcemaps
person Damon Smith    schedule 26.05.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Поскольку ваша попытка 4 делает все, что вы хотите, за исключением размещения полученных файлов в неправильном месте, самым простым решением будет просто изменить это местоположение с помощью gulp-rename после создания исходных карт:

gulp.src(sassEntry, { base: __dirname })
 .pipe(sourcemaps.init())
 .pipe(sass().on('error', sass.logError))
 .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: __dirname}))
 .pipe(rename({dirname:''}))
 .pipe(gulp.dest('dist/css'));
person Sven Schoenung    schedule 26.05.2016
comment
спасибо, да, на самом деле, почитав, я тоже нашел решение, которое заключалось в использовании gulp-flatten. По-видимому, когда gulp.src находит файлы с глобусом, он сохраняет каждый из них с путем, а добавление к нему базовой опции добавляет к нему полный базовый путь. gulp-flatten позволяет вам удалить эти пути в вашем конвейере, поэтому там, где у вас есть переименование, вы также можете сделать .pipe(flatten()) и это решает проблему. - person Damon Smith; 27.05.2016

arrow_upward
2
arrow_downward

Хотя ответ Свена совершенно хорош, я также нашел ответ на свой вопрос, получив более глубокое понимание того, как работает gulp (чего я пытался избежать), и, по-видимому, gulp сохраняет каждый совпавший файл с путем, поэтому добавляя:

{база: __имя_каталога}

в gulp.src делает так, что каждый соответствующий файл имеет полный путь от базы, что затем заставляет их выводить полный относительный путь из того места, где вы установили базу. Решение, к которому я пришел, заключалось в использовании gulp-flatten, которое удаляет эти относительные пути из файлов в конвейере, поэтому моя конечная функция выглядела так:

gulp.src(sassEntry, { base: __dirname })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.',{includeContent: false, sourceRoot: __dirname}))
.pipe(flatten())
.pipe(gulp.dest(__dirname + '/dist/css'));

легко, как только вы поймете больше о том, что он пытается сделать, я думаю.

person Damon Smith    schedule 28.08.2016