Sourcemaps gulp: gulp-sourcemaps — npm

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

Ubuntu – Подробная информация о пакете node-gulp-sourcemaps в bionic

Ссылки для node-gulp-sourcemaps

Ресурсы Ubuntu:

Исходный код node-gulp-sourcemaps:

Сопровождающий:

Please consider filing a bug or asking a question via Launchpad before contacting the maintainer directly.

Original Maintainers (usually from Debian):

It should generally not be necessary for users to contact the original maintainer.

Внешние ресурсы:

Подобные пакеты:

Source map support for Gulp.js

Другие пакеты, относящиеся к node-gulp-sourcemaps

• dep:
  node-acorn
  (>= 4.0)

  ECMAScript parser for Node.js

• dep:
  node-convert-source-map
  (>= 1.0)

  Converts a source-map from/to between formats

• dep:
  node-css
  (>= 2.0)

  JavaScript CSS parser and stringifier — Node.js module

• dep:
  node-debug-fabulous
  (>= 0.0.0)

  visionmedia debug extensions rolled into one

• dep:
  node-detect-newline
  (>= 2.0)

  Detect the dominant newline character of a string

• dep:
  node-graceful-fs
  (>= 4.0)

  drop-in replacement improving the Node.js fs module

• dep:
  node-source-map
  (>= 0.0)

  Mozilla source map generator and consumer — Node.js module

• dep:
  node-strip-bom
  (>= 2.0)

  Strip UTF-8 byte order mark (BOM) from a string

• dep:
  node-through3
  (>= 2.0)

  Make a stream.Transform out of a function — Node.js module

• dep:
  node-vinyl
  (>= 1.0)

  Virtual file format

• dep:
  nodejs

  evented I/O for V8 javascript

Загрузка node-gulp-sourcemaps

Установка node-gulp-sourcemaps в Ubuntu / Linux Mint / Debian

Установка:

Для установки node-gulp-sourcemaps в Ubuntu / Linux Mint / Debian, введите в Терминал:

sudo apt update

sudo apt install node-gulp-sourcemaps

Подробная информация о пакете:

Поддержка исходной карты для Gulp.js

http://github.com/floridoo/gulp-sourcemaps

Сентябрь 2018

Источник: https://packages.ubuntu.com

Навигация по записям

• Зависимости:

• node-acorn

  Анализатор ECMAScript для Node.js

• node-convert-source-map

  Преобразует исходную карту из / в формат

• node-css

  JavaScript-анализатор CSS и стригатор — модуль Node.js

• node-debug-fabulous

  Расширения отладки visionmedia, свернутые в один

• node-detect-newline

  Определить доминирующий символ новой строки строки

• node-graceful-fs

  Замена замены, улучшая модуль Node.js fs

• node-source-map

  Генератор и источник исходной карты Mozilla — модуль Node.js

• node-strip-bom

  Разметка байта байта UTF-8 (BOM) из строки

• node-through3

  Сделать поток. Преобразовать из функции — модуль Node.js

• node-vinyl

  Формат виртуального файла

• nodejs

  Событие I/O для V8 javascript

gulp-sourcemaps · GitHub

gulp-sourcemaps · GitHub

Закреплено

1. Поддержка карты исходного кода для gulpjs.

   JavaScript

   1,1 км

   122

2. Помощник для реализации поддержки исходной карты в плагинах Gulp

   JavaScript

   19

   9

3. Плагин Gulp для загрузки или удаления sourcesContent из карты источников.

   JavaScript

   2

4. Плагин Gulp для отображения источников исходной карты.

   JavaScript

   4

5. Плагин Gulp для создания карты источника идентификации для файла.

   JavaScript

   3

   4

6. Плагин Gulp для изменения свойства файла исходной карты.

   JavaScript

   2

   1

Репозитории

• карта идентичности

  Плагин Gulp для создания карты источника идентификации для файла.

  JavaScript

  3

  Массачусетский технологический институт

  4

  3

  1

  Обновлено 5 июня 2021 г.

