gulp: uglify и sourcemaps

Question

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

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

Answer 1

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

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

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

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

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 плагин будет включен в Глоток 4 нативно: http://fettblog.eu/gulp-4-sourcemaps/ - Если вы хотите получить более подробную информацию о том, как sourcemaps работать с внутренней стороны Глоток, они находятся в главе 6 моего Глоток книги: http://www.manning.com/baumgartner