web-dev-qa-db-fra.com

Angular et Grunt

Je suis un débutant dans Grunt et j'essaie de convertir une application Angular (basée sur angular-seed ) pour l'utiliser pour la concat/minification CSS/JS. J'ai un fichier index.html qui définit les fichiers CSS et JS:

<!-- build:css css/myjmh.css -->
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="lib/font-awesome/font-awesome.min.css"/>
<link rel="stylesheet" href="lib/toaster/toaster.css"/>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<link rel="stylesheet" href="css/responsive.css"/>
<!-- endbuild -->

...

<!-- build:js js/myjmh.min.js -->
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="lib/angular/angular-cookies.min.js"></script>
<script src="lib/angular/angular-resource.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/fastclick.min.js"></script>
<script src="lib/toaster/toaster.js"></script>
<script src="lib/webshim/modernizr.min.js"></script>
<script src="lib/webshim/polyfiller.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<!-- endbuild -->

J'essaie d'utiliser grunt-usemin et sa tâche useminPrepare pour récupérer ces valeurs dans mon code HTML.

Voici mon Gruntfile.js:

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        clean: ["dist"],

        copy: {
            main: {
                src: 'app/index.html',
                dest: 'dist/index.html'
            }
        },

        useminPrepare: {
            html: 'app/index.html'
        },

        usemin: {
            html: ['dist/index.html']
        },

        ngmin: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: '.tmp/concat/js',
                        src: '*.js',
                        dest: '.tmp/concat/js'
                    }
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-ngmin');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', [
        'copy', 'useminPrepare', 'concat', 'ngmin', 'uglify', 'cssmin', 'usemin'
    ]);
};

Avec tous ces paramètres, un répertoire "dist" est créé avec tous les artefacts et tout semble être généré/concaténé et minifié correctement. Cependant, lorsque je charge la nouvelle page dans mon navigateur, le message d'erreur suivant s'affiche:

Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.2.3/$injector/unpr?p0=aProvider%20%3C-%20a

Il semble que Grunt fait quelque chose qui ne fonctionne pas bien avec Angular. Des idées sur ce que cela pourrait être?

angularjsgruntjs
13
Matt Raible

J'ai pu résoudre ce problème en désactivant les mutilations:

    uglify: {
        options: {
            report: 'min',
            mangle: false
        }
    }

Comme vous le remarquerez probablement dans mon fichier Gruntfile.js, ngmin est déjà utilisé et cela ne semble pas aider.

Réponse trouvée ici: https://stackoverflow.com/a/17239358/65681

16
Matt Raible

Vous devez faire l'une des deux choses suivantes:

  1. Rendez tout votre code angulaire convivial. Voir: http://docs.angularjs.org/guide/di#dependency-injection_dependency-annotation

  2. Utilisez un outil tel que grunt-ngannotate

8
Jeff Hubbard

Si vous rencontrez les mêmes problèmes que moi avec les déclarations, vous pouvez également utiliser ng-annotate pour y parvenir. Voici un lien vers github: https://github.com/mzgol/grunt-ng-annotate

Ma configuration de travail est:

ngAnnotate: {
    options: {
        singleQuotes: true,
        regexp: '^(ng\n?[\\ ]+(.*)|(module.*))$'
    },
    prod: {
        files: [{
            expand: true,
            src: 'dist/**/*.js'
        }]
    }
}

Utilisez-le avec précaution car il modifiera les fichiers existants. Mon hypothèse est que les fichiers du dossier 'dist' doivent être générés par Grunt et peuvent être supprimés à tout moment.

2
Valera Tumash

Mangle false ne devrait pas être la solution. En fait, le code n’est pas adapté à la minification, mais les problèmes que j’avais rencontrés n’étaient pas décrits explicitement ici , ils étaient donc:

1) "Assurez-vous de définir chaque module avec la syntaxe angular.module (nom, [oblige]] une fois sur l'ensemble du projet. Récupérez-le pour une utilisation ultérieure avec angular.module (nom)" - je l'ai mal utilisé à de nombreux endroits. et cela a fonctionné avec mangle: faux, se brisant lors du réglage de mangle: vrai

2) J'ai utilisé bootstrap modal windows en spécifiant le contrôleur d'instance pas sous forme de chaîne, j'ai trouvé la solution ici

0
dzezzz

Comme d’autres l’ont dit, il semble que vous ayez un problème de minification. Je vois que vous utilisez ngmin. Mais ngmin risque de ne pas fonctionner lorsqu'un fichier contenant des motifs mixtes lui est jeté. Je veux dire, assurez-vous que tous les fichiers que vous transmettez à ngmin n'ont pas déjà de modèle de minification safe.

0
M.K. Safi