Visual Studio Code - Réduire et masquer TypeScript compilé

Question

J'ai un projet TypeScript dans Visual Studio Code. Une fois que TypeScript est compilé en JavaScript, je voudrais que le code JavaScript compilé soit automatiquement réduit et obfusqué.

Il y a beaucoup de minificiers, mais j'aimerais en intégrer un dans le flux de travail sans devoir l'exécuter manuellement à chaque fois. La solution la plus idéale serait une extension Visual Studio Code pour cela, mais je n'ai pas pu trouver d'extensions Minify JavaScript seulement qui ne tiennent pas compte de la compilation de TypeScript à l'avance, pour autant que je sache.

Sinon, j'aimerais intégrer Gulp dans le processus, en utilisant éventuellement tasks.json fourni par Visual Studio Code. Si c'est la seule façon d'y aller, une explication sur la façon de le faire serait formidable.

J'ai lu cet article, mais je ne peux pas dire que j'ai entièrement compris comment intégrer Gulp avec Visual Studio Code de la manière la plus appropriée pour ce que je suis en train de faire. Je n'ai jamais travaillé avec Gulp auparavant.

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

Answer 1

Gulp En effet - dans ce cas - est ce que vous avez besoin. Il y a d'autres automates de tâche javascript mais je suppose que gulp est un bon choix. Avec gulp vous pouvez compiler vos fichiers dactylographiés et scss, copier des ressources comme des images et ainsi de suite.

D'abord, vous devez installer gulp via NPM

npm install gulp --save-dev 

De plus vous avez besoin "Gulp sourcemaps" pour la compilation tapuscrit "gulp-tapuscrit", pour la compilation SCSS "gulp-SASS" et "avaler-rapetisser" pour le format réduit:

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

Ma source (fichiers dactylographiées) sont dans «/src/client » et le projet compilé devrait être «/dist/client », aussi je supprimer le dossier dist chaque fois avant la construction du projet encore. Je pense que c'est plus propre. Pour cela, vous aurez également besoin du « del » Module

npm install del 

Maintenant, il est temps de construire votre gulpfile.js avec vos tâches, ce dur à cuire doit commencer par importer vos modules:

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

Ensuite, le la première tâche doit être nettoyée:

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

Ici, vous créez une tâche appelée "clean-frontend". Tout ce que vous faites ici est de supprimer le répertoire "dist/client". La tâche suivante consiste à copier vos ressources frontend comme des images, ou des choses comme ça dans notre répertoire client - en bref: tout ce qui n'est pas un fichier scss, ou un fichier dactylographié. Vous appelez votre tâche « copie-frontend-ressources » et de créer avec:

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

La prochaine étape consiste à copier vos bibliothèques javascript que vous utilisez comme underscore, angulaire, jquery, systemjs, et tout ce que vous avez besoin.Si vous avez besoin d'une bibliothèque comme underscore dans le frontend du navigateur vous installez simplement avec NPM comme:

npm install underscore 

après que vous pouvez l'importer dans vos fichiers dactylographiées (importation * comme _ de « underscore ») et l'utiliser dans développement. Le navigateur n'a pas accès à votre dossier/node_modules dans le répertoire racine du projet, car son répertoire racine est/dist/client et, pour cette raison, vous devrez également copier vos bibliothèques. Pour cela, vous créez un tableau de modules NPM-vous utiliser comme:

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

Il vous suffit de vérifier pour chaque bibliothèque où ses fichiers javascript sont situés, comme vous pouvez le voir systemjs a son dans/dist, alors que underscore a son dans sa racine. D'accord, nous allons faire maintenant la tâche qui copiera toutes les bibliothèques des node_modules dans le dossier «/dist/client/lib »:

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

La tâche suivante est assez simple, il compile tous SCSS dans notre " dossier src/client » à des fichiers CSS:

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

la dernière tâche compile les fichiers dactylographiées, vous pouvez ajuster les propriétés du compilateur à vos besoins:

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

Et créer la tâche:Notez que vous copiez vos fichiers ici dans le répertoire "client_debug", car vous souhaitez les réduire avant de les copier dans le dossier client. Le minifier fait son travail avec:

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

Maintenant, nous avons tous nos tâches complètes et ont besoin d'une fonction à exécuter tous à la fois et nous le faisons avec la création d'une tâche racine appelée « construire ». Notez que le « nettoyage frontend » est pas à l'intérieur du tableau de gulp.start, il a provoqué une erreur (gulp.start fonctionne à la fois et non un après l'autre):

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

Ok! Puh, long chemin, mais maintenant nous voulons le tester! Laisse aller dans la ligne de commande et cd dans votre répertoire de projet. Ici vous pouvez exécuter maintenant toutes les tâches de gulp à partir du gulpfile.js avec gulp NAMEOFTASK dans notre exemple: gulp build mais vous pouvez également exécuter une des tâches simples comme gulp compress-frontend.

La dernière étape serait d'ajouter un observateur, qui fait tout ce qui précède automatisé si vous changez un fichier dans votre répertoire src. Dans ce cas, vous devez ajouter une autre tâche comme:

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

La tâche « copy-frontend-bibliothèques » ne seront pas nécessaires ici, parce que je suppose que vous ne l'avez pas changé quelque chose à l'intérieur des modules de MNP. Vous pouvez exécuter la tâche de montre avec

gulp watch 

Vous voyez, il n'y a pas vraiment « l'intégration » dans le code studio VS, tout ce que vous faites est d'utiliser le terminal et exécutez « montre engouffreur » ou « construire engouffreur ". C'est tout.

MAIS! Il y a plus! Plus cool c'est quand vous modifiez votre paquet.JSON à quelque chose linke que:

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

Maintenant vous pouvez lancer "NPM run build" ou "montre l'exécution de NPM". au lieu de la commande gulp.

J'espère pouvoir vous aider!