Как работает Gulp + sourcemaps для отладки

Question

Итак, я только что настроился на Gulp вчера, и после каменистого старта я хорошо нахожусь на пути к автоматизации процессов сборки, но я решил попробовать что-то сделать teensy bit trickier и вдруг ударил другую стену.

Мой желаемый результат состоит в том, чтобы иметь миниатюрный файл javascript, который я могу обслуживать в браузере, а также при проверке в Chrome или Firefox см. Исходный код. Довольно просто, не так ли?

настоящее время у меня следующий в моем gulpfile:

gulp.task('minify', function() { 
    gulp.src('./sources/**/*.js') 
    .pipe(sourcemaps.init()) 
    .pipe(minify({ 
     ext:{ 
      src:'.js', 
      min:'.min.js' 
     } 
    })) 
    .pipe(sourcemaps.write('maps')) 
    .pipe(gulp.dest('./www/js')); 
}); 

Это успешно генерирует sourcemaps в ./www/js/maps/ и помещает следующее в нижней части несжатых файлов:

//# sourceMappingURL=maps/<whatever>.js.map 

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

Что я делаю неправильно?

Answer 1

Вы можете попробовать это:

gulp.task('minify', function() { 
    gulp.src('./sources/**/*.js') 
    .pipe(sourcemaps.init()) 
    .pipe(minify({ 
     ext:{ 
      src:'.js', 
      min:'.min.js' 
     } 
    })) 
    .pipe(sourcemaps.write('maps', { 
     addComment: true 
    })) 
    .pipe(gulp.dest('./www/js')); 
});