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

安装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,把要用到的headerfooterinclude进来。

layout.html

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

    <p> 这是 layout 的内容 p>

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

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


你可能感兴趣的:(技巧)