Формируем sourcemaps

Мы пишем стили и скрипты для проекта в отдельных файлах. Когда мы захотим отладить верстку, откроем браузер в режиме разработки, увидем все стили собраные в единственный файл. Для понимания с какого именно файла тянутся стили нужны sourcemaps, файлы работают как карты ресурсов и запоминают какие стили в каких исходных файлах находятся, что конечно же значительно облегчит работу.

Для создания sourcemaps, нужно установить специальный плагин gulp-sourcemaps:

npm install gulp-sourcemaps --save-dev

Подключим плагин:

gulpfile.jslet {src, dest} = require('gulp');
let sourcemaps = require('gulp-sourcemaps');

gulpfile.jsfunction task(cb) {
  return src("src/*.css")
    // включаем запись sourcemaps
    .pipe(sourcemaps.init())
    .pipe(...)
    .pipe(...)
    // выключаем запись sourcemaps
    .pipe(sourcemaps.write())
    .pipe(dest("dist"));
}