Introduction à Gulp:
Gulp est un outil de code de construction dans le développement frontal et un outil puissant pour les projets d'automatisation du bâtiment. Il peut non seulement optimiser les ressources du site Web, mais de nombreuses tâches répétitives peuvent également être effectuées automatiquement avec les bons outils pendant le processus de développement. Avec elle, nous pouvons non seulement écrire du code avec bonheur, mais aussi améliorer considérablement notre efficacité de travail.
Gulp est un coureur de tâche automatique basé sur NodeJS. Il peut compléter automatiquement les tests, la vérification, la fusion, la compression, la mise en forme, le rafraîchissement automatique du navigateur, la génération de fichiers de déploiement de fichiers tels que JavaScript / Coffee / Sass / moins / HTML / Image / CSS, et écouter pour répéter les étapes spécifiées après la modification du fichier. En termes de mise en œuvre, elle a emprunté l'idée de tuyau du système d'exploitation UNIX. La sortie du niveau précédent est devenu directement l'entrée du niveau suivant, ce qui rend l'opération très simple. Grâce à cet article, nous apprendrons à utiliser Gulp pour changer le processus de développement, rendant le développement plus rapide et plus efficace.
Gulp est très similaire au grognement, mais par rapport aux opérations IO fréquentes de grognement, les opérations de streaming de Gulp peuvent effectuer les travaux de construction plus rapidement et plus facilement.
Quand j'apprenais Gulp aujourd'hui, j'ai utilisé Gulp-Uglify pour comprimer le module JS. J'ai rencontré un problème - lorsque vous utilisez Gulp.Watch pour écouter les modifications dans les fichiers JS, j'ai rencontré des problèmes de compression répétés.
La structure du répertoire est la suivante:
Le code gulpfile.js est le suivant:
var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var rename = required ('gulp-rame'); gulp.task ('uglify', function () {gulp.src ('./ src / js / *. js'). pipe (rename ({suffix: '. min'})). pipe (uglify ()). gulp.watch ('./ src / js / *. js', ['uglify']); watcher.on ('change', fonction (événement) {console.log ('file' + event.path + 'était' + event.type + ', running tasks ...');});Après avoir exécuté la commande gulp uglify:
Le correspondant * .min.js est également généré:
Mais lorsque j'ouvre un fichier kong.js et que j'enregistre à nouveau, la situation suivante se produit:
Enregistrez-le une fois, puis compressez-le à nouveau. Il y aura de nombreux fichiers compressés JS tels que * .min.min ... JS, et seule la première valeur kong.min.js changera en fonction de kong.js. Plus tard, j'ai vérifié le document suivant et quelqu'un a écrit sur Gulp-uglify et j'ai constaté qu'il pouvait être utilisé! Pour filtrer Min.js, empêchez-le de compresser, modifiez le code:
var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var rename = require ('gulp-rame'); gulp.task ('uglify', function () {gulp.src (['./ src / js / *. js', '! ./ src / js / *. min.js']). pipe (renomment ({suffix: '. min'})). pipe (uglify ()). pipe (gulp.dest ('./ src / js'));}); gulp.watch ('./ src / js / *. js', ['uglify']); watcher.on ('change', fonction (événement) {console.log ('file' + event.path + 'était' + event.type + ', running tasks ...');});Ce qui précède est l'introduction de l'éditeur à Gulp-uglify et gulp.watch () lorsqu'il est utilisé en conjonction avec gulp.watch (). J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!