Êtes-vous censé lien vers bower_components dans la production?

Je suis relativement nouveau à l'aide de Bower et je ne peux pas dire si vous êtes censé lien vers bower_components dans la production. Dois-je utiliser un grognement tâche de lier ou de copier les fichiers dont j'ai besoin de bower_components dans un répertoire distinct?

Je vous pose cette question parce que je n'ai jamais vu un site web qui a un répertoire appelé "bower_components," j'ai donc un peu peur. Tous les débutants guides viens de faire le lien entre les bower_components/...", comme l'angle de tutoriel.

InformationsquelleAutor Kevin Evans | 2014-04-29
  1. 25

    êtes-vous à l'aide de Yeoman?

    Selon votre Gruntfile.js vous devriez avoir plusieurs tâches,
    l'un de ces est "la charmille-installer": cette tâche sera lire vous index.html,
    trouver le commentaire suivant bloc

    <!-- bower:js -->
<!-- endbower -->

    et injecter à l'intérieur de tous vos dépendances spécifiées dans votre bower.json.
    Cela signifie que la tâche d'écriture pour tous les <script src"/bower_components/.."> blocs.

    Vous n'avez jamais remarqué un site web avec "bower_components" références parce que votre /app dir est votre "développement" de l'environnement, de votre projet source.
    À partir de la source vous permettra de créer de l'application de production de course de la "construction" de la tâche: cette tâche est composée de différentes sous-tâches qui les rend différents des emplois, de l'une de ces la concaténation de tous les scripts ajoutés par bower_install tâche dans un seul fichier js.

    Puis il y a une autre tâche qui va rapetisser ce fichier, un autre qui va exécuter les tests, un autre qui va créer un "dist" répertoire où votre site de production réside et ainsi de suite...

    Si vous utilisez Yeoman vous avez l'ensemble de ces tâches est déjà configuré dans la Gruntfile.js, il suffit de l'ouvrir et essayer de comprendre ce que chaque tâche.

    À première vue, il peut être assez difficile à comprendre, par exemple, la tâche de génération se réfère à 14 ou 15 sous-tâches, je vous suggère d'enregistrer des tâches personnalisées permettant d'exécuter une seule tâche et de voir ce qui se passe.

    Acclamations

    • Génial réponse - merci Sergio. J'ai aussi remarqué dans le yeoman github fil de commentaires que /bower_components est en effet inclus dans /dist , mais je ne suis pas sûr de comprendre la logique si tout est finalement minimisé comme vous le décrivez. Pensées?
    • effectivement, vous avez raison. J'ai couru grunt "construction" d'une tâche sur un projet de mine et a découvert que la compilation index.html est à l'aide de la charmille des composants à la place de la construit vendor.js fichier. Vous pouvez modifier votre html compilé à la main en supprimant le bower_component des blocs de script et ajouter le vendor.js mais je suis à la recherche d'une solution automatisée.
    • Que sur les images et les polices? La référence n'existe qu'à l'intérieur de CSS ressources, comment les gérez-vous? Je veux dire, sans copier tous les bower_components à dist.
    • Je ne sais pas si c'est conseillé ou pas, mais oui, je copie toutes les ressources nécessaires à l'aide d'une tâche de copie.
    • Yoeman est un outil formidable, mais si vous avez déjà commencé avec un modèle en dehors de Yoeman comment est-ce censé être utile? Oui, il y a un grognement tâche qui vous permettra d'ajouter automatiquement vos dépendances à vos fichiers HTML, mais c'est différent que de n'avoir que les fichiers requis nécessaires pour une application économiser de l'espace. Pouvez-vous nous donner un exemple d'un fichier de compilation et de ce que cela pourrait ressembler?
    InformationsquelleAutor Sergio Rinaudo
  2. 12

    Vous pouvez donner à votre bower répertoire d'installation d'un meilleur nom, par la création d'un .bowerrc fichier (à côté de votre bower.json fichier) et le réglage de la directory propriété à autre chose. Par exemple, j'ai la suite dans ma .bowerrc:

    {
  "directory": "public/vendor"
}

    Puis il y a aussi étroitement liés à la question de savoir si ou non vous devriez vérifier dans le contenu de ce répertoire à la source de contrôle. Pour une discussion plus approfondie de cette question, voir ici.

    Et enfin, comme d'autres l'ont déjà mentionné, il est recommandé que vous concaténer et de rapetisser votre front-end, dépendances.

    • C'est une excellente idée, cependant, Bower peut parfois apporter plus de fichiers inutiles et juste manger de l'espace sur le serveur.
    InformationsquelleAutor Sergey K
  3. 5

    Je ne vois pas de problème avec un lien vers elle directement, mais en général, vous voulez concaténer tous vos scripts dans un fichier et de uglify-il si la taille du fichier est réduite pour la production.

    Le grognement uglify tâche peut gérer à la fois de ces choses pour vous tout à fait facilement. Vous avez juste à fournir un tableau de fichiers à joindre.

    //Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});
    • C'est une excellente idée avec les fichiers JavaScript, mais si le CSS est le référencement des images, alors les choses peuvent obtenir un peu désordonné avec lien endroits.
    InformationsquelleAutor dezman
  4. 3

    Il est assez fréquent de commencer par juste en utilisant bower_components. Vous pouvez les voir dans le angulaires-démarrage de semences du projet références de script. Une fois que vous obtenez pour le déploiement d'une application de production et du temps de chargement et les performances deviennent critiques, vous devriez regarder la conversion à la solution de fusionner et de rapetisser les dépendances.

    InformationsquelleAutor Scott Willeke