Отладка Javascript с многоуровневыми исходными картами

У меня много файлов javascript, которые проходят через grunt uglify и минимизируются индивидуально, и, кроме того, я выполняю grunt concat для них, чтобы получить один объединенный минимизированный файл с исходной картой.

Пример

a.js, b.js, c.js -> Uglify -> a.min.js, b.min.js, c.min.js -> concat -> bundle.min.js

С инструментами разработки и картой источников из bundle.min.js я могу отследить только до a.min.js / b.min.js / c.min.js. Моя цель - использовать карту источников для отслеживания файлов a.js / b.js / c.js.


person Sumit Paliwal    schedule 17.04.2018    source источник


Ответы (1)


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


a.js, b.js, c.js --> concat --> bundle.js --> uglify --> bundle.min.js


Примечание. Порядок задач был изменен на объединение отдельных .js файлов перед удалением результирующего вывода.

Почему необходимо менять порядок задач?

Поскольку grunt-contrib-uglify предоставляет _ 9_, а параметр grunt-contrib-concat просто не работает. Кроме того, это типичная практика объединять файлы перед их удалением.

Опция sourceMapIn описывается следующим образом:

sourceMapIn

Тип: String Function

По умолчанию: undefined

Расположение исходной карты входных данных из более ранней компиляции, например из CoffeeScript. Если функция предоставлена, источник uglify передается в качестве аргумента, а возвращаемое значение будет использоваться как имя sourceMap. Это имеет смысл только тогда, когда есть один исходный файл.

Gruntfile.js

Ваш Gruntfile.js можно настроить примерно так:

module.exports = function(grunt) {

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.initConfig({
    concat: {
      options: {
        // ...
        sourceMap: true,
        sourceMapName: 'dist/js/bundle.map' // Specify path/name for sourceMap
      },
      my_target: {
        src: ['src/js/a.js', 'src/js/b.js', 'src/js/c.js'],
        dest: 'dist/js/bundle.js',
      },
    },
    uglify: {
      options: {
        // ...
        sourceMap: {
          includeSources: true
        },
        sourceMapIn: 'dist/js/bundle.map', // Specify the same path/name as
                                           // the `sourceMapName` value
                                           // in the `concat` task
      },
      my_target: {
        files: {
          'dist/js/bundle.min.js': ['dist/js/bundle.js']
        }
      }
    }
  });

  // Note we run the `concat` task before the `uglify` task.
  grunt.registerTask('default', ['concat:my_target', 'uglify:my_target']);
};

Примечания:

  1. Значение пути, указанное для concat.options.sourceMapName и uglify.options.sourceMapIn, должно быть одинаковым, например dist/js/bundle.map.

  2. Задача concat должна выполняться перед задачей uglify.

  3. Пути src и dest для обеих задач необходимо будет определить в соответствии с требованиями вашего проекта.

person RobC    schedule 18.04.2018