@freeman0204

Почему плагин sourcemaps не работает в gulp?

Вот мой таск. Вот скрин prntscr.com/b9fhki и ссылка ведет на уже минимизированный файл, который слеплен с многих файлов css. Как я понимаю sourcemaps как раз и нужен для того что бы посмотреть исходные файлы css. Что у меня с таксом не так?
Как я понимаю я копирую на сервер уже готовый сайт в моем случаи папку public где все сжато и тд. А если я не скопирую папку с исходными файлами в моем случаи frontend то откуда sourcemaps будет брать исходники?
gulp.task('styles', function () {
  return gulp.src('frontend/**/*.css')
    .pipe(concatCss('all.css'))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(minifyCss('all.css'))
    .pipe(rename('all.min.css'))
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(gulpIf(isDevelopment, sourcemaps.write()))
    .pipe(gulp.dest('public/css'));
});
  • Вопрос задан
  • 911 просмотров
Решения вопроса 1
@abberati
frontend-разработчик
Инициализировать sourcemaps нужно перед изменениями файлов, чтобы объект sourcemaps получал в себя информацию об изменениях, которую впоследствии запишет.

Должно быть так:
gulp.task('styles', function () {
  return gulp.src('frontend/**/*.css')
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))
    .pipe(concatCss('all.css'))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(minifyCss('all.css'))
    .pipe(rename('all.min.css'))
    .pipe(gulpIf(isDevelopment, sourcemaps.write()))
    .pipe(gulp.dest('public/css'));
});


Копировать исходники на сайт не нужно, вся необходимая информация содержится в самом sourcemap. Советую писать soucemap не в сам файл со стилями, как у вас, а в отдельный файл (чтобы all.min.css был полегче).
Вот так: sourcemaps.write('./maps')
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы