Minify certains fichiers, de combiner tous, avec Grunt.JS

Je suis le déplacement d'une équipe de dev loin de Crépitant, un add-in pour visual studio, pour la combinaison & minification des fichiers CSS/JS, plus de grognement dans le cadre d'un flux de travail automatisation des processus.

En crépitant, la config ressemble à quelque chose comme ceci (tronqué pour des raisons de concision):

<FileGroup Name="scripts.combined.js"  Minify="both">
    <File Path="forms.js" Minify="false" />
    <File Path="cookie_monster.js" Minify="true" />
    ...
</FileGroup>

Donc dans ce abrégée cas, j'ai 2 fichiers. On doit être minimisé, l'autre n'a pas. (selon les gens ici, minifying forms.js les sauts de fonctionnalité, et je n'ai pas été alloué de temps pour corriger ça pour l'instant).

Dans grunt, j'ai besoin d'exécuter un minification tâche sur certains de fichiers dans cette liste, mais pas sur d'autres. J'ai donc besoin d'exécuter un concat tâche sur tous les fichiers (compacte ou autre).

Étant donné que uglifyJS besoin d'un dest ensemble à la sortie de la minifiés fichier, puis-je simplement mettre cela à quelque chose comme temp.min.js, et dans mon concat tâche, utilisez ce fichier pour créer mon scripts.combined.js fichier [composé à la fois de minifiés & unminified fichiers], et d'utiliser grunt nettoyer pour retirer les temp.min.js fichier?

Est-il une meilleure façon de le faire?

[MODIFIER POUR AJOUTER]
Je suis également préoccupé par le potentiel de charge de l'ordre des conflits. L'outil est configuré comme "combiner l'ensemble de ces fichiers", avec un drapeau sur chaque fichier indiquant si oui ou non il doit être minimisé. Je ne suis pas sûr de la façon de reproduire ce flux de travail w/grunt

Il suffit de cocher ci-dessous le tutoriel et cela vous donnera une image claire. pointerunits.com/2014/08/...

OriginalL'auteur Scott Silvi | 2013-10-29

  1. 14

    Si vous avez le temps de migrer à partir de Crépitant à Grunt, vous avez sûrement avoir le temps d'essayer un couple de différents minifiers et vérifier pour celui qui n'est pas casser votre forms.js module.

    Ce que vous faites est très bien, mais je voudrais plaider en faveur de l'utilisation de uglify pour tout. Dans mon cas, je copie tous les scripts d'un dossier de création, et puis il suffit d'exécuter uglify sur eux.

    J'ai configuré uglify comme ça.

    uglify: {
    js: {
        files: { 'bin/public/js/all.js': 'bin/public/js/**/*.js' },
        options: {
            preserveComments: false
        }
    }
}

    Vous pouvez découvrez le repo GitHub, il pourrait vous donner quelques idées.

    Vous pouvez déterminer l'ordre simplement en étant explicite à ce sujet lorsque vous définissez les fichiers dans votre uglify cible.

    uglify: {
  js: {
    files: { 
      'bin/public/js/all.js': [
        'bin/public/js/IMPORTANT/**/*.js',
        'bin/public/js/something.js',
        'bin/public/js/else.js',
        'bin/public/js/unimportant/*.js',

        //you can even exclude stuff
        'bin/public/js/do-not-minify/**/*.js'
      ]
    }
  }
}

    Vous pouvez vérifier Grunt fichier d'expansion modèles pour plus d'info.

    Mise à jour

    L'ordre dans lequel vos fichiers sont décrits dans le modèle d'expansion est l'ordre dans lequel ils vont être traitées, cela est vrai pour presque toutes les tâches que vous prenez une boule dans Grognement. Si vous ne pouvez pas uglify tout, je devine que vous aurez toujours à concaténer. Dans ce cas, je vous conseille d'avoir un flux comme le pseudo-code, vous aller:

    uglify: {
  js: {
    files: { 'bin/public/js/all.js': [
      //using whichever order of importance you need
      'src/public/js/**/*.js',
      '!the-ones-you-dont-minify'
    ]
  }
},
concat: {
  //using whichever order of importance you need
  'src/the-ones-you-dont-minify/**/*.js',
  '!the-ones-you-minified'
}

grunt.registerTask('build', ['clean', 'uglify:js', 'concat']);
    commentaire sur votre premier paragraphe: Le problème n'est pas avec mon temps, c'est avec l'ensemble des tests de régression qui aurait lieu si j'ai de l'impact de la forms.js (c'est un sujet TRÈS délicat ici ... forms.js est un fragile, gonflé d'une base de code pour certaines fonctionnalités critiques. Refactoring est très élevé sur mon liste de priorités) ...
    .. et à l'arrière pour le problème à portée de main. Ce que vous venez de décrire uglify TOUS mes fichiers, n'est-ce pas? J'ai besoin de rapetisser certains d'entre eux, pas tous. Et pour mon montage, ajouter l problème est que l'ordre de chargement des fichiers est important - certains minifiés, d'autres non ... donc j'cludge mon grognement tâches à rapetisser ceux que j'ai besoin de rapetisser pour les fichiers temporaires, alors concat dans le bon ordre (à la fois compacte & unminifed), puis grunt propre?
    voir ma réponse mis à jour
    ok ouais, c'est sur ce processus que j'ai prévu. Espérait il y avait une manière plus propre. Je suppose que je peux jeter ces derniers dans leurs propres fichiers si cela commence à devenir difficile à maintenir.
    eh bien, oui, le moyen le plus propre serait de ne pas avoir à exclure des fichiers de minification. l'utilisation d'un framework comme Angulaire vous permet de démêler l'arbre des dépendances, trop

    OriginalL'auteur bevacqua

  2. 6
    1. Installer node.js

    2. Ajouter gruntfile.js et l'emballage.json à la racine du projet
      (modifier les chemins d'accès des fichiers que vous voulez dans gruntfile.js(peut-être besoin pour ouvrir dans textpad comme peut ne pas apparaître dans visual studio)

    3. Ouvrir Node.js terminal (invite de commande) et aller au répertoire du projet

    4. type:

      ngp installer grunt-ts --save [appuyez sur enter]

      ngp installer grunt-cli -g [appuyez sur enter]

      grunt [appuyez sur enter]

    (si il manque des modules de l'installer en tapant:
    npm install [nom du module]
    )

    par exemple ngp installer grunt-contrib-uglify
    ngp installer grunt-contrib-montre

    Puis tapez grunt

    devrait minifier les fichiers sans erreurs, tant que les fichiers javascript sont manquantes erros(courir à travers jsHint.com)

    c'est mon gruntfile.js.....

    module.exports = function (grunt) {

    //1. All configuration goes here 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            css: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css'
            },
            js: {
                src: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js'
            }
        },
        cssmin: {
            css: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/production.css',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/min/production.min.css'
            }
        },
        uglify: {
            js: {
                src: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/production.js',
                dest: 'archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/min/production.min.js'
            }
        },
        watch: {
            css: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/css/*.css'],
                tasks: ['concat:css', 'cssmin:css']
            },
            js: {
                files: ['archive/trunk_archived_16_06/Grouptree.UI.Web/UI.core/assets/js/*.js'],
                tasks: ['concat:js', 'uglify:js']
            }
        }
    });

    //2. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    //3. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);

};

    C'EST MON colis.fichier json

    {
  "name": "Grunt",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-uglify": "^0.5.0",
    "grunt-contrib-watch": "*"
  },
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-ts": "^1.11.13"
  }
}

    OriginalL'auteur Dally S