Comment obtenir minifiés sortie avec browserify?

Juste commencé à utiliser browserify, mais je ne trouve pas de documentation pour savoir comment l'obtenir de se répandre hors minifiés de sortie.

Je suis à la recherche de quelque chose comme:

$> browserify main.js > bundle.js --minified

Minification est en dehors du champ d'application de browserify, vous devrez exécuter à la sortie par l'intermédiaire d'un minifier.

InformationsquelleAutor Fdr | 2013-03-23

118

Tuyau à travers uglifyjs:
```
 browserify main.js | uglifyjs > bundle.js
```
Vous pouvez l'installer à l'aide de npm comme suit:
```
 npm install -g uglify-js
```
- Comment faire cela avec grunt browserify/watchify tâche?
- Si vous utilisez grunt je vous recommande de le faire en deux étapes. D'abord compiler avec browserify, puis rapetisser. L'avantage est que vous pouvez avoir une version de développement avec la source de cartes et une production de construire que des bandes de tout.
- Oui c'est ce que j'ai fait. Sa fait 3 étapes, vous devez nettoyer le fichier intermédiaire. Merci!
- et si je veux un sourcemap pour mon uglified fichiers - que le code avant "browserification"?
- Utiliser le sourceMapIn option sur grunt-uglify (github.com/gruntjs/grunt-contrib-uglify#sourcemapin) pour passer à la source de la carte que browserify créé. Être au courant de ce bug, si: github.com/gruntjs/grunt-contrib-uglify/issues/195
- Je fait un plugin pour ça.
- Est-il possible de concaténer et rapetisser plusieurs browserify scripts?
- Voir Keith Cirkel blog: blog.keithcirkel.co.royaume-uni/comment-utiliser-npm-as-a-construire-outil Il montre comment joindre plusieurs étapes ensemble.
- Malheureusement avec votre solution, j'ai toujours ce message d'erreur: Unexpected token punc «,», prévu punc «:» Erreur lors de la nouvelle JS_Parse_Error (/usr/local/lib/node_modules/uglify-js/lib/parse.js:196:18).
InformationsquelleAutor topek
21

De 3.38.x vous pouvez utiliser mon minifyify plugin pour rapetisser votre bundle et encore utilisable sourcemaps. Ce n'est pas possible avec les autres solutions, le meilleur que vous pouvez faire est de carte de retour à la non compressé bundle. Minifyify cartes de tous les le chemin du retour à votre séparer les fichiers source (oui, même à coffeescript!)
- Il dit qu'il prend en charge jusqu'à browserify la version 9. Browserify est actuellement à 11.0.1. Il sera en charge cette?
- uglifyify semble fonctionner pour moi comme un bon remplacement
InformationsquelleAutor Ben
15

Ou de l'utilisation uglifyify transformer les qui "vous donne l'avantage d'appliquer Uglify du "squeeze" de transformation avant d'être traitées par Browserify, ce qui signifie que vous pouvez supprimer morts chemins de code conditionnel exige."
- Elle nécessite encore l'utilisation de la uglify tuyau en haut à répondre. Ils le disent si, dans le début de leur doc.
InformationsquelleAutor srgstm
8

Après avoir passé quelques heures à enquêter sur la façon de construire de nouveaux processus de build, j'ai pensé que d'autres peuvent bénéficier de ce que j'ai fait. Je vais répondre sur cette vieille question, tel qu'il apparaît élevé dans Google.

Mon cas d'utilisation est un peu plus complexe que l'OP a demandé. J'ai trois scénarios: le développement, les essais, la production. Comme la plupart des professionnels, les développeurs auront les mêmes exigences, je pense que c'est excusable pour aller au-delà de la portée de la question d'origine.

Dans le développement, j'utilise watchify de construire un non compressé bundle avec la carte source à chaque fois qu'un fichier JavaScript changements. Je ne veux pas le uglify étape, car je veux la construction à la finition avant, j'ai alt-onglets à l'explorateur de cliquer sur "actualiser" et ce n'est pas de tout avantage au cours du développement de toute façon. Pour réaliser cela, j'utilise:
```
watchify app/index.js  --debug -o app/bundle.js -v
```
Pour les tests, je veux exactement le même code que la production (p. ex. uglified) mais je veux aussi une source de la carte. J'ai réaliser avec:
```
browserify app/index.js  -d | uglifyjs -cm -o app/bundle.js      --source-map "content=inline,filename='bundle.js',url='bundle.js.map'"
```
Pour la production, le code est compressé avec uglify et il n'y a pas de carte source.
```
browserify app/index.js  | uglifyjs -cm > app/bundle.js
```
Notes:

J'ai utilisé ces instructions sur Windows 7, MacOS High Sierra et Ubuntu 16.04.

J'ai arrêté de l'utiliser minifyify parce qu'il n'est plus maintenu.

Il y a peut-être mieux que ce que je partage. J'ai lu qu'il est apparemment possible d'obtenir un niveau de compression supérieur par uglifying tous les fichiers source avant de les combiner avec browserify. Si vous avez plus de temps à passer sur ce que j'ai, vous pouvez étudier.

Si vous n'avez pas watchify, uglify-js ou browserify déjà installé, installez-les avec mnp ainsi:
```
npm install -g browserify
npm install -g watchify
npm install -g uglify-js
```
Si vous avez de vieilles versions installées, je vous recommande de mise à niveau. En particulier uglify-js comme ils ont fait d'une modification de rupture d'arguments de ligne de commande qui invalide beaucoup d'informations qui vient dans Google.

InformationsquelleAutor Gary Ott
3

Pas besoin d'utiliser des plugins plus à rapetisser tout en préservant une source de la carte:
```
browserify main.js --debug | uglifyjs --in-source-map inline --source-map-inline > bundle.js
```
InformationsquelleAutor user

Vous devez vous connecter pour publier un commentaire.