Maison >interface Web >js tutoriel >Comment implémenter la modularisation de pages Web statiques à l'aide de Gulp ?

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

亚连original: 2018-06-12 18:09:382114parcourir

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

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>

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;]);
})

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.

Articles Liés

Voir plus