gulp-file-include静态页面预构建

  前端写html静态页面时，有很多页面的部分代码都是一样的，在没有用到框架的情况下，没有办法从分离提取出来，然后在需要的页面上引入使用，所以就用前端构建工具来处理，百度一下找到了 gulp的一个插件 gulp-file-include。

npm安装gulp，基本上安装的是最新版本或者新的稳定版本，新版gulp语法有变化，所以踩了一些坑，记录一下，总结经验

一、初始准备

我这里使用的是npm，npm是nodejs的功能，先检查一下是否安装nodejs

node -v			//查看nodejs对应版本号，可以知道是否安装成功
npm -v			//查看npm对应的版本号

未安装可以前往nodejs官网(https://nodejs.org/zh-cn/)下载安装一下

 npm install --global gulp-cli          //全局安装gulp

gulp -v  		//查看gulp版本

gulp入门指南(https://www.gulpjs.com.cn/docs/getting-started/quick-start/)，官方文档里有详细的操作，也可以按文档里面进行。

二、创建项目文件夹

  创建一个gulptest的空文件夹,然后命令行进入到这个文件夹里面。

 npm init                 //初始化项目

  使用npm init后，需要注意这个package name不能为gulp(如下图)，然后一直按回车就行。

操作完成之后，gulptest文件夹下面就会多一个package.json文件

先安装下一些开发环境下所需的依赖

  一、gulp安装到当前开发环境

• npm install --save-dev gulp       //gulp安装到当前开发环境  
  

  二、安装gulp-file-include
     gulp-file-include插件和一些语法(https://www.npmjs.com/package/gulp-file-include)

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

  三、安装browser-sync,监听页面变化，实时更新浏览器
     Browsersync中文网-快速入门(http://www.browsersync.cn/#install)

• npm install --save-dev browser-sync       
  

  四、安装sass和gulp-sass,这里使用的是scss(平时都用的是scss)
     gulp-sass插件(https://www.npmjs.com/package/gulp-sass)

• npm install sass gulp-sass --save-dev       
  

安装后会多这两个东西，也就是安装到开发环境下的依赖包存放的位置

三、创建src文件夹和gulpfile.js文件

gulpfile.js,下面是我自己写的配置，就直接贴代码了，

const { src, dest, series, watch } = require('gulp');
const fileinclude = require('gulp-file-include');
// var sass = require('gulp-sass');
const sass = require('gulp-sass')(require('sass'))
const browserSync = require('browser-sync');



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

// 编译sass
function sassx() {
    // 找到src下的scss和css的两个文件夹,然后将.scss和.css编译输出
    return src(['src/scss/*.scss', 'src/scss/*.css', 'src/css/*.scss', 'src/css/*.css'])
        // SCSS 插件将 scss、css 文件编译成 CSS 文件
        .pipe(sass())
        // 输出文件
        .pipe(dest('dist/css'));
}
// 提取js、images、font等文件
// 参数name为文件夹名称
function files(name) {
    return src('src/' + name + '/**')
        .pipe(dest('dist/' + name + ''));
}
function js() {
    //src下的js文件夹里的文件直接输出
    return src('src/js/**')
        .pipe(dest('dist/js'));
}

function images() {
    //src下的images文件夹和image文件夹里的文件直接输出到dist/images
    return src(['src/image/**', 'src/images/**'])
        .pipe(dest('dist/images'));
}
function fonts() {
    //src下的font文件夹和fonts文件夹里的文件直接输出到dist/fonts
    return src(['src/font/**', 'src/fonts/**'])
        .pipe(dest('dist/fonts'));
}



// 配置服务器并监听页面变化
function serve() {
    browserSync.init({
        server: {
            baseDir: 'dist'
        },
        port: 8000
    });
    // 监听 html和scss文件变化，调用方法，并更新浏览器
    return watch(['src/**/*.html', 'src/scss/*.scss'], series(html, sassx, js, images, fonts)).on('change', browserSync.reload);
}

//导出要执行的方法(命令行直接使用gulp就执行)
exports.default = series(
    html,
    sassx,
    js,
    images,
    fonts,
    serve
);

src文件夹下，写自己的一些代码，这里就随便添加了一些，

index.html里面用到了gulp-file-include的方法
index.html

include/header.html

include/footer.html

最后在命令行输入gulp，就执行编译了

  gulp      

浏览器打开的页面

dist文件夹下的内容和编译后index.html里的代码，在dist文件夹里面生成的就是一个常规的html代码文件

四、最后

  最后的目录结构

  删除dist、node_modules、package-lock.json这三个内容，就得到一个基础模板，下次要使用时，直接复制一份，然后使用npm install安装所需依赖即可

package.json

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.5",
    "gulp": "^4.0.2",
    "gulp-file-include": "^2.3.0",
    "gulp-sass": "^5.0.0",
    "sass": "^1.41.0"
  }
}

gulp中文网(https://www.gulpjs.com.cn/docs/getting-started/quick-start/)
gulp-file-include插件和一些语法(https://www.npmjs.com/package/gulp-file-include)