gulp: uglify и исходные карты

Я использую глоток.

Я хотел бы иметь один или несколько файлов JS (скажем, jQuery), чтобы объединить их в один, минимизировать его и записать в папку распространения.

Вот как я это делаю:

minifyJS(['/js/myModule.file1.js',
          '/js/myModule.file2.js'], '/dist/js', 'myModule')

функция:

function minifyJS(sourceFiles, destinationFolder, filenameRoot) {
    return gulp.src(sourceFiles)
        .pipe(plumber())

        // .pipe(sourcemaps.init()) here ???
        .pipe(concat(filenameRoot + '.js'))
        .pipe(sourcemaps.init()) // or here ???

        .pipe(gulp.dest(destinationFolder)) // save .js
        .pipe(uglify({ preserveComments: 'license' }))
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest(destinationFolder)) // save .min.js
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest(destinationFolder)) // save .map
}

В чем я не уверен, так это в местоположении sourcemaps.init()...

Должен ли я создавать несколько (в моем случае 2) файлов карт (было бы неплохо, если бы они поддерживались браузерами) или только один (/maps/myModule.map)?


javascript gulp mapping gulp-sourcemaps
person serge    schedule 10.09.2015    source источник

Ответы (1)


arrow_upward
114
arrow_downward

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

Если вы добавляете исходные карты, вы добавляете к этим виртуальным файловым объектам еще одно свойство, а именно исходную карту. При каждом преобразовании исходная карта также преобразовывается. Итак, если вы инициализируете исходные карты после concat и до uglify, исходные карты сохраняют преобразования с этого конкретного шага. Исходная карта «думает», что исходные файлы являются выходными данными из concat, и единственный выполненный шаг преобразования — это шаг uglify. Поэтому, когда вы откроете их в своем браузере, ничего не совпадет.

Лучше размещать исходные карты сразу после подстановки и сохранять их непосредственно перед сохранением результатов. Исходные карты Gulp будут интерполироваться между преобразованиями, чтобы вы могли отслеживать все произошедшие изменения. Исходными исходными файлами будут те, которые вы выбрали, и исходная карта будет отслеживать эти источники.

Это ваш поток:

 return gulp.src(sourceFiles)
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(concat(filenameRoot + '.js'))
    .pipe(gulp.dest(destinationFolder)) // save .js
    .pipe(uglify({ preserveComments: 'license' }))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest(destinationFolder)) // save .min.js

sourcemaps.write на самом деле не пишет исходные карты, он просто говорит Gulp материализовать их в физический файл, когда вы вызываете gulp.dest.

Тот же плагин исходной карты будет изначально включен в Gulp 4: http://fettblog.eu/gulp-4-sourcemaps/ -- Если вы хотите получить более подробную информацию о том, как карты исходного кода работают внутри Gulp, они находятся в главе 6 моей книги о Gulp: http://www.manning.com/baumgartner

person ddprrt    schedule 10.09.2015
comment
Большое спасибо за это подробное и полезное объяснение... А как насчет того факта, что на входе есть x (2) файла, а на выходе только один? Должен ли я создать одну или несколько исходных карт для включения в папку дистрибутива вместе с файлом mymodule.min.js?... - person serge; 10.09.2015
comment
Gulp создаст для вас правильное сопоставление. Если у вас есть только один выходной файл, а также только одна исходная карта, исходная карта поймет происхождение и покажет вам два файла в инструментах разработки. Если вы хотите иметь исходные карты для ваших двух выходных данных (обычный и минимизированный), просто вызовите sourcemaps.write два раза. - person ddprrt; 10.09.2015
comment
Но я думаю, что с исходными картами вам больше не понадобятся два выхода. ;-) - person ddprrt; 10.09.2015
comment
Я имею в виду, что у меня есть in1.js и in2.js (2) и один out.(min.)js... возможно ли (есть ли смысл) иметь in1.map и in2.map или только один out.map? - person serge; 10.09.2015
comment
вы должны быть в порядке только с одной out.map - person ddprrt; 10.09.2015
comment
Этот ответ, включая ваш кодовый блок, решил проблему годовой давности, с которой я столкнулся при отображении; который был журналом, правильно относящимся к отдельным файлам JS, вместо единственного искаженного script.min.js. Будучи самоучкой, это действительно ценится. Спасибо. - person Steven Ventimiglia; 26.01.2019
comment
Есть ли способ обойти плагины в цепочке, которые не поддерживают плагин исходных карт, и при этом создать действительную исходную карту? Например, я не могу найти gulp-strip-debug в списке по адресу github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/. - person Per Quested Aronsson; 23.05.2019
comment
большое тебе спасибо. Это помогло мне отладить и исправить проблему, которая у меня была :) - person ggzone; 03.10.2019