Laisser les tâches de grognement du traitement de l'organisation Marie Kondo

Les scripts WebPack et NPM dominent le développement de JavaScript moderne, la manipulation des tâches et le regroupement. Cependant, de nombreux projets comptent toujours sur le grognement. Bien qu'il ne s'agisse pas du plus récent enfant du bloc, Grunt reste un cheval de bataille fiable. Cet article explore des stratégies pour rationaliser et améliorer vos projets de grognement existants.

Chargement de tâche de suralimentation avec jit-grunt

Chargement manuellement chaque tâche grogn à l'aide de grunt.loadNpmTasks est fastidieux. load-grunt-tasks offrent l'automatisation, mais jit-grunt offre des performances encore plus rapides, en particulier bénéfiques pour les projets plus grands.

Comparaison des performances:

Sans jit-grunt :

 <code>loading tasks 5.7s ▇▇▇▇▇▇▇▇ 84% assemble:compile 1.1s ▇▇ 16% Total 6.8s</code>

Avec jit-grunt :

 <code>loading tasks 111ms ▇ 8% loading assemble 221ms ▇▇ 16% assemble:compile 1.1s ▇▇▇▇▇▇▇▇ 77% Total 1.4s</code>

Une amélioration importante de la vitesse! jit-grunt réalise cette optimisation en chargeant uniquement des tâches au besoin.

Utilisation de jit-grunt :

1. Installer: npm install jit-grunt --save
2. Remplacez vos instructions de chargement de travail:

 module.exports = fonction (grunt) {
  // Au lieu de grunt.Loadnpmtasks appelle ...
  exiger («jit-grunt») (grognement);

  grunt.initconfig ({});
}

Rationalisation du chargement de configuration

L'étape suivante consiste à découpler votre gruntfile en fichiers de configuration plus petits et plus gérables. Au lieu d'un gruntfile.js monolithique.js, organisez vos configurations en fichiers séparés. Nous allons utiliser load-grunt-configs pour un chargement efficace.

Utilisation de load-grunt-configs :

 module.exports = fonction (grunt) {
  exiger («jit-grunt») (grognement);

  const Configs = require ('Load-Grunt-Configs') (grunt, {
    config: {src: 'tasks / *. js'}
  });

  grunt.initconfig (configs);
  grunt.registerTask ('par défaut', ['cssmin']);
}

Alternativement, Grunt offre un chargement de tâche natif: grunt.loadTasks('tasks') . Cependant, cela exécute immédiatement les fichiers, pas idéal pour la configuration. Pour en tirer parti, vous devez configurer des tâches dans les fichiers externes eux-mêmes à l'aide de grunt.config .

Exemple utilisant grunt.loadTasks :

 // tâches / mytask.js
module.exports = fonction (grunt) {
  grunt.config ('mytask', {
    Option: «valeur»
  });
};

// gruntfile.js
module.exports = fonction (grunt) {
  exiger («jit-grunt») (grognement);
  grunt.initconfig ({});
  grunt.loadtasks («tâches»);
  grunt.registerTask ('par défaut', ['mytask']);
};

Organisation de configuration avancée: regroupement par fonctionnalité

L'organisation des tâches par nom de fichier n'est pas toujours intuitive. Une approche plus efficace consiste à des configurations de groupe par fonctionnalité ou fonctionnalité.

Au lieu de nombreux fichiers de tâche individuels, créez des fichiers représentant des fonctionnalités (par exemple, styles.js , scripts.js , images.js ). Utilisez grunt.config.merge pour combiner des configurations pour les tâches connexes, en évitant l'écrasement.

Exemple: Configuration des styles:

 // tâches / styles.js
module.exports = fonction (grunt) {
  grunt.config ('sass', {/ * ... * /});
  grunt.config ('postcss', {/ * ... * /});
  grunt.config.merge ({
    montre: {
      Styles: {
        Fichiers: ['Source / Styles / *. Scss'],
        Tâches: [«sass», «postcss»]
      }
    }
  });
};

Cette approche améliore la lisibilité et la maintenabilité, offrant un aperçu plus clair de la structure de votre projet.

Conclusion

Bien qu'il ne s'agisse pas de la technologie la plus récente, Grunt reste une option viable avec une organisation appropriée. En tirant parti jit-grunt , load-grunt-configs (ou grunt.loadTasks avec une définition minutieuse de la tâche) et une structure de configuration basée sur des fonctionnalités, vous pouvez améliorer considérablement l'efficacité et la maintenabilité de vos projets de grognement. N'oubliez pas de consulter la documentation GRUNG pour plus de détails et de possibilités.

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!