Typescript Visual Studio代码-缩小和模糊编译的类型脚本

我有一个Visual Studio代码中的TypeScript项目

在将TypeScript编译成JavaScript之后，我希望编译后的JavaScript能够自动缩小和模糊化

他们有很多迷你们，但我想将其中一个集成到工作流中，而不必每次都手动运行它

最理想的解决方案是一个Visual Studio代码扩展，但是据我所知，我找不到任何只缩小JavaScript扩展，而不考虑事先编译TypeScript

否则，我希望将Gulp集成到流程中，可能使用VisualStudio代码提供的tasks.json。如果这是唯一的办法，那么解释一下怎么做就好了

我读了这篇文章，但我不能说我完全理解如何以最合适的方式将Gulp与VisualStudio代码集成，以实现我的目标。我以前从未和Gulp一起工作过

---

事实上，在这种情况下，大口大口就是你所需要的。还有其他一些javascript任务自动机，但我想gulp是一个不错的选择。使用gulp，您可以编译您的typescript和scss文件，复制图像等资源

首先，您需要通过npm安装gulp

npm install gulp --save-dev

此外，您还需要“gulp sourcemaps”来编译类型脚本“gulp typescript”，来编译SCS“gulp sass”，以及用于缩小的“gulp minify”：

npm install gulp-sourcemaps gulp-typescript gulp-sass gulp-minify

我的源代码（typescript文件）在“/src/client”中，编译的项目应该在“/dist/client”中，而且我每次在再次构建项目之前都会删除dist文件夹。我认为它更干净。为此，您还需要“del”模块

现在是用任务构建gulpfile.js的时候了，这个坏蛋应该从导入模块开始：

var _gulp = require('gulp')
var _sourcemaps = require('gulp-sourcemaps')
var _typescript = require('gulp-typescript')
var _sass = require("gulp-sass")
var _minify = require('gulp-minify');

然后，第一项任务应该是清洁：

_gulp.task('clean-frontend', function(done) {
    return _del(['./dist/client'], done);
});

在这里，您创建了一个名为“清理前端”的吞咽任务。您在这里要做的就是删除“dist/client”目录

下一个任务是复制您的前端资源，如图像，或类似的东西在我们的客户机目录中-简而言之：所有不是SCS或typescript文件的内容。您可以将任务称为“复制前端资源”，并通过以下方式创建它：

_gulp.task('copy-frontend-resources', () => {
     _gulp.src([config.frontend.sourceFolder + '/**/*', "!**/*.ts", "!**/*.scss"]).pipe(_gulp.dest('./dist/client'))
})

下一步是复制您使用的javascript库，如下划线、angular、jquery、systemjs以及任何您需要的东西。如果在浏览器前端需要类似下划线的库，只需使用npm安装即可，如：

npm install underscore

之后，您可以将其导入到typescript文件中（从“下划线”导入*as_uu），并在开发中使用它。浏览器无法访问项目根目录中的/node_modules文件夹，因为他的根目录是/dist/client，因此您还需要复制库。为此，您可以创建一组npm模块，如：

let usedLibs = [
    'systemjs/dist/*.js',
    '@angular/**/bundles/**',
    'rxjs/**/*.js',
    'zone.js/dist/*.js',
    'reflect-metadata/*.js',
    'jquery/dist/*.js',
    'underscore/*.js'
]

您只需检查javascript文件所在的每个库，因为您可以看到systemjs在/dist中有his，而下划线在根中有his。好的，现在让我们执行一项任务，将节点_模块的所有库复制到“/dist/client/lib”文件夹：

下一个任务非常简单，它将“src/client”文件夹中的所有SCS编译为css文件：

_gulp.task('build-frontend-css', () => {
    _gulp.src(['src/client/**/*.scss'])
        .pipe(_sass({ style: 'expanded' }))
        .pipe(_gulp.dest('./dist/client'));
})

最后一项任务是编译typescript文件，您可以根据需要调整编译器属性：

