Неверное имя файла при использовании gulp-sourcemaps

Я использую gulp-sourcemaps в своем проекте для обработки моих SASS и JavaScript. Мой gulpfile.js правильно генерирует файлы.map, хотя Chrome показывает неправильные имена файлов в инструментах разработчика и консоли. На данный момент я не уверен, где проблема.

Дерево моего проекта:

gulpfile.js
public/
  sass/
    main.sass
    import/
      [.. more files and directories (all imported in main.sass) ..]
   js/
     main.js
     test.js
     min/
       sourcemaps/
         main.js.map
       main.js
       all.js
    css/
      main.css
      sourcemaps/
        main.css.map

Мой gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var plumber = require('gulp-plumber');
var prefix = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

var options = {
    styles: {
        "source": "public/sass/main.sass",
        "destination": "public/css",
        "sourcemaps": "sourcemaps"
    },
    scripts: {
        "source": "public/js/*.js",
        "destination": "public/js/min",
        "sourcemaps": "sourcemaps"
    }
}

gulp.task('styles', function() {
return sass(options.styles.source, {sourcemap: true, style: 'compressed'})
    .pipe(plumber())
    .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
    .pipe(sourcemaps.write(options.styles.sourcemaps))
    .pipe(gulp.dest(options.styles.destination));
});

gulp.task('scripts', function() {
    return gulp.src(options.scripts.source)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('all.js'))
        .pipe(gulp.dest(options.scripts.destination))
        .pipe(rename('main.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write(options.scripts.sourcemaps, {includeContent: false, sourceRoot: '../../'}))
        .pipe(gulp.dest(options.scripts.destination));
});

gulp.task('default', ['styles', 'scripts'], function() {
    gulp.watch('public/sass/**', ['styles']);
    gulp.watch('public/js/**', ['scripts']);
});

План такой:

  • 'styles' компилирует public/sass/main.sass (который включает в себя весь мой источник SASS), автоматически префиксирует источник, записывает исходную карту и выводит public / css / main.css

  • 'scripts' объединяет все файлы в каталоге public / js, увеличивает исходный код, записывает карту исходного кода и выводит public / js / min / main.js

После всего этого процесса я хочу оставить public / css / main.css, содержащий все мои скомпилированные исходники SASS с префиксом и минимизацией, и public / js / min / main.js, содержащий все мои объединенные, минимизированные исходники JavaScript.

На данный момент стили в инструментах разработчика показывают имя файла _box-sizing.scss (которое зависит от public/sass/import/lib/neat), файл, который не содержит стилей для проверяемого элемента. Имя файла должно быть _header.sass (из public/sass/import/layouts/common/_header.sass).

Аналогично, консоль показывает main.js независимо от исходного файла. У меня есть public / js / main.js и public/js/test.js - эти файлы должны быть объединены и выведены в public / js / min / main.js. Оба эти файла содержат только один console.log() для тестирования, а имя файла, отображаемое в Chrome, - main.js для обоих.

Я надеюсь это имеет смысл. заранее спасибо

Источник

2 ответа

Я принял решение после того, как прокомментировал код украшения css в gulpfile.js.

//.pipe(cssbeautify())ИЛИ

//.pipe(uglify())

Источник

Я столкнулся с той же проблемой, не найдя решения. Может быть, я ошибаюсь, но кажется, что gulp-Sourcemap должен решить одну или несколько проблем.

https://github.com/floridoo/gulp-sourcemaps/issues/94

Источник
Другие вопросы по тегам