【gulp】gulp-file-include 合并 html 文件

时间 2019-11-06

标签 gulp file include 合并 html 文件栏目 JavaScript 繁體版

原文原文链接

gulp-file-include 是 gulp 插件，它提供了一个 include 方法让咱们能够像后端模板那样把公共部分的页面导入进来。html

安装依赖包（包括了 gulp-file-include 和 del）

npm install --save-dev gulp-file-include del

项目结构目录

修改 gulpfile.js，结合 browser-sync 一块儿使用

'use strict';
var gulp = require('gulp'),
    del = require('del'),
    fileinclude = require('gulp-file-include'),
    browserSync = require('browser-sync').create();

// 清除 dist 文件夹
gulp.task('clean', function () {
    return del.sync('./app/dist');
});

// html 整合
gulp.task('html', function () {
    return gulp.src('./app/src/template/*.html')
    .pipe(fileinclude())
    .pipe(gulp.dest('./app/dist'));
});

// 配置服务器
gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './app/dist'
        },
        port: 8000
    });
    // 监听 html
    gulp.watch('./app/src/template/**/*.html', ['html']).on('change', browserSync.reload);
});

gulp.task('default', ['clean', 'html', 'serve']);

html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    @@include('inc/header.html', {"title": "home"})
    <p></p>
</body>
</html>

header.html:

<h1>@@title</h1>

打包：

gulp

浏览器会自动打开页面 http://localhost:8000，显示 home。在 dist 文件夹中查看 index.html：git

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>home</h1>
    <p></p>
</body>
</html>

固然，gulp-file-include 还有不少强大的功能，具体内容能够参考官网，这里我就很少说了。github