html引入html include_【破案了！】页面上不同模块编写在不同文件编写然后合在一起，前端快用gulp-file-include

【破案了！】页面上不同模块如何编写在不同文件编写然后合在一起，使用gulp-file-include简单快捷转换代码！

Gulp 简介

Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。基于 Node.js 构建的，利用 Node.js 可以快速构建项目。

使用方法

• 安装命令行工具

npm install -g gulp-cli

• 安装本地库文件

npm install --save-dev gulp

• 在项目根目录下创建一个名为 gulpfile.js 的文件：

const gulp = require('gulp');

gulp.task('任务名',  () => {
  // 任务代码，若任务名称为default，则为默认任务
  //在使用命令行时可直接使用：gulp，若有自定义名称时，则使用：gulp 自定义名称
});

Gulp 插件 gulp-file-include

• 作用：

使页面上的不同模块的代码可以分开编写，最后用命令整合起来。

• 安装 Installation

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

• gulpfile.js代码

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');

gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())//插件fileinclude
        .pipe(htmlmin({collapseWhitespace: true}))//插件 htmlmin 压缩代码
        .pipe(gulp.dest('dist'));
});

• 文件夹

公共文件存放

• 具体页面引入

 @@include('./common/header.html')

• 命令行运行

gulp htmlmin

• 结果

将具体页面中的代码 “@@标记” 替换成了 header.html 的代码并保存到dist文件夹中。

---