TypeScript + Browserify + SourceMaps в Gulp?

Привет, эта проблема ставит меня в тупик.

Я хочу знать, смогу ли я после компиляции из TS и использования Browserify заставить свои SourceMaps (из gulp-sourcemaps) полностью указывать на мои файлы TS.

В настоящее время у меня это работает, поэтому я использую tsify для компиляции TS, затем я объединяю все это в all.js, а затем uglify (minify) в all.min.js. У меня также есть SourceMaps, но только для сопоставления минифицированной версии с all.js.

Я искал довольно много для этого. Я также делал SourceMaps раньше из минифицированного JS в свой TS, но в этом случае я не использовал Browserify.

Моя текущая рабочая задача Gulp:

gulp.task('scripts', function(){
    return browserify(paths.mainJs)
        .plugin(tsify)
        .bundle()
        .on('error',console.error.bind(console))
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

Обратите внимание, что большой проблемой здесь является то, что все между вызовами sourcemaps должно иметь поддержку gulp-sourcemaps, чего нет в Browserify. В Gulp также есть компилятор Typescript, но как мне тогда использовать Browserify?

Спасибо!


typescript gulp browserify gulp-sourcemaps tsify
person Caleb    schedule 23.03.2016    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Я понял!! После часа ....

Это оно:

    gulp.task('scripts', function(){
    return browserify(paths.mainTs,{debug: true})
        .on('error',console.error.bind(console))
        .plugin(tsify)
        .bundle()
        .pipe(source('all.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(gulp.dest(paths.outscripts))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.outscripts));
});

paths.mainTs — это входной TS-файл (main.ts, index.ts, app.ts и т. д.).

Флаг отладки сообщает Browserify о необходимости записи исходных карт.

Затем я загружаю эти карты перед минимизацией, а затем записываю их в минимальную версию.

Обратите внимание, что если вы используете полный js, а не минимизированный, при отладке вы можете просто пропустить две строки с исходными картами.

РЕДАКТИРОВАТЬ: Чтобы избежать большого файла JS в конце (поскольку он включает встроенные исходные карты), просто sourcemaps.write('/somePath').

person Caleb    schedule 23.03.2016
comment
Я очень рад, что вы опубликовали этот ответ - person tomfumb; 10.04.2017