• источники-контент

  Плагин Gulp для загрузки или удаления sourcesContent из карты источников.

  JavaScript

  2

  Массачусетский технологический институт

  0

  0

  0

  Обновлено 19 февраля 2019 г.

• JavaScript

  0

  Массачусетский технологический институт

  0

  1

  0

  Обновлено 13 октября 2018 г.

• JavaScript

  19

  9

  4

  0

  Обновлено 9 февраля 2018 г.

• комментарий

  Плагин Gulp для работы с комментарием sourceMappingURL файла.

  0

  Массачусетский технологический институт

  0

  3

  1

  Обновлено 1 апреля 2017 г.

• 0

  Массачусетский технологический институт

  0

  1

  0

  Обновлено 30 марта 2017 г.

• файл карты

  Плагин Gulp для изменения свойства файла исходной карты.

  JavaScript

  2

  Массачусетский технологический институт

  1

  1

  0

  Обновлено 24 марта 2017 г.

• карты-источники

  Плагин Gulp для отображения источников исходной карты.

  JavaScript

  4

  Массачусетский технологический институт

  0

  1

  0

  Обновлено 23 марта 2017 г.

Наиболее часто используемые темы

Загрузка…

Вы не можете выполнить это действие в настоящее время.Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс.
Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс.

javascript — gulp: uglify и исходные карты

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

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

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

Это ваш стрим:

  вернуть gulp.src (исходные файлы)
    .pipe (sourcemaps.init ())
    .pipe (сантехник ())
    .труба (concat (filenameRoot + '.js'))
    .pipe (gulp.dest (destinationFolder)) // сохранить .js
    .pipe (uglify ({preserveComments: 'лицензия'}))
    .pipe (переименовать ({extname: '.min.js'}))
    .pipe (sourcemaps.write ('карты'))
    .pipe (gulp.dest (destinationFolder)) // сохранить .min.js
  

sourcemaps.write на самом деле не записывает исходные карты, он просто сообщает Gulp материализовать их в физический файл, когда вы вызываете gulp.dest .

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

Gulp 4: встроенные карты источников

Одна действительно крутая функция в дорожной карте Gulp 4 — это включение встроенного
исходные карты. Коммит примерно две недели назад на виниловой пластинке.
пакет делает это возможным сейчас. Вместо использования gulp-sourcemaps
package напрямую, вы можете использовать флаг в gulp.src . Об остальном позаботится Gulp:

  var gulp = require ('gulp'); 
 var less = require ('gulp-less'); 
 var minify = require ('gulp-minify-css'); 
 var prefix = require ('gulp-autoprefixer'); 
 gulp.task ('стили', функция () {
 return gulp.src ('main.less', {sourcemaps: true}) 
 .pipe (less ()) 
 .pipe (minify ()) 
 .pipe (префикс ()) 
 .pipe (gulp.dest ('dist / styles')); 
}); 
  

gulp.dest позаботится о сохранении этих исходных карт.Так что с каждым глотком. Самый лучший
, вы получите новые исходные карты для вашего вывода.

Под капотом Gulp по-прежнему использует пакет gulp-sourcemaps . Это просто
гораздо более приятный и прямой способ их решения. Тем не менее, в ваших плагинах есть
чтобы «понять» Sourcemaps.

Бета-установка #

На данный момент это все еще в стадии бета-тестирования. Чтобы проверить это, у вас должен быть установлен Gulp 4:

  npm install --save-dev git: //github.com/gulpjs/gulp#4.0
  

Войдите в каталог node_modules / gulp / и установите текущий vinyl-fs
упаковка.

  установка npm --save-dev git: //github.com/wearefractal/vinyl-fs
  

Вам больше не придется этого делать, когда Gulp 4 станет общедоступным в NPM.

gulp-sourcemaps #

