interface Web
js tutoriel
Gulp implémente le partage d'exemples de modularisation de pages Web statiques
Gulp implémente le partage d'exemples de modularisation de pages Web statiques
Dans le processus de développement de pages purement statiques, vous rencontrerez inévitablement des problèmes embarrassants. Par exemple : l'ensemble du code comporte 50 pages, dont 40 pages ont les mêmes modules supérieur et inférieur. Ensuite, nous avons copié les deux mêmes morceaux de code 40 fois (la méthode la plus inconfortable). Comme nous le savons tous, Gulp.js est un outil de construction automatisé que les développeurs peuvent utiliser pour automatiser les tâches courantes pendant le développement de projets. L'article suivant vous présente principalement les informations pertinentes sur l'implémentation par Gulp de la modularisation des pages Web statiques. L'article le présente en détail à travers un exemple de code. Les amis dans le besoin peuvent s'y référer.
Bien qu'il existe de nombreuses solutions à des problèmes similaires, lorsqu'il s'agit d'un front-end pur sans utiliser divers frameworks, une solution plus fiable que l'iframe consiste à utiliser un outil de construction comme gulp. Bien qu'il puisse y avoir un léger défaut dans l'expérience (chaque fois que vous souhaitez prévisualiser un fichier après l'avoir modifié, vous devez d'abord l'avaler), ce n'est pas insupportable. Après tout, ce que nous voulons, c'est résoudre 40 pages en modifiant simplement un certain module public.
Introduction à gulp
gulp est un outil de construction automatisé. Dans les projets développés, vous pouvez utiliser gulp pour créer automatiquement le projet, ce qui améliore considérablement l'efficacité du travail.
Installer gulp
Avant d'installer gulp, vérifiez d'abord que node.js a été correctement installé, puis installez gulp dans le répertoire racine du projet :
$ npm install gulp
Exemple de configuration de l'environnement de développement :
Windows : Construisez le projet dans IIS pour faciliter la prévisualisation dans le navigateur ; utilisez l'éditeur webstorm (si vous vous y habituez, il semble beaucoup plus facile à utiliser que le Bloc-notes, et vous pouvez ignorez également certains dossiers).
MacOs : Construisez le projet sous Apache pour faciliter la prévisualisation dans le navigateur ; utilisez l'éditeur webstorm (habituez-vous-y, cela semble plus utile que sublime, et vous pouvez ignorer certains dossiers).
Plug-in essentiel :
gulp-file-include
Description de la compétence :
Mettez le code HTML qui doit être modularisé dans un code HTML séparé fichier au milieu. Par exemple : head.html
Ensuite, utilisez-le là où vous en avez besoin : @@include('./head.html')
Personnalisez le chemin du fichier~~
Enfin, configurez gulp et exécutez
Utilisez la démo :
html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title></title>
<link rel="stylesheet" href="css/comm.css?v=1.13" rel="external nofollow" >
<link rel="stylesheet" href="css/template.css" rel="external nofollow" >
<link rel="stylesheet" href="css/news.css" rel="external nofollow" >
</head>
<body>
@@include('../Layout/head.html')
<p class="news">
</p>
@@include('../Layout/foot.html')
</body>gulp :
var gulp = require('gulp'),
fileinclude = require('gulp-file-include');
gulp.task('prew', function () {
gulp.src(['*.html','pages/*.html', '!node_modules/**/*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('prew'));
gulp.src(['**/**.js', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/**.css', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
gulp.src(['**/*.jpg',
'**/*.jpge',
'**/*.png',
'**/*.gif',
'**/*.bmp', '!prew/**/*', '!node_modules/**/*']).pipe(gulp.dest('prew/'));
});
gulp.task('watch',function () {
gulp.watch(['pages/*.html','css/*.css','img/**/*','!prew/**/*.html','!prew/**/*.css','!prew/img/**/*'], ['prew']);
})Introduction à la compétence :
L'exécution de gulp prew copiera le fichier dans le répertoire prew et générera le fichier html complet correspondant. (Remarque : ici, les fichiers du dossier pages sont placés directement dans le répertoire racine de prew, et non dans prew/pages. Modifiez la configuration si nécessaire)
Après avoir exécuté gulp watch, gulp établira un processus d'écoute pendant. développement Chaque fois que vous modifiez un fichier, gulp exécutera automatiquement prew, vous n'aurez donc pas à exécuter manuellement gulp prew à chaque fois, puis à actualiser le navigateur. (Il s'agit d'une compétence pratique)
Enfin :
Le but de cet ensemble de compétences n'est pas de savoir comment utiliser gulp, mais comment diviser les modules. En plus du code HTML, chaque module peut en fait également contenir du code js, css ou du code introduisant des fichiers js et css, afin qu'il puisse être plus modulaire.
Recommandations associées :
Que se passe-t-il lorsqu'un projet sur github est publié sous forme de page Web statique ?
Partagez un exemple de code d'effets spéciaux qui simule la pagination de pages Web statiques
Résumé de la méthode PHP de génération de pages Web HTML purement statiques à partir du site entier
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment envoyer des pages Web sur le bureau comme raccourci dans le navigateur Edge ?
Mar 14, 2024 pm 05:22 PM
Comment envoyer des pages Web sur le bureau sous forme de raccourci dans le navigateur Edge ? Beaucoup de nos utilisateurs souhaitent afficher les pages Web fréquemment utilisées sur le bureau sous forme de raccourcis pour faciliter l'ouverture directe des pages d'accès, mais ils ne savent pas comment procéder. En réponse à ce problème, l'éditeur de ce numéro partagera le. solution avec la majorité des utilisateurs, jetons un coup d’œil au contenu partagé dans le didacticiel du logiciel d’aujourd’hui. La méthode de raccourci pour envoyer des pages Web au bureau dans le navigateur Edge : 1. Ouvrez le logiciel et cliquez sur le bouton "..." sur la page. 2. Sélectionnez « Installer ce site en tant qu'application » dans « Application » dans l'option du menu déroulant. 3. Enfin, cliquez dessus dans la fenêtre pop-up
Que faire si la page Web n'est pas accessible
Sep 06, 2023 am 09:36 AM
Les solutions aux pages Web inaccessibles incluent la vérification de la connexion réseau, la suppression du cache du navigateur, la vérification de l'adresse de la page Web, la tentative d'utilisation d'autres navigateurs, la vérification de l'état du serveur, la vérification de la résolution du nom de domaine, la vérification du pare-feu et des paramètres de sécurité et le contact avec l'administrateur du site Web. . Introduction détaillée : 1. Vérifiez la connexion réseau pour vous assurer que la connexion réseau est normale. Vous pouvez essayer d'ouvrir d'autres pages Web ou d'utiliser d'autres appareils pour y accéder afin de déterminer s'il s'agit d'un problème de connexion réseau si d'autres pages Web sont accessibles normalement. , il peut s'agir d'un problème avec la page Web ; 2. Videz le cache du navigateur. Le cache du navigateur peut empêcher le chargement de la page Web, etc.
Comment configurer l'actualisation automatique d'une page Web
Oct 26, 2023 am 10:52 AM
Pour paramétrer le rafraîchissement automatique d'une page web, vous pouvez utiliser la balise HTML "meta", la fonction JavaScript "setTimeout", la fonction "setInterval" ou encore l'en-tête HTTP "Refresh". Introduction détaillée : 1. Utilisez la balise "meta" du HTML Dans la balise "<head>" du document HTML, vous pouvez utiliser la balise "meta" pour définir l'actualisation automatique de la page Web. 2. Le "setTimeout" ; " fonction de JavaScript, etc.
Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions
Mar 15, 2024 am 10:30 AM
Certains internautes ont constaté que lorsqu'ils ouvraient la page Web du navigateur, les images de la page Web ne pouvaient pas être chargées pendant une longue période. Que s'est-il passé ? J'ai vérifié que le réseau est normal, alors quel est le problème ? L'éditeur ci-dessous vous présentera six solutions au problème de l'impossibilité de charger les images de pages Web. Les images de la page Web ne peuvent pas être chargées : 1. Problème de vitesse Internet La page Web ne peut pas afficher les images. Cela peut être dû au fait que la vitesse Internet de l'ordinateur est relativement lente et qu'il y a davantage de logiciels ouverts sur l'ordinateur et que les images auxquelles nous accédons sont relativement volumineuses. peut être dû à un délai de chargement. Par conséquent, l'image ne peut pas être affichée. Vous pouvez désactiver le logiciel qui utilise la vitesse du réseau et le vérifier dans le gestionnaire de tâches. 2. Trop de visiteurs Si la page Web ne peut pas afficher d'images, c'est peut-être parce que les pages Web que nous avons visitées ont été visitées en même temps.
Raisons possibles pour lesquelles la connexion réseau est normale mais le navigateur ne peut pas accéder à la page Web
Feb 19, 2024 pm 03:45 PM
Le navigateur ne peut pas ouvrir la page Web mais le réseau fonctionne normalement. Il existe de nombreuses raisons possibles. Lorsque ce problème survient, nous devons enquêter étape par étape pour déterminer la cause spécifique et résoudre le problème. Tout d’abord, déterminez si la page Web ne peut pas être ouverte est limitée à un navigateur spécifique ou si tous les navigateurs ne peuvent pas ouvrir la page Web. Si un seul navigateur ne parvient pas à ouvrir la page Web, vous pouvez essayer d'utiliser d'autres navigateurs, tels que Google Chrome, Firefox, etc., à des fins de test. Si d'autres navigateurs parviennent à ouvrir la page correctement, le problème vient probablement de ce navigateur spécifique, peut-être
Que faire si la page Web ne peut pas être ouverte
Feb 21, 2024 am 10:24 AM
Comment résoudre le problème des pages Web qui ne s'ouvrent pas Avec le développement rapide d'Internet, les gens comptent de plus en plus sur Internet pour obtenir des informations, communiquer et se divertir. Cependant, nous rencontrons parfois le problème que la page Web ne peut pas être ouverte, ce qui nous pose beaucoup de problèmes. Cet article vous présentera quelques méthodes courantes pour vous aider à résoudre le problème des pages Web qui ne s'ouvrent pas. Tout d’abord, nous devons déterminer pourquoi la page Web ne peut pas être ouverte. Les raisons possibles incluent des problèmes de réseau, des problèmes de serveur, des problèmes de paramètres du navigateur, etc. Voici quelques solutions : Vérifiez la connexion réseau : Tout d'abord, nous avons besoin
Comment optimiser la maintenabilité du code Java : expérience et conseils
Nov 22, 2023 pm 05:18 PM
Comment optimiser la maintenabilité du code Java : expérience et conseils Dans le processus de développement logiciel, l'écriture de code avec une bonne maintenabilité est cruciale. La maintenabilité signifie que le code peut être facilement compris, modifié et étendu sans provoquer de problèmes inattendus ni d'efforts supplémentaires. Pour les développeurs Java, comment optimiser la maintenabilité du code est une question importante. Cet article partagera quelques expériences et suggestions pour aider les développeurs Java à améliorer la maintenabilité de leur code. Suivez les règles de dénomination standardisées. Les règles de dénomination standard peuvent rendre le code plus lisible.
Mar 22, 2024 pm 03:20 PM
L'exécution de code PHP dans une page Web nécessite de s'assurer que le serveur Web prend en charge PHP et est correctement configuré. PHP peut être ouvert de trois manières : * **Environnement du serveur :** Placez le fichier PHP dans le répertoire racine du serveur et accédez-y via le navigateur. * **Environnement de développement intégré : **Placez les fichiers PHP dans le répertoire racine Web spécifié et accédez-y via le navigateur. * **Serveur distant :** Accédez aux fichiers PHP hébergés sur un serveur distant via l'adresse URL fournie par le serveur.
