gulp-file-include 合并 html 文件

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

安装依赖包（包括了 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：

复制代码
<!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 还有很多强大的功能，具体内容可以参考官网，这里我就不多说了。

posted @ 2017-09-24 20:55  浅陌初心  阅读(751)  评论(0)    收藏  举报