Gulp est un outil de construction de code basé sur des flux dans le processus de développement front-end. Il s'agit d'un exécuteur de tâches automatique basé sur Nodejs. Il peut non seulement optimiser les ressources du site Web, mais également effectuer automatiquement les tests, l'inspection, la fusion, la compression et le formatage. du code frontal, actualisez automatiquement le navigateur, générez des fichiers de déploiement et surveillez les fichiers pour répéter les étapes spécifiées après les modifications. En l'utilisant, nous pouvons non seulement écrire du code avec bonheur, mais également améliorer considérablement notre efficacité au travail.
L'environnement d'exploitation de ce tutoriel : système Windows 7, nodejs version 16, ordinateur DELL G3.
1. Qu'est-ce que la gorgée ?
Gulp est un outil de construction de code basé sur les flux dans le processus de développement front-end. Il peut non seulement optimiser les ressources du site Web, mais également effectuer automatiquement de nombreuses tâches répétitives pendant le processus de développement en utilisant le bon. outils ; utilisez-le, non seulement peut écrire du code avec bonheur, mais également améliorer considérablement notre efficacité de travail.
Gulp est un exécuteur de tâches automatique basé sur Nodejs. Il peut effectuer automatiquement les tests, l'inspection, la fusion, la compression, le formatage du code frontal, l'actualisation automatique du navigateur, la génération de fichiers de déploiement et surveiller les fichiers pour répéter les étapes spécifiées après les modifications.
2. Qu’est-ce que le flux ?
Flux, flux, comparez les fichiers aux rivières, puis une rivière s'écoule et une autre rivière entre. C'est ainsi que gulp fonctionne sur les flux de fichiers. La sortie d'une opération est utilisée comme entrée d'une autre opération, comme celle-ci.
Cette opération est quelque peu similaire à l'opération de chaîne de jQuery : $("").html("gg").css({}).parent().find("a").......; , gulp supprime les fichiers intermédiaires et écrit uniquement la sortie finale sur le disque, ce qui accélère l'ensemble du processus.
3. Installation de gulp
Gulp est basé sur l'environnement du nœud. Assurez-vous d'abord que le nœud est installé.
Une fois le nœud installé, npm [(node package manager) nodejs package manager, utilisé pour la gestion des plug-ins de nœud (y compris l'installation, la désinstallation, la gestion des dépendances, etc.)] est également automatiquement installé.
Étant donné que le plug-in d'installation npm est téléchargé à partir d'un serveur étranger, il est fortement affecté par le réseau et peut provoquer des anomalies, il est donc préférable d'utiliser cnpm fourni par Taobao pour installer le plug-in de nœud.
Installez cnpm : http://npm.taobao.org/
Après l'installation, vérifiez la version de cnpm pour vous assurer que l'installation a réussi
Ensuite, vous pouvez installer gulp. Commencez par installer gulp globalement : cnpm install -g gulp.
Accédez ensuite au bureau demo/bbs2.0/src, entrez dans l'environnement bash et utilisez cnpm install gulp pour installer gulp dans le répertoire actuel.
Après une installation réussie, le dossier node_modules apparaîtra, puis créera package.json via cnpm init (fichier de configuration du projet de nœud : le package de plug-in de nœud étant relativement volumineux, la gestion des versions n'est pas incluse. Écrivez les informations de configuration dans le package .json et ajoutez-le à la gestion des versions et d'autres développeurs peuvent le télécharger en conséquence)
Entrez jusqu'au bout et le fichier package.json sera généré dans le dossier actuel. À ce stade, si vous essayez d'utiliser gulp pour démarrer gulp, vous constaterez qu'une erreur sera signalée.
D'après le message d'erreur, nous devons créer un fichier gulpfile.js
Alors lance gulp
Vous constaterez que le « ok » dont nous avons besoin est imprimé, et gulp peut fonctionner normalement ici.
4. Utilisation de plug-ins couramment utilisés dans gulp
1) Compresser les fichiers fusionnés
Créer un nouveau fichier index.html
Créez deux nouveaux fichiers js dans le répertoire js
Modifiez le fichier gulpfile. comme suit:
Puisque nous utilisons deux plug-ins, gulp-uglify et gulp-concat, nous devons d'abord installer ces deux plug-ins dans le répertoire courant.
Lors de l'installation du plug-in, utilisez --save-dev pour l'ajouter à package.json. Nous pouvons vérifier si le fichier est écrit avec succès dans package.json.
OK, oui, continuez à installer gulp-concat dans le répertoire. Une fois l'installation terminée, nous cliquons sur node_modules et nous constaterons que le plug-in est installé avec succès. Commençons maintenant gulp.
OK, si aucune erreur n'est signalée, cela signifie que l'opération a réussi. Ensuite, vérifiez le fichier et constatez qu'il y a tous les fichiers.min.js sous src que nous souhaitons compresser et fusionner.
2) avaler-sass
Pour installer Sass, vous devez d'abord installer Ruby et accéder au tutoriel Sass
Cliquez sur Installer et vous recevrez des instructions sur la façon d'installer Sass et Ruby.
Une fois Ruby installé avec succès, vérifiez la version Ruby
Après le succès, installez Sass via Gem
Si vous devez utiliser Compass (la relation entre Compass et Sass est équivalente à jQuery et js), installez Compass en passant.
Ce qu'il faut noter ici, c'est qu'il y a un problème avec la source de la gem, ce qui entraînera l'échec de l'installation : une erreur sera signalée : SSL_connect return=1 errno=0 state=SSLv3 read server certificate B : ce rtificate verify failed . Vous pouvez changer la source de la gemme en https://ruby.taobao.org/. Si cela ne fonctionne toujours pas, remplacez-la par http://gems.ruby-china.org/. Si cela ne fonctionne pas, c'est le cas. un problème de caractère.
Utilisez ensuite Compass Create pour créer un projet Sass
Après une création réussie, trois fichiers, sass, feuilles de style et config.rb, seront automatiquement générés.
Ouvrez n'importe quel fichier dans Sass et modifiez-le
Puis éditez le fichier gulp
Installez ensuite gulp-sass et gulp-compass dans le répertoire actuel
Après avoir démarré gulp, vérifiez les fichiers correspondants dans les feuilles de style
Ok, Sass a été compilé avec succès en CSS
3) Compresser le CSS via gulp-minify-css
Après avoir commencé à avaler
4) Utilisez gulp-load-plugins pour nous aider à charger les plugins
Le plug-in gulp-load-plugins peut charger automatiquement les plug-ins gulp dans le fichier package.json pour vous.
Nous avons seulement besoin de require('gulp-load-plugins')(); dans le fichier gulp.
Utilisez simplement le plugin.** ci-dessous (plusieurs mots sont nommés en casse chameau)
5) gulp-imagemin et imagemin-pngquant compressent les images
6) gulp-livereload pour actualiser automatiquement les pages Web
Installez d'abord gulp-livereload : cnpm install gulp gulp-livereload, ici les colonnes sont compressées en HTML et sass compilées et compressées.
Puis dans le fichier gulp
Pour réussir à ne pas actualiser
1. Vous avez également besoin du support du plug-in chrome livereload, alors passez par-dessus le mur.
2. Ouvrez la page Web dans l'environnement du serveur