Gulp如何实现静态网页模块化

发布时间：2021-06-17 11:10:33 作者：小新
来源：亿速云阅读：147

这篇文章给大家分享的是有关Gulp如何实现静态网页模块化的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

gulp简介

gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。

安装gulp

在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gulp：

$ npm install gulp

举例的开发环境配置：

　　Windows：在iis里搭建项目，方便在浏览器中预览；使用webstorm编辑器（习惯了，感觉比记事本还是要好用很多，还可以忽略某些文件夹）。

　　MacOs：在apache里搭建项目，方便在浏览器中预览；使用webstorm编辑器（习惯了，感觉比sublime用得更liu一点，还可以忽略某些文件夹）。

必备插件：

　　gulp-file-include

技能描述：

　　将需要模块化的html代码放到一个独立的html文件中。如：head.html

　　然后在需要使用的地方使用：@@include('./head.html')

　　文件路径自定义~~

　　最后配置好gulp并执行

使用Demo：

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')
<div class="news"> 
</div>
@@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']);
})

技能介绍：

执行 gulp prew 会将文件复制到prew目录下，并生成对应的完整html文件。（注：此处将pages文件夹下的文件直接放到了prew根目录下，并非prew/pages。根据需要自改配置）

执行 gulp watch后gulp会建立一个监听进程，在开发的时候每次修改文件后，gulp会自动执行prew，这样就不用每次都手动执行gulp prew然后再去刷浏览器。（这是一招实用技能）

最后：

这套技能的要点不在于如何使用gulp，而是怎么去划分模块。每个模块除了有html代码以外，其实还可以有js、css代码或者引入js、css文件的代码，这样才能更模块一点。

感谢各位的阅读！关于“Gulp如何实现静态网页模块化”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

Gulp如何实现静态网页模块化

相关阅读