Gulp: создание исходных карт как для минифицированных, так и для неминифицированных скриптов.

Я новичок в gulp и столкнулся с проблемой, которая, вероятно, является довольно распространенным сценарием. Я пытаюсь скомпилировать машинописный текст в javascript, создать для него исходную карту и затем запустить uglify. Я хотел бы иметь исходную карту для ugliyfied, а также не uglified js.

Я пытаюсь создать следующую файловую структуру:

framework.js
framework.js.map < this won't work
framework.min.js
framework.min.js.map

Это моя задача:

var gulp = require('gulp'),
uglify = require('gulp-uglify')
ts = require("gulp-typescript")
sourcemaps = require('gulp-sourcemaps')
rename = require('gulp-rename');

var tsProject = ts.createProject("tsconfig.json");


gulp.task('typescript', function(){
    tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(tsProject()).js
    .pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version
    .pipe(gulp.dest("dist"))
    .pipe(uglify()) // Code will fail here 
    .pipe(rename({suffix:'.min'}))
    .pipe(sourcemaps.write('.')) // Write sourcemap for minified version.
    .pipe(gulp.dest("dist"));
});

gulp.task('default', ['typescript']);

Как видите, я дважды запускаю sourcemaps.write (), чтобы получить два разных файла. Это дает мне ошибку

tream.js:74                                                                        
  throw er; // Unhandled stream error in pipe.                                  
  ^ GulpUglifyError: unable to minify JavaScript                                       
at createError     (C:\Users\alexa\Dropbox\code\Web\mhadmin\framework\node_modules\gulp-uglify\lib\create-error.js:6:14)

Отсутствие первого из вызовов sourcemap.write () приведет к созданию правильной исходной карты для уменьшенной версии файла.

Любые идеи, как это исправить?

РЕДАКТИРОВАТЬ: это не совсем дубликат gulp: uglify и исходных карт, поскольку мне нужно написать несколько исходные карты с несколькими вызовами gulp.dest ()


typescript javascript gulp uglifyjs gulp-sourcemaps
person mode777    schedule 24.09.2016    source источник
comment
Возможный дубликат gulp: uglify и исходных карт   -  person user3272018    schedule 24.09.2016

Ответы (2)


arrow_upward
22
arrow_downward

Проблема в том, что после первого .pipe(sourcemaps.write('.')) в вашем потоке есть два файла:

framework.js
framework.js.map

Вы записываете эти два файла в файловую систему (что нормально), но затем пытаетесь запустить uglify() на них обоих. Поскольку ваш framework.js.map файл не является файлом JavaScript и не содержит допустимого кода JavaScript, запускается плагин uglify().

После того, как вы записали framework.js.map в файловую систему, действительно больше нет причин хранить этот файл в потоке. Объект винилового файла для framework.js по-прежнему имеет свойство .sourceMap, которое переносит все преобразования, что означает, что вы можете просто удалить файл framework.js.map из потока.

Плагин gulp-filter позволяет вам сделать именно это:

var filter = require('gulp-filter');

gulp.task('typescript', function(){
  return tsProject.src()
   .pipe(sourcemaps.init())
   .pipe(tsProject()).js
   .pipe(sourcemaps.write('.'))
   .pipe(gulp.dest("dist"))
   .pipe(filter('**/*.js')) // only let JavaScript files through here
   .pipe(uglify())
   .pipe(rename({suffix:'.min'}))
   .pipe(sourcemaps.write('.'))
   .pipe(gulp.dest("dist"));
});

После .pipe(filter('**/*.js')) в потоке будет только файл framework.js, и uglify() больше не будет подбрасывать.

person Sven Schoenung    schedule 24.09.2016
comment
Большое спасибо, Свен! Я только что понял точно такое же (мой код даже идентичен вашему) решение, и оно работает! - person mode777; 24.09.2016
comment
@Sven: разве uglifyJS не должен иметь опцию outSourceMap? stackoverflow.com/questions/41722432/ - person George Katsanos; 18.01.2017

arrow_upward
0
arrow_downward

Похоже на взлом, но он работает

gulp.src('TypeScript/Test.ts')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(ts(tsOptions)).js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./wwwroot/test'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./wwwroot/test'));

Магия находится в plumber. Сантехник предотвращает остановку процесса в случае исключения. Но главный интерес, почему происходит исключение. Итак, все довольно ясно. В вашем коде вы создаете исходную карту с помощью .pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version, а затем пытаетесь ее скрыть. И да, sourcemap - это не js, и происходит исключение. С plumber это исключение игнорируется, и вы достигаете своей цели.

Но я мог понять что-то не так, рекомендую найти более верное решение.

person user3272018    schedule 24.09.2016
comment
Это сработает, но, как вы сказали, это своего рода взлом. Но ты поставил меня на путь записи. Главное - избавиться от файлов * .map в конвейере, прежде чем продолжить. См. Ответ SvenSchoenung. - person mode777; 24.09.2016