В некоторых случаях может понадобиться старый плагин.
Например, вы хотите назвать свои исходные каталоги, чтобы упростить их
можно найти в ваших инструментах разработки.Для этого вам все равно придется использовать оригинальный плагин:

  gulp.task ('стили', функция () {
 return gulp.src ('main.less') 
 .pipe (sourcemaps.init ()) 
 .pipe (less ()) 
 .pipe (minify ( )) 
 .pipe (префикс ()) 
 .pipe (sourcemaps.write ('.', {SourceRoot: 'css-source'})) 
 .pipe (gulp.dest ('dist')); 
}) ;  

Это также необходимо, если вы хотите объединить его с другими исходными картами, например
сгенерировано Browserify:

  var browserify = require ('browserify'); 
 var gulp = require ('глоток'); 
 var source = require ('исходный-поток-винила'); 
 var buffer = require ('виниловый буфер'); 
 var uglify = require ('gulp-uglify'); 
 var sourcemaps = require ('gulp-sourcemaps'); 
 var gutil = require ('gulp-util'); 
 глоток.task ('javascript', function () {
 var b = browserify ({
 entries: './entry.js', 
 debug: true 
}); 
 
 return b.bundle () 
 .pipe (source ( 'app.js')) 
 .pipe (buffer ()) 
 .pipe (sourcemaps.init ({loadMaps: true})) 
 .pipe (uglify ()) 
 .on ('error', gutil.log) 
 .pipe (sourcemaps.write ('./')) 
 .pipe (gulp.dest ('./ dist / js /')); 
}); 
  

Но поскольку он имеет ту же кодовую базу, вы должны нормально их использовать. Это тоже
одна из тех вещей, на которых был построен Gulp 4: вещи, которые доказали
быть полезным, если раньше не было обязательным, теперь попадают в ядро, но все же
такой же извлекаемый и многоразовый, как и любая часть Gulp.

src () | gulp.js

Browserify в Gulp с правильными картами источников

Чтобы использовать browserify в gulp, нужно использовать не плагин, а один из рецептов gulp (по крайней мере, на данный момент).К сожалению, интегрировать browserify в gulp не так-то просто, особенно когда дело касается исходных карт.

Макет каталога тестового проекта

При использовании рецепта с исходными картами из документации gulp в небольшом тестовом проекте исходные файлы получают очень странные пути, назначенные в картах. Папки вложены несколько раз, что затрудняет поиск файла. С другой стороны, с рецептом, представленным здесь, файлы представлены с их правильными путями на исходных картах.

До: После:

Конфигурация gulp выглядит так:

testproject / gulpfile.js скачать

  const gulp = require ('gulp');
const sourcemaps = require ('gulp-sourcemaps');
const transform = require ('vinyl-transform');
const browserify = require ('browserify');
const uglify = require ('gulp-uglify');
const path = require ('путь');

function logic () {
return gulp.src ('logic / *. js', {читать: false})
.pipe (преобразовать (путь к файлу =>
browserify (путь к файлу, {
отладка: правда
})
.plugin ('browserify-sourcemap-root-transform', {basedir: path.resolve ('.')})
.пучок()
.on ('ошибка', функция (ошибка) {
console.error (error.stack? error.stack: error);
this.emit ('конец');
})
))
.pipe (sourcemaps.init ({loadMaps: true}))
.pipe (uglify ())
.pipe (sourcemaps.write ('.', {sourceRoot: '/'}))
.pipe (gulp.dest ('./ dist'));
}

gulp.task (логика);
  

Пример написан для Gulp 4. Он также передает код в uglify, чтобы продемонстрировать, что у нас есть нормальный виниловый поток после просмотра и исходные карты работают должным образом. Вы можете установить все используемые пакеты, запустив

  npm i --save-dev gulpjs / gulp # 4.0 gulp-sourcemaps, виниловое преобразование
  

Замечания

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

Gulp и Browserify - Добавление карт Babel и Source

[00:00] У нас есть действительно хороший рабочий процесс, созданный с помощью Gulp, Browserify и BrowserSync.Затем мы хотим добавить возможность писать в следующей версии JavaScript, что бы это ни было.