let compilerOptions = {
    removeComments: true,
    target: "es6",
    moduleResolution: "node",
    module: "commonjs", // you can choose "AMD" too
    experimentalDecorators : true,
    allowSyntheticDefaultImports : true
}

并创建任务：

_gulp.task('build-frontend-angular', () => {
    var typescriptProject = _typescript.createProject(compilerOptions);
    var typescriptResult = _gulp.src(['./src/client/**/*.ts'])
        .pipe(_sourcemaps.init())
        .pipe(typescriptProject())
        .pipe(_sourcemaps.write())
        .pipe(_gulp.dest('./dist/client_debug'))
})

请注意，您可以将此处的文件复制到“client_debug”目录，因为您希望在复制到client文件夹之前缩小这些文件。 缩小器的工作包括：

_gulp.task('compress-frontend', function() {
  _gulp.src('./dist/client_debug/*.js')
    .pipe(_minify({
        ext:{
            src:'-debug.js',
            min:'.js'
        },
    }))
    .pipe(_gulp.dest('./dist/client'))
});

现在我们已经完成了所有任务，需要一个函数来同时运行所有任务，我们通过创建一个名为“build”的根任务来实现这一点。请注意，“清洁前端”不在gulp.start数组中，它导致了一个错误（gulp.start一次运行，而不是一个接一个）：

好的！Puh，很长一段路，但现在我们要测试它！让我们进入项目目录中的命令行和cd。现在，您可以使用示例中的

gulp NAMEOFTASK

从gulpfile.js运行每个gulp任务：

gulp build

，但也可以运行单个任务之一，如

gulp compress fronted

最后一步是添加一个watcher，如果您更改src目录中的文件，它会自动完成上述所有工作。对于这种情况，您需要添加另一个任务，如：

_gulp.task('watch', function () {
    // Watch frontend
    _gulp.watch(
        ['./src/**/*'], 
        [
            'copy-frontend-resources', 
            'build-frontend-css',
            'build-frontend-angular',
            'compress-frontend'
        ]
    ).on('change', function (e) {
        console.log('File ' + e.path + ' has been changed. Updating/Compiling.');
    });
});

这里不需要“复制前端库”任务，因为我猜您没有在npm模块中更改某些内容。您可以使用运行“监视”任务

gulp watch

你看，VS studio代码中没有真正的“集成”，你所做的只是使用它的终端并运行“gulp watch”或“gulp build”。就这些

但是！还有更多！将package.json修改为以下链接时更酷：

(...)
"scripts": {
    "build": "gulp build",
    "watch": "gulp watch",
}
(...)

现在您可以运行“npm运行构建”或“npm运行监视”。而不是狼吞虎咽的命令

---

我希望我能帮忙

谢谢你的详细回复，大口喝看起来很酷。不过，我不想观看更改，只要我选择通过Ctrl+Shift+B，我就会编译更改。我很确定您可以在vs代码任务中运行命令，也许在自定义任务中运行gulp就是解决方案。我想知道，有人试过吗？问题是VS studio代码的内部编译器只有在不使用通过VPN或其他方式访问的远程目录时才能正常工作（速度越来越慢）。我的解决方案是，不要按ctrl+shift+b，而是单击VS studio代码底部的terminal，向上键入最后一个命令（npm run build）并输入。好吧，这不是一个单一的按键，但我想这没关系，因为通常你不会每隔几分钟构建一次。我通常每隔几分钟构建一次：）我必须坚持更好地与VS代码集成，但无论如何我都会记住你说的。

_gulp.task('watch', function () {
    // Watch frontend
    _gulp.watch(
        ['./src/**/*'], 
        [
            'copy-frontend-resources', 
            'build-frontend-css',
            'build-frontend-angular',
            'compress-frontend'
        ]
    ).on('change', function (e) {
        console.log('File ' + e.path + ' has been changed. Updating/Compiling.');
    });
});

gulp watch

(...)
"scripts": {
    "build": "gulp build",
    "watch": "gulp watch",
}
(...)