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 в моем случае) файлов карт (что было бы неплохо, если поддерживается браузерами) или только один ( / карты / myModule.карта)?

39
gulp gulp-sourcemaps javascript mapping

1 ответов

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

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

это лучше, что вы размещаете sourcemaps непосредственно после подстановки, и сохранить их непосредственно перед сохранением результатов. 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 на самом деле не пишет sourcemaps, он просто говорит Gulp материализовать их в физический файл при вызове gulp.dest.

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

88