[00:13] Например, если мы хотим использовать параметры функции по умолчанию вместе с некоторой строковой интерполяцией. Запустите наш сервер, чтобы увидеть это в действии.

[00:37] Если мы откроем консоль, мы увидим, что здесь произошла ошибка. Один ожидаемый жетон. Это связано с тем, что на момент записи параметры функций по умолчанию еще не поддерживаются в Chrome.

[00:55] Чтобы исправить это, мы можем использовать популярный проект Babel.Закройте это, npm install babelify. Вернувшись в наш файл Gulp, мы внесем это.

[01:17] Babelify - это оболочка для проекта Babel, которая позволяет использовать его в качестве преобразователя для Browserify. Перед тем, как вызвать bundle, мы просто вызываем преобразование и передаем его через Babelify.

[01:35] Это будет действовать для каждого файла, который проходит через наш пакет.

[01:43] Мы можем проверить, что работает, снова запустив наш сервер. Перезагрузите браузер, и вы увидите, что параметры функции по умолчанию теперь скомпилированы правильно.Чтобы доказать, что это работает, вы можете изменить это, нажать «Сохранить», и готово.

[02:05] Теперь у нас есть компиляция ES6, а также сервер разработки с активной перезагрузкой, который должен обеспечить действительно эффективный рабочий процесс.

[02:16] Однако в этой головоломке есть еще одна деталь. Если я помещу здесь оператор отладки, вы увидите, что у отладчика есть ОЗУ, но он сообщает, что мы находимся в строке 14 bundle.js. Что правильно, согласно Chrome, потому что он загружает этот файл. Здесь вы можете увидеть строку 14.

[02:46] Но при отладке нашего кода мы хотим, чтобы он отображал строку 2 welcome.js. Для этого нам нужны исходные карты. Мы закроем сервер, вернемся к нашему файлу Gulp и установим Exorcist. Переносим его в наш файл Gulp.

[03:15] Exorcist, как следует из названия, может извлекать исходную карту из потока Browserify. То, как вы это подключаете, состоит в том, что, как вы уже сказали, мы преобразовали поток Browserify в поток источника винила.

[03:32] Мы просто передаем его по конвейеру и передаем туда, куда мы хотим, чтобы вызывалась наша исходная карта.Мы будем тянуть его вместе с файлом пакета. Мы скажем app.js.map.

[03:51] Нам нужно сделать еще одну вещь, чтобы включить это. Browserify должен знать, что мы находимся в режиме отладки, чтобы генерировать исходные карты. Мы уберем это отсюда и сначала добавим к нему debug = true. Этого должно быть достаточно.

[04:12] Давайте снова запустим нашу задачу. На этот раз, когда запускается отладчик, мы находимся в строке 2 приветствия.js, где мы разместили инструкцию отладчика.

Галерея NuGet | Повторно набрал.глоток-исходные карты 0.1.6733

 Установочный пакет Retyped.gulp-sourcemaps -Version 0.1.6733 

 dotnet add package Retyped.gulp-sourcemaps --version 0.1.6733 

Для проектов, поддерживающих PackageReference, скопируйте этот узел XML в файл проекта, чтобы ссылаться на пакет.

 пакет добавить Retyped.gulp-sourcemaps --version 0.1.6733 

Команда NuGet не предоставляет поддержку для этого клиента. Пожалуйста, свяжитесь с сопровождающими для получения поддержки.

 #r "nuget: Retyped.gulp-sourcemaps, 0.1.6733" 

Директива #r может использоваться в F # Interactive, сценариях C # и .NET Interactive. Скопируйте это в интерактивный инструмент или исходный код скрипта, чтобы ссылаться на пакет.

 // Установить заново.gulp-sourcemaps как надстройка для торта
#addin nuget:? package = Retyped.gulp-sourcemaps & version = 0.1.6733.

// Устанавливаем Retyped.gulp-sourcemaps как Cake Tool
#tool nuget:? package = Retyped.gulp-sourcemaps & version = 0.1.6733 

Команда NuGet не предоставляет поддержку для этого клиента.