Visual Studioコード - コンパイルされたTypeScriptを小さくして難読化する

Question

Visual StudioコードにTypeScriptプロジェクトがあります。

TypeScriptをJavaScriptにコンパイルした後、コンパイルしたJavaScriptを自動的に縮小して難読化したいと思います。

これらは多くのミニ化ツールですが、毎回手動で実行することなくワークフローに統合したいと考えています。

最も理想的な解決策はVisual Studioのコード拡張ですが、事前にTypeScriptをコンパイルすることを考慮していないMinify JavaScriptの拡張機能は、私の理解のために見つけることができませんでした。

それ以外の場合は、Visual Studio Codeで提供されるtasks.jsonを使用して、Gulpをプロセスに統合したいと考えています。これが唯一の方法だとすれば、それを行う方法についての説明は素晴らしいでしょう。

私はこの記事を読んだが、GulpをVisual Studioコードと統合する方法を完全に理解しているとは言い難い。私は前にGulpと仕事をしていませんでした。

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

Answer 1

実際に飲み込む - このケースでは - 何が必要です。他にもいくつかのjavascriptタスク・オートメーションがありますが、gulpは良い選択だと思います。 gulpを使用すると、あなたのタイスクリプトとscssファイルをコンパイルしたり、イメージなどのリソースをコピーしたりすることができます。

まずあなたは "-SASSを飲み込む" SCSSをコンパイルするため、typescriptです "飲み込む-typescriptです" をコンパイルするためにあなたが "一気sourcemaps" が必要さらに

npm install gulp --save-dev 

NPM経由でゴクゴクをインストールする必要があり、かつ "飲み込む、縮小化"縮小のために：

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

マイソース（typescriptですファイル）「/ SRC /クライアント」であり、コンパイルされたプロジェクトは、「/ DIST /クライアント」にしてください。また、私はプロジェクトをビルドする前に、distのフォルダを毎回削除再び。私はそのクリーナーだと思います。このためにも、「デル」モジュール今

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

ここでは、「クリーンフロントエンド」と呼ばれるグループタスクを作成します。ここで行うのは、 "dist/client"ディレクトリを削除することだけです。

次のタスクは、画像などのフロントエンドリソースをクライアントディレクトリにコピーすることです。つまり、scssやtypescriptファイルではないすべてのものです。あなたのタスク「コピーフロントエンド・リソース」を呼び出し、とそれを作成します。

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

次のステップは、あなたが、アンダースコア、角度、jqueryの、systemjs、これまで何を必要とするように使用JavaScriptのライブラリをコピーすることです。（「アンダースコア」から_と*インポート）あなたはtypescriptですファイルでそれをインポートすることができ、その後

npm install underscore 

とでそれを使用する：あなたは、ブラウザのフロントエンドにアンダースコアのようなライブラリが必要な場合は、単にのようなNPMでそれをインストール開発。ブラウザはルートディレクトリが/ dist/clientであるため、プロジェクトルートディレクトリの/ node_modulesフォルダにアクセスすることはできません。このため、ライブラリもコピーする必要があります。そのために、あなたが同様に使用NPMモジュールのアレイを作成します。

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

あなたはアンダースコアが彼を持っていながらsystemjsは、彼の中にはdist /を持って見ることができるようにあなたはただ、そのJavaScriptファイルが置かれているすべてのライブラリをチェックする必要があり彼の根元に

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

次のタスクは非常に簡単です、それは私たちの "内のすべてのSCSSをコンパイル：さて、今のは「/ DIST /クライアント/ libに」フォルダにnode_modulesのライブラリのすべてをコピーする作業をやらせますcssファイルへのsrc /クライアント」フォルダ：

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

をし、タスクを作成します：

は

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

最後のタスクはtypescriptですファイルをコンパイルされ、あなたのニーズにコンパイラのプロパティを調整することができます

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

今、私たちはすべて私たちのタスクが完了しており、一度にそれらのすべてを実行する機能を必要とし、私たちは、「ビルド」と呼ばれるルートタスクを作成していることを実行します。 minifierはとの仕事をしていません。 「クリーン・フロントエンドは、」gulp.start配列内ではないことに注意してください、それは（gulp.startは別の後に一斉にではなく1に実行）のエラーが発生します。

_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のような単一のタスクの1つを実行することもできます。

最後に、ウォッチャーを追加すると、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モジュール内部の何かを変更していなかったと思いますので、ここで必要とされることはありません。あなたは何本当にあなたがすべてそれのターミナルを使用し、「ゴクゴク時計」を実行することです、VSのスタジオコードに「統合」、または「ゴクゴクビルドが存在しない、

gulp watch 

あなたが見

で時計のタスクを実行することができます"それで全部です。

BUT！もっとたくさん！パッケージを変更すると、よりクーラーになります。jsonから何かのlinkeへ：

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

これで「npm run build」または「npm run watch」を実行できます。 gulpコマンドの代わりに使用します。

私は助けてくれることを願っています！