De combiner et de les rapetisser tous bower bibliothèques avec gruntjs

Est-il un moyen de combiner et de les rapetisser tous bower bibliothèques installées dans 1 fichier automatiquement?

J'ai d'abord essayé la plupart approche de base: combiner tous les .js les fichiers de tous les sous-répertoires:

uglify: {
    options: {compress: true},
    my_target: { files: {
        'vendor.js': ['bower_components/**/*.js'],
}   }   }

Mais c'est évidemment une mauvaise approche. Il également ne pas travailler à cause de trop nombreuses erreurs.

J'ai supprimé manuellement tous les fichiers et gardé seulement 1 (principale) de fichier de chaque bibliothèque a, et cela a fonctionné.

Est-il un moyen de faire tout cela automatiquement?

Aussi, est-il conseillé de le faire? (c'est à dire combiner tous les fournisseurs de bibliothèques dans 1 fichier)

OriginalL'auteur laggingreflex | 2014-08-15

  1. 12

    Je recommande la combinaison de 2 belles grunt bibliothèques, Wiredep et Usemin:

    Wiredep: Charge de toutes les dépendances de la charmille identifiés dans la charmille.json à l'intérieur de votre automatiquement le code html

    Usemin: Détecter toutes les crs à l'intérieur de deux commentaires tags et tout ce que la source sont minifiés et concaténés dans dist dossier, ci-dessous, un petit exemple d'un grognement fichiers à l'aide de ce colis, est basé sur le générateur de formes angulaires yeoman ce n'est qu'un bref de ce grognement

    Grunt

        wiredep: {
        options: {
            cwd: 'appFolder'
        },
        app: {
            src: ['htmlCollections'],
            ignorePath:  /\.\.\//
        }
    },

    useminPrepare: {
        html: 'htmlCollections',
        options: {
            dest: 'distributionFolder',
            flow: {
                html: {
                    steps: {
                        js: ['concat', 'uglifyjs'],
                        css: ['cssmin']
                    },
                    post: {}
                }
            }
        }
    },

  usemin: {
        html: ['distributionFolder+HtmlFiles'],
        css: ['distributionFolder+cssFiles'],
        js: ['distributionFolder+javascriptFiles']
  }

    HTML

    <!doctype html>
<html lang="en" ng-app="MobileDev" id="ng-app">
<head>
    <!-- build:css(app) styles/vendor.css -->
    <!-- bower:css -->
            //This gonna be generated for the grunt by dependencies in bower
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css(.tmp) styles/main.css -->
        //All the script inside this gonna be concatened and minified in 
        //the dist folder by the name of main.css
        <link type="text/css"  href="styles/app.css"/>
    <!-- endbuild -->
</head>

<body>
    <!-- build:js(app) scripts/vendor.js -->
    <!-- bower:js -->
        //This gonna be generated for the grunt by dependencies in bower
        //And in distribution all bower components added gonna be minified by usemin in
        //vendor.js
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
        //All the script inside this gonna be concatened and minified in the dist 
        //folder by the name of scripts.js
        <script type="text/javascript" src="scripts/numero1"></script>
        <script type="text/javascript" src="scripts/numero2"></script>
    <!-- endbuild -->

</body>

    OriginalL'auteur Jesús Quintana

  2. 5

    Juste besoin wiredep

    uglify: {
    options: { compress: true },
    my_target: { 
        files: { 'public/vendor.js': require('wiredep')().js
}   }   },
cssmin: {
    minify: {
        files: { 'public/vendor.css': require('wiredep')().css
}   }   },

    OriginalL'auteur laggingreflex