web-dev-qa-db-fra.com

Comment configurer Grunt pour remplacer les dépendances de Bower par ses versions minifiées

Je suis nouveau sur Yeoman/Grunt/Bower. J'ai un bower.json fichier qui définit les dépendances suivantes:

bower.json

{
    "dependencies": {
        "angular": "~1.0.7",
        "jquery": "~1.8.0",
        "bootstrap": "~2.3.2",
        "angular-grid": "~2.0.5"
    }
}

Dans mon fichier html, j'utilise les versions non minifiées de ces bibliothèques, que j'ai installées via la commande bower install

index.html

<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>

Comment puis-je configurer grunt, il va donc:

  1. Copiez uniquement les versions minifiées de ces fichiers js dans le répertoire de construction
  2. Remplacez le HTML pour qu'il change par exemple jquery.js à jquery.min.js
  3. Lorsque vous n'utilisez pas de CDN - est-il recommandé de combiner tous les fichiers avec le script d'application personnalisé?

Quelle est la bonne approche ici? Dois-je définir chaque bibliothèque dans une tâche de copie de grognement? Comme:

Gruntfile.js:

copy: {
  dist: {
    files: [{
      src: [
        'components/jquery/jquery.min.js',
        'components/bootstrap/docs/assets/js/bootstrap.min.js',
        'components/angular/angular.min.js',
        'components/angular-grid/build/ng-grid.min.js'
      ]
    }]
  }
}
angularjsgruntjsyeomanbower
30
fischermatte

Les versions réduites des bibliothèques JavaScript que vous utilisez ne seront finalement pas livrées avec les modules Bower. La réduction et la concaténation n'est pas quelque chose dont le gestionnaire de packages est responsable, mais votre pipeline de génération.

Avec Yeoman , la méthode recommandée est d'utiliser grunt-usemin , qui se chargera de toutes les étapes nécessaires. Vous pouvez voir un exemple de cela lors de l'échafaudage d'une nouvelle application avec yo webapp et jetons un œil à la Gruntfile.js et index.html.

Dans votre cas, vous devrez ajouter un commentaire autour de votre script:

<!-- build:js scripts/main.js -->
<script src="components/jquery/jquery.js"></script>
<script src="components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-grid/build/ng-grid.js"></script>
<!-- endbuild -->

Et assurez-vous d'avoir les tâches usemin correspondantes dans votre pipeline Grunt:

useminPrepare: {
    options: {
        dest: 'dist'
    },
    html: 'app/index.html'
},
usemin: {
    options: {
        dirs: ['dist']
    },
    html: ['dist/{,*/}*.html'],
    css: ['dist/styles/{,*/}*.css']
},
35
passy

pas besoin de changer le html, essayez grunt-contrib-uglify

uglify: {
  libs: {
    files: [
      {
        expand: true,
        cwd: 'components',
        src: '**/*.js',
        dest: 'build/components'
      }
    ]
  }
}

et si le fichier est demandé plus d'une page, il sera mis en cache par le navigateur, il sera chargé plus rapidement que le fichier plus grand combiné.

2
yao tony

Une autre option si vous souhaitez utiliser du javascript minifié et avoir également la version du package dans le chemin d'inclusion consiste à utiliser grunt-version-copy-bower-components . Ce plugin grunt gère la copie du composant bower dans un répertoire de destination, inclut la version du composant dans le chemin du composant et modifie les fichiers de référence (html et css) pour utiliser le chemin minifié versionné.

L'inclusion de la version dans le chemin des composants peut être utile si le site est hébergé avec un cache (derrière un CDN). Il vous permet de spécifier de longs temps de cache pour les composants de bower. Lorsque vous passez à une nouvelle version du composant Bower, l'URL sera nouvelle et le cache récupérera la nouvelle au lieu de servir un composant périmé.

Un exemple de configuration:

versionCopyBowerComponents: {
  options: {
    exclude: ['underscore'],
    dest: 'dist/libs',
    filesReferencingComponents: {
      files: ['dist/test.html', 'dist/test.css'],
      useComponentMin: true
    }
  }
}

Le plugin déterminera les composants de bower que votre projet utilise et les installera automatiquement sur le chemin spécifié dans dest. Les fichiers répertoriés dans filesReferencingComponents-> sont des fichiers qui incluent/source le composant bower. Si vous spécifiez useComponentMin, il choisira la version réduite du composant.

0
HypeXR

Ce serait une mauvaise pratique de vous minimiser une bibliothèque qui existe déjà dans une version minifiée. Heureusement, au moins pour angularJS, le package bower inclut le fichier angular.min.js.map. Avec cette carte source, je pense que cela n'a aucun sens d'inclure à tout moment le fichier non minifié dans la source. Il vous suffit d'inclure le fichier min, de le laisser en dehors du minifieur Grunt et de laisser le navigateur mapper vers la source non minifiée.

0
Romain F.