Concattez et réduisez les fichiers JS dans Node
Existe-t-il un module dans NodeJS pour concaténer et réduire les fichiers JavaScript?
Si vous utilisez Connect, j'ai eu de la chance avec Connect-Assetmanager
Je recommande d'utiliser glifyJS 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 réduire des fichiers, il existe les solutions suivantes:
GruntJS est un outil de création de ligne de commande basé sur les tâches pour les projets JavaScript. La version actuelle a les tâches intégrées suivantes:
- concat - Concatène des fichiers.
- init - Génère un échafaudage de projet à partir d'un modèle prédéfini.
- lint - Validez les fichiers avec JSHint .
- min - Réduit les fichiers avec glifyJS .
- qunit - Exécute QUnit tests unitaires dans une instance sans tête PhantomJS .
- serveur - Démarrez un serveur Web statique.
En plus de ces tâches, il y a beaucoup de plugins disponibles.
Gulp est une boîte à outils qui vous aidera à automatiser les tâches pénibles ou chronophages de votre flux de travail 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. Les intégrations sont intégrées dans tous les principaux IDE et les gens adorent la gorgée de PHP, .NET, Node.js, Java, etc. Avec plus de 1700 plugins (et beaucoup de choses que vous pouvez faire sans plugins), gulp vous permet de cesser de jouer avec les systèmes de build et de vous remettre au travail.
Yeoman est un ensemble d'outils, de bibliothèques et d'un flux de travail robustes et réfléchis qui peuvent aider les développeurs à créer rapidement de belles applications Web convaincantes.
- Échafaudage ultra-rapide - Échafaudez facilement de nouveaux projets avec des modèles personnalisables (par exemple HTML5 Boilerplate , Twitter Bootstrap ), AMD (via RequireJS ) et plus encore.
- Compilez automatiquement CoffeeScript & Compass - Notre processus de surveillance LiveReload compile automatiquement les fichiers source et actualise votre navigateur chaque fois qu'un changement est effectué afin que vous n'ayez pas à le faire.
- Lint automatiquement vos scripts - Tous vos scripts sont automatiquement exécutés contre jshint pour vous assurer qu'ils suivent les meilleures pratiques linguistiques.
- Serveur de prévisualisation intégré - Plus besoin de démarrer votre propre serveur HTTP. Mon intégré peut être déclenché avec une seule commande.
- Optimisation d'image impressionnante - J'optimise toutes vos images en utilisant OptiPNG et JPEGTran afin que vos utilisateurs puissent passer moins de temps à télécharger des ressources et plus de temps à utiliser votre application.
- Génération de manifeste AppCache - Je génère vos manifestes de cache d'application pour vous. Construisez simplement un projet et un boom. Vous l'obtiendrez gratuitement.
- Processus de construction tueur - Non seulement vous obtenez la minification et la concaténation; J'optimise également tous vos fichiers image, HTML, compile vos fichiers CoffeeScript et Compass , vous génère un manifeste de cache d'application et, si vous utilisez AMD, nous passerons ces modules via r.js pour que vous n'ayez pas à le faire.
- Gestion intégrée des packages - Besoin d'une dépendance? C'est juste une frappe. Je vous permet de rechercher facilement de nouveaux packages via la ligne de commande (par exemple, yeoman search jquery ), de les installer et de les maintenir à jour sans avoir à ouvrir votre navigateur.
- Prise en charge de la syntaxe du module ES6 - Expérimentez avec l'écriture de modules en utilisant la dernière syntaxe de module ECMAScript 6. Il s'agit d'une fonctionnalité expérimentale qui se transpile à nouveau vers ES5 afin que vous puissiez utiliser le code dans tous les navigateurs modernes.
- Tests unitaires PhantomJS - Exécutez facilement vos tests unitaires dans WebKit sans tête via PhantomJS . Lorsque vous créez une nouvelle application, j'inclus également des échafaudages de test pour votre application.
glifyJS est un module Node qui est tout au sujet de la réduction de javascript. Je ne pense pas qu'il joint également les fichiers, mais il y a peut-être une option que j'ai ratée.
Edit: Avec glifyJS 2 , il a également intégré la concaténation.
Si vous souhaitez le faire en ligne dans votre application de nœud, c'est vraiment facile. Cela vous permet de générer dynamiquement votre script js minifié/concaténé à 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');
}
});
Vous feriez mieux d'utiliser quelque chose comme gulp/webpack pour concat/organiser/regrouper vos actifs.
Pour joindre le fichier js, vous pouvez faire comme cela se fait dans Twitter bootstrap makefile
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
Ceci est juste une concaténation de fichiers avec une sortie vers un fichier js
Ensuite, vous pouvez installer uglify-js pour minimiser js:
npm -g install uglify-js
Et exécutez cette commande avec votre chemin/fichier.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 faire:
uglifyjs --compress --mangle -- input.js
Essayez ces deux plugins pour Grunt
https://www.npmjs.org/package/grunt-contrib-concat
https://www.npmjs.org/package/grunt-contrib-uglify
Vous pouvez installer tout ce dont vous avez besoin comme ceci:
npm install grunt
npm install grunt-cli
npm install grunt-contrib-concat
npm install grunt-contrib-uglify
Créez ensuite votre fichier grunt, comme ceci:
Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
concat: {
options: {
process: function(src, path){
return '\n/* Source: ' + path + ' */\n' + src;
}
},
src: [
'../src/**/*.js'
],
dest: '../bin/app-debug.js'
},
uglify: {
src: '../bin/app-debug.js',
dest: '../bin/app.js'
},
watch: {
options: {
atBegin: true,
event: ['all']
},
src: {
files: '../src/**/*.js',
tasks: ['concat']
},
dist: {
files: '../bin/app-debug.js',
tasks: ['uglify']
},
}
}
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['watch']);
}
Enfin, tapez grunt dans le terminal et Grunt commencera à regarder vos fichiers JavaScript pour les modifications et les concaténera et les uglifiera automatiquement (chaque fois que vous enregistrerez une modification de vos fichiers js dans ../src/
Si vous aimez l'approche Rails 3.1 pipeline de ressources, vous devriez essayer ma bibliothèque connect-assets .
Peut-être pas exactement ce que vous cherchez mais Enderjs pourrait fonctionner.
Je recommanderais certainement le mode simple du compilateur de fermeture.
Si vous avez déjà uglify-js, votre code utilise certaines des dernières fonctionnalités ES6 (ECMAScript 2015) et il vous a simplement renvoyé des erreurs d'analyse lors de la première exécution, puis installez uglify - e s:
npm install uglify-es -g
Ou:
npm install mishoo/UglifyJS2#harmony
L'explication est dans paquet uglify-js-es6 :
Il s'agit d'un package temporaire contenant la dernière version de la branche 'harmonie' d'uglifyjs ( glifyJS2 ).
Vous pouvez toujours l'exécuter normalement avec la commande uglifyjs. Un exemple de compression et de mangle:
uglifyjs -c -m -o js/es6stuff.js -- js/es6stuff/*.js
Ce qui produira un seul fichier avec tous les fichiers JS d'un dossier. Le double tiret (--) empêche simplement les fichiers d'entrée d'être utilisés comme arguments d'option.