Cinq tâches de grognement que vous voudrez manquer!

rationaliser votre flux de travail frontal avec cinq tâches de grognement essentielles

Grunt, un coureur de tâche populaire, simplifie considérablement les tâches de développement du frontend répétitif. Cet article met en évidence cinq puissants plugins de grognement qui augmentent l'efficacité et la qualité du code. Alors que d'autres coureurs de tâches comme Gulp existent (voir notre "An Introduction to Gulp.js" pour plus de détails), le vaste écosystème de plugin de Grunt reste un atout précieux. Nouveau à grogner? Consultez "Automatiser les tâches récurrentes avec grogne" ou le guide officiel du grognement. </p>

Prise des clés: </p>

• grunt-autoprefixer: automatise le préfixe des fournisseurs dans CSS, éliminant le processus manuel fastidieux d'ajout de préfixes pour la compatibilité du navigateur.
• grunt-uncss: supprime les CSS inutilisés, réduisant la taille du fichier et améliorant les temps de chargement de la page. Remarque ses limites: il ne gère pas les classes ajoutées dynamiquement via JavaScript ou l'interaction utilisateur.
• grunt-concurrent: exécute plusieurs tâches de grognement simultanément, réduisant considérablement le temps de construction global, en particulier bénéfique sur les processeurs multi-cœurs.
• grunt-wiredep (anciennement grunt-bower-install): automatise l'inclusion de composants de bower dans votre HTML, ce qui permet d'économiser du temps et des efforts lors de la gestion des dépendances.
• grunt-modernizr: génère une version modernizr personnalisée, y compris uniquement les fonctionnalités utilisées dans votre projet, minimisant la taille de la bibliothèque.

1. grunt-autoprefixer: conquérir les préfixes du fournisseur

L'écriture CSS implique souvent de jongler avec les propriétés expérimentales et les préfixes des fournisseurs. grunt-autoprefixer, basé sur la bibliothèque Autoprefixer, simplifie cela. Il analyse votre CSS et ajoute les préfixes nécessaires en fonction de la base de données peut-je utiliser. L'option browsers vous permet de spécifier les navigateurs et les versions cibles, en veillant à ce que seuls les préfixes requis soient inclus. </p>

Un exemple de configuration: </p>

grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});

Cette configuration traite main.css, en sortant la version préfixée à main-prefixed.css, ciblant les deux dernières versions des principaux navigateurs, plus IE 8, 9 et Opera 12.1. </p>

2. grunt-uncss: Slim dans votre CSS

grunt-uncss, alimenté par uncss, supprime le CSS inutilisé de votre projet. Ceci est inestimable lors de l'utilisation de cadres CSS, car il réduit considérablement la taille du fichier CSS final, conduisant à des téléchargements plus rapides. </p>

Limitations: grunt-uncss Impossible de détecter les classes CSS ajoutées dynamiquement via JavaScript ou l'interaction utilisateur. Utilisez l'option ignore (acceptant des noms de classe littéraux ou des modèles regex) pour y remédier partiellement. Les sélecteurs complexes peuvent également provoquer des erreurs; Isolez-les dans des feuilles de style séparées. </p>

</p>

3. grunt-wiredep: gestion des dépendances sans effort

Bower (un gestionnaire de dépendance JavaScript / CSS) nécessite une inclusion manuelle de composants dans votre HTML. grunt-wiredep automatise cela, injectant les dépendances en fonction de votre configuration. </p>

Configuration de base: </p>

grunt.initConfig({
  autoprefixer: {
    options: {
      browsers: ['last 2 versions', 'ie 8', 'ie 9', 'Opera 12.1']
    },
    dist: {
      src: 'src/css/main.css',
      dest: 'dest/css/main-prefixed.css'
    }
  }
});

Cela injecte des dépendances dans index.html. Après avoir exécuté grunt-wiredep, votre HTML comprendra des lignes comme: </p>.

grunt-modernizr 4.

: Optimiser Modernizr

grunt-modernizr Modernizr aide à détecter la prise en charge du navigateur pour les fonctionnalités modernes. </p> crée une version modernizr personnalisée, y compris uniquement les fonctionnalités que votre projet utilise, résultant en une bibliothèque plus petite et plus efficace.

</p> Exemple de configuration:

grunt.initConfig({
  wiredep: {
    app: {
      src: ['index.html']
    }
  }
});

grunt-concurrent 5.

: Traitement parallèle pour la vitesse

grunt-concurrent Pour les projets avec de nombreuses tâches, </p> les exécute simultanément, accélérant considérablement le processus de construction, en particulier sur les machines puissantes.

</p> Exemple:

grunt.initConfig({
  modernizr: {
    dist: {
      devFile: 'path/to/modernizr.js',
      outputFile: 'path/to/distribution-folder/custom-modernizr.js',
      files: {
        src: ['path/to/scripts/**/*.js', 'path/to/styles/**/*.css']
      }
    }
  }
});

copy Cela s'exécute autoprefixer et test simultanément sous la tâche concat, et uncss et build simultanément sous la tâche </p>.

</p> Cette sélection fournit une base solide pour améliorer votre flux de travail basé sur les grognements. Explorez le vaste écosystème de plugin grogn pour découvrir encore plus d'outils pour rationaliser votre processus de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!