it-swarm.com.ru

глоток: углификация и исходные карты

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

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

45
Serge

Вот как работают исходные карты в 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.

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

99
ddprrt