Генерация source map для файлов, подключаемых с помощью require

#javascript #gulp

Имеем gulp-таск

gulp.task('js', function() {
    gulp.src('*.js')
        .pipe(sourcemaps.init())
        .pipe(browserify())
        .pipe(sourcemaps.write('./maps/', {includeContent: false}))
        .pipe(gulp.dest('./'));
});


И js-файл примерно такого содержания

require('foo.js');
require('bar.js');

//some local code


Source map в этом случае создается для сконкатенированного общего js-файла, в который
попадает код из foo.js, bar.js и файла, в котором они подключаются. И строчки в сгенерированном
source map указывают на номера строк в этом файле.

Нужно, чтобы маппинг был на конкретные конечные файлы foo.js и bar.js Как это можно
сделать? Возможно, с использованием каких-то других плагинов.
    

Ответы

Ответ 1

В приведенном вами примере проще сгенерировать source map средствами browserify.
Для этого вам нужно запустить browserify с опцией debug.

Такой код должен работать:

gulp.task('js', function() {
    gulp.src('*.js')
        .pipe(browserify({debug: true}))
        .pipe(gulp.dest('./')); });


Если вы хотите добавить дополнительные настройки в gulp к полученным source map,
например сохранить их в отдельную папку, то вам должен подойти этот код:

gulp.task('js', function() {
        gulp.src('*.js')
            .pipe(browserify({debug: true}))
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(sourcemaps.write('./maps/'))
            .pipe(gulp.dest('./')); });


Код выше я не проверял, но в любом случае вам нужно будет генерировать source map
средствами browserify.