Comment implémenter la modularisation de pages Web statiques à l'aide de Gulp ?-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment implémenter la modularisation de pages Web statiques à l'aide de Gulp ?

亚连

Jun 12, 2018 pm 06:09 PM

gulp 模块化

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 d'un projet. 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.

Avant-propos

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). Ensuite, le problème a été résolu. Puis, après l'avoir regardé plusieurs fois, le chef de produit a soudainement déclaré qu'une certaine partie de la partie supérieure avait besoin d'être repensée. . . Soudain, je me sens tellement gêné~~ (Mon cœur est plein de chevaux au galop~), et ensuite ? Alors attendez avec impatience le prochain galop des chevaux ! ! !

Bien qu'il existe de nombreuses solutions à des problèmes similaires, lorsqu'il s'agit de 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, vous devez d'abord confirmer que node.js a été correctement installé, puis installer gulp dans le projet répertoire racine :

$ npm install gulp

Copier après la connexion

Exemple de configuration de l'environnement de développement :

Windows : créez le projet dans iis pour un aperçu facile dans le navigateur ; webstorm Editor (une fois habitué, il semble beaucoup plus facile à utiliser que le Bloc-notes, et vous pouvez également ignorer 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 requis :

gulp-file-include

Description de la compétence :

Mettez le code HTML qui doit être modularisé dans un fichier HTML séparé. Par exemple : head.html

Ensuite, utilisez-le si nécessaire : @@include('./head.html')

Personnalisez le chemin du fichier ~~

Enfin, configurez avaler et exécuter

Utiliser 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(&#39;../Layout/head.html&#39;)
<p class="news"> 
</p>
@@include(&#39;../Layout/foot.html&#39;)
</body>

Copier après la connexion

gulp :

var gulp = require(&#39;gulp&#39;),
 fileinclude = require(&#39;gulp-file-include&#39;);
gulp.task(&#39;prew&#39;, function () {
 gulp.src([&#39;*.html&#39;,&#39;pages/*.html&#39;, &#39;!node_modules/**/*.html&#39;])
  .pipe(fileinclude({
   prefix: &#39;@@&#39;,
   basepath: &#39;@file&#39;
  }))
  .pipe(gulp.dest(&#39;prew&#39;));
 gulp.src([&#39;**/**.js&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/**.css&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
 gulp.src([&#39;**/*.jpg&#39;,
  &#39;**/*.jpge&#39;,
  &#39;**/*.png&#39;,
  &#39;**/*.gif&#39;,
  &#39;**/*.bmp&#39;, &#39;!prew/**/*&#39;, &#39;!node_modules/**/*&#39;]).pipe(gulp.dest(&#39;prew/&#39;));
});
gulp.task(&#39;watch&#39;,function () {
 gulp.watch([&#39;pages/*.html&#39;,&#39;css/*.css&#39;,&#39;img/**/*&#39;,&#39;!prew/**/*.html&#39;,&#39;!prew/**/*.css&#39;,&#39;!prew/img/**/*&#39;], [&#39;prew&#39;]);
})

Copier après la connexion

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 prew, pas prew/pages. Modifiez la configuration si nécessaire)

Exécuter après gulp watch, gulp établira un processus d'écoute. Chaque fois qu'un fichier est modifié pendant le développement, gulp exécutera automatiquement prew, de sorte qu'il n'est pas nécessaire d'exécuter manuellement gulp prew à chaque fois puis d'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 divisez-le. 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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

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.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

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)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7487

Tutoriel CakePHP

1377

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

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.

Comment résoudre l'erreur de complexité du code dans le code Python ? Jun 24, 2023 pm 05:43 PM

Python est un langage de programmation simple, facile à apprendre et efficace, mais lorsque nous écrivons du code Python, nous pouvons rencontrer des problèmes de complexité excessive du code. Si ces problèmes ne sont pas résolus, cela rendra le code difficile à maintenir, sujet aux erreurs et réduira la lisibilité et l’évolutivité du code. Ainsi, dans cet article, nous verrons comment résoudre l’erreur de complexité du code dans le code Python. Comprendre la complexité du code La complexité du code est une mesure de la nature du code qui est difficile à comprendre et à maintenir. En Python, certains indicateurs peuvent être utilisés

Comment résoudre l'erreur de mauvaise maintenabilité du code Python ? Jun 25, 2023 am 11:58 AM

Python, en tant que langage de programmation de haut niveau, est largement utilisé dans le développement de logiciels. Bien que Python présente de nombreux avantages, un problème auquel de nombreux programmeurs Python sont souvent confrontés est que le code est moins maintenable. La maintenabilité du code Python inclut la lisibilité, l'évolutivité et la réutilisabilité du code. Dans cet article, nous nous concentrerons sur la façon de résoudre le problème de la mauvaise maintenabilité du code Python. 1. Lisibilité du code La lisibilité du code fait référence à la lisibilité du code, qui est au cœur de la maintenabilité du code.

Guide d'implémentation du développement modulaire dans les projets Vue à grande échelle Jun 09, 2023 pm 04:07 PM

Dans le développement Web moderne, Vue, en tant que framework frontal flexible, facile à utiliser et puissant, est largement utilisé dans le développement de divers sites Web et applications. Lors du développement de projets à grande échelle, comment simplifier la complexité du code et rendre le projet plus facile à maintenir est un problème auquel chaque développeur doit être confronté. Le développement modulaire peut nous aider à mieux organiser le code, à améliorer l'efficacité du développement et la lisibilité du code. Ci-dessous, je partagerai quelques expériences et lignes directrices pour la mise en œuvre du développement modulaire dans les projets Vue à grande échelle : 1. Division claire du travail dans un projet à grande échelle

Qu'est-ce que la modularité en vue Dec 23, 2022 pm 06:06 PM

Dans Vue, la modularisation consiste à encapsuler une seule fonction dans un module (fichier). Les modules sont isolés les uns des autres, mais les membres internes peuvent être exposés via des interfaces spécifiques, et ils peuvent également s'appuyer sur d'autres modules (pour faciliter la réutilisation du code, ainsi Améliorer l'efficacité du développement et faciliter la maintenance ultérieure). Les avantages du développement modulaire : 1. Organisation claire et maintenance facile ; 2. Toutes les données ne seront pas demandées en même temps et l'expérience utilisateur est bonne 3. Les modules sont isolés les uns des autres, mais les membres internes peuvent être exposés via des modules spécifiques. interfaces, ou Dépend d'autres modules.

Comment utiliser le langage Go pour la pratique de la modularisation du code Aug 03, 2023 am 10:31 AM

Comment utiliser le langage Go pour la pratique de la modularisation du code Introduction : Dans le développement de logiciels, la modularisation du code est une méthodologie de développement courante. En divisant le code en modules réutilisables, la maintenabilité, la testabilité et la testabilité du code peuvent être améliorées. Cet article expliquera comment utiliser le langage Go pour pratiquer la modularisation du code et fournira des exemples de code correspondants. 1. Les avantages de la modularisation améliorent la maintenabilité du code : la modularisation divise le code en modules fonctionnels indépendants, et chaque module est responsable de tâches spécifiques, rendant le code plus clair et plus facile à modifier. Le code peut être amélioré

Résumé de l'expérience de développement Python : pratiques pour améliorer la maintenabilité et l'évolutivité du code Nov 22, 2023 pm 12:22 PM

Résumé de l'expérience de développement Python : pratiques pour améliorer la maintenabilité et l'évolutivité du code. Dans le processus de développement logiciel, nous rencontrons souvent des changements de demande, des itérations de fonctions, etc., de sorte que la maintenabilité et l'évolutivité du code sont devenues une partie importante du processus de développement. Des questions qui doivent être prises au sérieux. En particulier dans le développement Python, la manière d'améliorer la maintenabilité et l'évolutivité du code est devenue une préoccupation commune parmi les développeurs. Cet article résumera quelques pratiques pour améliorer la maintenabilité et l'évolutivité du code Python, dans l'espoir d'apporter certains avantages aux développeurs Python.

Chaon lance les mini-hôtes industriels de la série TGS-1000 : prend en charge les modules d'extension d'interface empilables et est équipé de processeurs MTL Aug 14, 2024 pm 01:33 PM

Selon les informations de ce site Web du 14 août, Chaoen Vecow a lancé le 22 juillet, heure de Pékin, le mini-hôte industriel de la série TGS-1000 équipé du processeur Intel Core Ultra de première génération. La particularité de cette série de produits est qu'elle prend en charge l'empilement vertical pour étendre les ports E/S supplémentaires. La série TGS-1000 est divisée en deux modèles : TGS-1000 et TGS-1500. La différence est que le bas du TGS-1500 contient un module prenant en charge les cartes graphiques MXM. Il peut choisir Intel Ruixuan A370M ou jusqu'à RTX5000Ada mobile. version des cartes professionnelles Nvidia. ▲ Les mini-hôtes de la série TGS-1500TGS-1000 sont disponibles avec des processeurs Intel Core Ultra7165H ou Ultra5135H, équipés de double D

See all articles