Question

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

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

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

最理想的解决方案是Visual Studio Code扩展，但是我无法找到任何 - 只有Minify JavaScript扩展，不考虑事先编译TypeScript，我的理解。< / p>

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

我读过这篇文章，但我不能说我完全理解如何以最合适的方式将Gulp与Visual Studio Code集成在一起我正在尝试做什么。我之前从未与Gulp合作过。

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

Answer 1

确实是gulp--在这种情况下 - 是你需要的。还有其他一些javascript任务自动机，但我想gulp是一个不错的选择。通过gulp，您可以编译打字稿和scss文件，复制图像等资源。

首先你需要通过npm

安装gulp

npm install gulp --save-dev

此外，您需要＆＃34; gulp sourcemaps＆＃34;用于编译打字稿＆＃34; gulp-typescript＆＃34;，用于编译scss＆＃34; gulp-sass＆＃34;和＆＃34; gulp-minify＆＃34;缩小：

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

我的源（打字稿文件）位于＆＃34; / src / client＆＃34;并且编译后的项目应该在＆＃34; / dist / client＆＃34;中，每次在重新构建项目之前都会删除dist文件夹。我认为它更干净。为此你还需要＆＃34; del＆＃34;模块

npm install del

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

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

在这里，您可以创建名为＆＃34; clean-frontend＆＃34;的gulp任务。你在这里所做的就是删除＆＃34; dist / client＆＃34; 。目录

下一个任务是复制你的前端资源，比如图像，或类似我们客户端目录中的东西 - 简而言之：一切都没有scss，或者是打字稿文件。你打电话给你的任务＆＃34; copy-frontend-resources＆＃34;并使用：

创建它

_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

之后你可以在你的打字稿文件中导入它（导入*作为_来自＆＃34;下划线＆＃34;）并在开发中使用它。浏览器无法访问项目根目录中的/ 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有他的in / dist，而下划线则是他的根。好的，现在让我们完成将node_modules的所有库复制到＆＃34; / dist / client / lib＆＃34;文件夹：

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

下一个任务很简单，它编译了我们＆＃34; src / client＆＃34;中的所有scss。文件夹到css文件：

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

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

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'))
})

请注意，您将文件复制到＆＃34; client_debug＆＃34;目录，因为您希望在复制到客户端文件夹之前缩小它们。 minifier完成它的工作：

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

现在我们已经完成了所有任务，并且需要一个函数来同时运行所有任务，我们通过创建一个名为＆＃34; build＆＃34;的根任务来实现。注意，＆＃34;清洁前端＆＃34;它不在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()
        }
    )
});

好！嗯，很长的路，但现在我们要测试它！让我们进入命令行并在项目目录中cd。在这里，您可以在我们的示例gulp NAMEOFTASK中使用gulp build运行gulpfile.js中的每个gulp任务，但您也可以运行其中一个任务，例如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.');
    });
});

任务＆＃34; copy-frontend-libraries＆＃34;在这里不需要，因为我猜你没有改变npm模块里面的东西。您可以使用

运行监视任务

gulp watch

你知道，没有真正的＆＃34;整合＆＃34;在VS工作室代码中，您所做的就是使用它的终端并运行＆＃34; gulp watch＆＃34;，或者＃34; gulp build＆＃34;。这就是全部。

BUT！还有更多！当你将package.json修改为linke：

时，会更酷

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

现在你可以运行＆＃34; npm run build＆＃34;或＆＃34; npm run watch＆＃34;。而不是gulp命令。

我希望我能帮忙！

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

1 个答案: