Concaténer et minifier les fichiers JS dans Node

Question

Existe-t-il un module dans NodeJS pour concaténer et minifier les fichiers JavaScript ?

Answer 1

Je recommande d'utiliser UglifyJS qui est une bibliothèque d'analyseur / mangler / compresseur / embellisseur JavaScript pour NodeJS.

Si vous êtes intéressé par des outils d'automatisation qui font plus que simplement concaténer et minifier des fichiers, il existe les solutions suivantes :

• GruntJS est un outil de construction en ligne de commande basé sur les tâches pour les projets JavaScript. La version actuelle comporte les tâches intégrées suivantes :

  1. concat - Concaténer des fichiers.
  2. init - Génère l'échafaudage du projet à partir d'un modèle prédéfini.
  3. lint - Valider les fichiers avec JSHint .
  4. min - Minimiser les fichiers avec UglifyJS .
  5. qunit - Exécuter QUnit les tests unitaires dans un système sans tête PhantomJS instance.
  6. server - Démarre un serveur web statique.

En plus de ces tâches, il y a beaucoup de plugins disponible.

• Gulp est une boîte à outils qui vous aidera à automatiser les tâches pénibles ou chronophages dans votre flux de développement. Pour le développement web (si c'est votre truc), il peut vous aider en effectuant le prétraitement CSS, le transpilage JS, la minification, le rechargement en direct, et bien plus encore. Des intégrations sont prévues dans les principaux IDE et les utilisateurs apprécient gulp pour PHP, .NET, Node.js, Java, etc. Avec plus de 1700 plugins (et beaucoup de choses que vous pouvez faire sans plugins), gulp vous permet d'arrêter de vous embêter avec les systèmes de construction et de vous remettre au travail.

• Yeoman est un ensemble d'outils et de bibliothèques, ainsi qu'un flux de travail, qui peuvent aider les développeurs à créer rapidement des applications Web attrayantes et attrayantes.

  1. Échafaudage rapide - Échafaudez facilement de nouveaux projets avec des modèles personnalisables (par ex. HTML5 Boilerplate , Twitter Bootstrap ), AMD (via RequireJS ) et plus encore.
  2. Compilation automatique de CoffeeScript et Compass - Our LiveReload Le processus de veille compile automatiquement les fichiers sources et rafraîchit votre navigateur à chaque modification, ce qui vous évite de le faire.
  3. Automatiquement lint vos scripts - Tous vos scripts sont automatiquement exécutés contre jshint pour s'assurer qu'ils suivent les meilleures pratiques linguistiques.
  4. Serveur de prévisualisation intégré - Plus besoin de lancer votre propre serveur HTTP. Mon serveur intégré peut être lancé avec une seule commande.
  5. Optimisation d'image impressionnante - J'optimise toutes vos images en utilisant OptiPNG et JPEGTran pour que vos utilisateurs passent moins de temps à télécharger des ressources et plus de temps à utiliser votre application.
  6. Génération de manifestes AppCache - Je génère les manifestes de votre cache d'application pour vous. Il suffit de créer un projet et boum. Vous l'aurez gratuitement.
  7. Processus de construction génial - Non seulement vous bénéficiez de la minification et de la concaténation, mais j'optimise également tous vos fichiers d'image et HTML, je compile vos fichiers d'image et vos fichiers d'image. CoffeeScript y Compass et vous générez un manifeste de cache d'application. Si vous utilisez AMD, nous ferons passer ces modules par r.js pour que vous n'ayez pas à le faire.
  8. Gestion intégrée des paquets - Vous avez besoin d'une dépendance ? Il suffit d'appuyer sur un bouton. Je vous permets de rechercher facilement de nouveaux paquets via la ligne de commande (par exemple, yeoman search jquery ), les installer et les maintenir à jour sans avoir besoin d'ouvrir votre navigateur.
  9. Prise en charge de la syntaxe de module ES6 - Expérimentez l'écriture de modules en utilisant la dernière syntaxe de module ECMAScript 6. Il s'agit d'une fonctionnalité expérimentale qui se transpose en ES5 afin que vous puissiez utiliser le code dans tous les navigateurs modernes.
  10. PhantomJS Unit Testing - Exécutez facilement vos tests unitaires dans WebKit sans tête via PhantomJS . Lorsque vous créez une nouvelle application, j'inclus également un échafaudage de test pour votre application.

Answer 2

UglifyJS est un module Node qui a pour but de réduire le javascript. Je ne pense pas qu'il joigne également les fichiers, mais il y a peut-être une option que j'ai manquée.

Edit : Avec UglifyJS 2 La concaténation est également intégrée.

Si vous voulez faire cela en ligne dans votre application node, c'est très facile. Cela vous permet de générer dynamiquement votre js script minifié/concaténé au moment de l'exécution sans utiliser la méthode grunt ou yeoman.

npm install uglify-js

et dans votre module :

var fs = require('fs');
var uglify = require("uglify-js");

var uglified = uglify.minify(['file1.js', 'file2.js', 'file3.js']);

fs.writeFile('concat.min.js', uglified.code, function (err){
  if(err) {
    console.log(err);
  } else {
    console.log("Script generated and saved:", 'concat.min.js');
  }      
});

Answer 3

Si vous utilisez Connect, alors j'ai eu de la chance avec Connect-Assetmanager

Answer 4

Il est préférable d'utiliser quelque chose comme gulp ou webpack pour concaténer, organiser ou regrouper vos ressources.

---

Afin de joindre le fichier js, vous pouvez faire comme dans le makefile de twitter bootstrap.

cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > docs/assets/js/bootstrap.js

C'est juste une concaténation de fichiers avec une sortie vers un fichier js

Ensuite, vous pouvez installer uglify-js pour minifier js :

npm -g install uglify-js

Et exécutez cette commande avec votre path/file.js ofc :

uglifyjs docs/assets/js/bootstrap.js -nc > docs/assets/js/bootstrap.min.js

Comme mentionné dans les commentaires depuis uglifyjs 2, vous pouvez également le faire :

uglifyjs --compress --mangle -- input.js

Answer 5

Si vous aimez l'approche du pipeline d'actifs de Rails 3.1, vous devriez essayer mes connect-assets bibliothèque.