comment minifier les fichiers js dans l'ordre par grunt-contrib-uglify?

j'ai un répertoire comme ci-dessous:

/folder/b.js

/dossier/jQuery.js

/folder/a.js

/folder/sub/c.js

je veux rapetisser tous ces fichiers js dans un fichier js :

jQuery.js -> un.js -> b.js -> c.js

Q:

1.Comment puis-je le faire via grunt-contrib-uglify?(En fait, il y a beaucoup de fichiers, il est impossible de spécifier tous les source filepaths individuellement)

2.btw, Comment puis-je obtenir des fichiers non numérisés lors du débogage et obtenir un fichier simple numérisé lors de la publication et pas besoin de changer balise de script en html (et comment écrire la balise script)?

35
demandé sur talent 2013-12-12 05:52:00

9 réponses

bonnes questions!

1) Uglify va réorganiser les fonctions dans le fichier de destination de sorte que les définitions de fonction sont en haut et l'exécution de fonction en bas mais elle semble qu'il préservera l'ordre des exécutions de fonction.

cela signifie que la fonction jQuery s'exécute pour définir ses fonctions globales sera mise en premier si vous vous assurez que jQuery est mentionné en premier dans la configuration D'Uglify dans le fichier Gruntfile.

j'utilise ceci config:

uglify: {
    options: {
        sourceMap: true
    },
    build: {
        files: {
            'public/all.min.js': ['public/js/vendor/jquery-1.10.2.min.js', 'public/js/*.js'],
        }
    }
}

2) Je ne pense pas qu'il y ait une façon précise d'accomplir ceci. Cela dépend du type de cadre web, du modèle de cadre et du type d'exigences que vous avez. J'utilise express + jade et ma principale de jade mise en page j'ai:

if process.env.NODE_ENV === 'production'
  script(src='/all.min.js')
else
  script(src='/js/vendor/jquery-1.10.2.min.js')
  script(src='/js/someScript.js')
  script(src='/js/otherScript.js')

dans mon paquet.json j'ai:

"scripts": {
  "postinstall": "grunt"
},

Cela signifie que quand je lance npm install sur le déploiement (sur Heroku) grunt est exécuté à minify/concat fichiers et lorsque l'application est démarrée avec NODE_ENV=production le côté client minimisé javascript est utilisé. Localement, je me fais servir les javascripts côté client d'origine pour un débogage facile.

Les deux inconvénients sont:

  • je dois garder les deux listes de fichiers de script de synchronisation (dans le Gruntfile et dans la mise en page.js) - je résoudre ce problème en utilisant *.js dans le Gruntfile mais ce n'est pas la suite tout le monde. Vous pouvez mettre la liste des javascripts dans le fichier Gruntfile et créer un Jade-template à partir de cela, mais cela semble exagéré pour la plupart des projets.
  • Si vous ne faites pas confiance à votre configuration Grunt vous devez essentiellement tester l'exécution de l'application en utilisant NODE_ENV=production localement pour vérifier que la minification a fonctionné comme vous l'aviez prévu.
24
répondu gabrielf 2014-03-16 10:37:38

ceci peut être fait en utilisant les tâches suivantes:

  1. https://github.com/gruntjs/grunt-contrib-concat concatène les fichiers
  2. https://github.com/gruntjs/grunt-contrib-uglify