Gulp: uglify и sourcemaps

Я использую gulp.

Я хотел бы иметь один или несколько 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)?

Ответы

Ответ 1

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

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

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

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

 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.

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