Gulp implémente le partage d'exemples de modularisation de pages Web statiques-js tutoriel-php.cn

Gulp implémente le partage d'exemples de modularisation de pages Web statiques

小云云

Libérer： 2018-01-11 09:35:07

original

1924 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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

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 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!