将html分为头尾后打包整合，Gulp实现头尾等公共页面的复用

最新推荐文章于 2023-11-21 20:12:59 发布

qq_35089721

最新推荐文章于 2023-11-21 20:12:59 发布

阅读量2.3k

点赞数

分类专栏：技巧文章标签： f

技巧专栏收录该内容

31 篇文章 0 订阅

订阅专栏

安装gulp的前提是你已经有了nodejs的运行环境

1，新建项目：

mkdir gulp-file && cd gulp-file

2，初始化一下npm init

3，全局安装gulp：npm install -g gulp

4，在每个要使用gulp的项目中都单独安装一次：

npm install gulp --save-dev

5，文件夹介绍

|-node_modules
|-page // 生产环境的 html 存放文件夹
    |-include // 公共部分的 html 存放文件夹 //header.html;footer.html
    |-*.html    //layout.html
|-dist // 编辑后的 html 文件   //生成layout.html
gulpfile.js

6，

在新建的gulpfile.js，配置好gulp-file-include：

var gulp = require('gulp');
var fileinclude  = require('gulp-file-include');

gulp.task('fileinclude', function() {
    // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
    gulp.src(['page/**/*.html','!page/include/**.html'])
        .pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
        }))
    .pipe(gulp.dest('dist'));
});

接着新建两个html文件，分别是头部和底部：

header.html

<h1>这是 header 的内容</h1>

footer.html

<h1>这是 footer 的内容</h1>

最后在新建一个html，把要用到的header和footer给include进来。

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    @@include('include/header.html')

    <p> 这是 layout 的内容 </p>

    @@include('include/footer.html')
</body>
</html>

最后回到命令行工具里，执行gulp fileinclude：

qq_35089721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
将html分为头尾后打包整合，Gulp实现头尾等公共页面的复用

安装gulp的前提是你已经有了nodejs的运行环境1，新建项目：mkdir gulp-file &amp;&amp; cd gulp-file2，初始化一下npm init3，全局安装gulp：npm install -g gulp4，在每个要使用gulp的项目中都单独安装一次：npm install gulp --save-dev5，文件夹介绍|-node_modules|-page // ...
复制链接

扫一扫

专栏目录