Visual Studio Code - 缩小和混淆编译的 TypeScript

Question

我在 Visual Studio Code 中有一个 TypeScript 项目。

TypeScript 编译为 JavaScript 后，我​​希望编译后的 JavaScript 能够自动缩小和混淆。

它们有很多缩小器，但我想将其中一个集成到工作流程中，而不必每次都手动运行它。

最理想的解决方案是为此使用 Visual Studio Code 扩展，但我无法找到任何 - 据我所知，仅缩小不考虑预先编译 TypeScript 的 JavaScript 扩展。

否则，我想将 Gulp 集成到流程中，可能使用 Visual Studio Code 提供的 tasks.json。如果这是唯一的方法，那么最好解释一下如何做到这一点。

我阅读了这篇文章，但我不能说我完全理解如何以最适合我尝试的方式将 Gulp 与 Visual Studio Code 集成。我以前从未使用过 Gulp。

https://code.visualstudio.com/docs/editor/tasks

Answer 1

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

首先你需要通过 npm 安装 gulp

npm install gulp --save-dev

此外，您还需要“gulp sourcemaps”来编译 typescript “gulp-typescript”、编译 scss “gulp-sass”和“gulp-minify”来缩小：

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

我的源（打字稿文件）在“/src/client”中，编译后的项目应该在“/dist/client”中，我每次在再次构建项目之前删除dist文件夹。我认为它更清洁。为此，您还需要“del”模块

npm install 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);
});

在这里，您创建了一个名为“clean-frontend”的 gulp 任务。您在这里所做的只是删除“dist/client”目录。

下一个任务是在我们的客户端目录中复制您的前端资源，如图像或类似的东西 - 简而言之：所有不是 scss 或 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

之后，您可以将其导入您的打字稿文件（从“下划线”导入 * as _）并在开发中使用它。浏览器无法访问项目根目录中的 /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 中有他的，而下划线在他的根中有他的。好的，现在让我们执行将 node_modules 的所有库复制到“/dist/client/lib”文件夹的任务：

_gulp.task('copy-frontend-libraries', () => {
    _gulp.src(usedLibs, {
        cwd: "node_modules/**"
    }).pipe(_gulp.dest('./dist/client/lib'));
})

下一个任务非常简单，它将我们“src/client”文件夹中的所有scss编译成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”目录，因为您希望在复制到客户端文件夹之前缩小它们。 缩小器通过以下方式完成工作：

_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”的根任务来做到这一点。请注意，“clean-frontend”不在 gulp.start 数组中，它会导致错误（gulp.start 一次运行，而不是一个接一个）：

_gulp.task('build', [
    'clean-frontend',
], (done) => {
    // Alles gecleaned, weiter mit build
    _gulp.start(
        [
            'copy-frontend-resources', 
            'copy-frontend-libraries',
            'build-frontend-css',
            'build-frontend-angular',
            'compress-frontend'
        ], () => {
            done()
        }
    )
});

好的！ Puh，很长的路要走，但现在我们要测试它！让我们进入命令行并 cd 在您的项目目录中。在这里，您现在可以运行 gulpfile.js 中的每个 gulp 任务，在我们的示例中使用 gulp NAMEOFTASK：gulp build，但您也可以运行单个任务之一，例如 gulp compress-frontend。

最后一步是添加一个监视程序，如果您更改 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.');
    });
});

这里不需要任务“copy-frontend-libraries”，因为我猜你没有更改 npm 模块中的某些内容。您可以使用

运行监视任务

gulp watch

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

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

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

现在您可以运行“npm run build”或“npm run watch”。而不是 gulp 命令。

希望能帮到你！