标签: gulp-sourcemaps

我正在使用gulp - typescript将我的TypeScript代码转换为JavaScript.从本质上讲,我想为一个*.ts文件,还有待相应的*.js,*.d.ts而*.map生成的文件.

在编译任务中,我注意到我只能通过声明或与地图一起转换而不是同时转发.例如,有1个编译任务尝试生成声明+映射文件(使用JavaScript文件),如下所示不起作用.以下将生成JavaScript +映射文件,但不生成声明文件.

var tsc = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = tsc.createProject('tsconfig.json');

gulp.task('compile', function () {
  var tsProject = tsc.createProject('tsconfig.json');
  var tsResult = gulp.src(['src/**/*.ts'])
    .pipe(sourcemaps.init())
    .pipe(tsProject());
  return tsResult.js
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/src'));
});

我tsconfig.json看起来如下.

{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es6",
        "module": "commonjs",
        "alwaysStrict": true,
        "diagnostics": false,
        "listEmittedFiles": false,
        "listFiles": false,
        "pretty": true,
        "declaration": true
    } …

I'm using gulp-typescript and gulp-sourcemaps to compile TypeScript with sourcemaps. I want to output both the .js and the source map files to the same directory as the original .ts file.

I'm using a tsconfig.json file to configure TypeScript, and I'm using typings for managing TypeScript definition files. All of my own code is in the js directory. Here's my project structure:

project root
|-- js/
|   |-- subdir/
|   |   |-- someScript.ts
|   |-- app.ts
|-- typings/
|   |-- …

我正在尝试自动化连接和uglify js in gulp.

这是我的gulpfile.js:

gulp.task('compressjs', function() {
    gulp.src(['public/app/**/*.js','!public/app/**/*.min.js'])
    .pipe(sourcemaps.init())
    .pipe(wrap('(function(){"use strict"; <%= contents %>\n})();'))
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rename({
        extname: '.min.js'
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/app'));
})

你是否认为需要包装每个文件(function(){"use strict"; <%= contents %>\n})();以避免在每个文件连接在一起时发生冲突？你认为我的gulp任务是好的,还是可以更好地执行它的任务？

这里可能有几个小的样式问题，但大多数情况下是有效的。但是，它似乎并没有监视styles/*.scss该文件夹中文件或新 SCSS 的更改。与 Javascript 相同：scripts/*.js不在手表上更新。

也可以在不破坏源映射的情况下结合 SCSS 和 CSS，但这并不重要。现在，只要让实时更新工作就好了。

const gulp = require('gulp')
const plumber = require('gulp-plumber')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const concat = require('gulp-concat')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')
const clean = require('gulp-clean')
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const minifycss = require('gulp-minify-css');

const gulpfn = require('gulp-fn')
const fs = require('fs');

const util = require('gulp-util');
let config = { production: !!util.env.production } …

嗨,这个问题让我很难过.

我想知道,在从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));
});

请注意,这里的一个重要问题是源映射调用之间的所有内容都需要支持gulp-sourcemaps,而Browserify不支持.Gulp也有一个Typescript编译器,但是我如何使用Browserify？

谢谢!