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

目录


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

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

一、初始准备

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

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

gulp-file-include静态页面预构建
未安装可以前往nodejs官网(https://nodejs.org/zh-cn/)下载安装一下

 npm install --global gulp-cli          //全局安装gulp
gulp -v  		//查看gulp版本

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

二、创建项目文件夹

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

 npm init                 //初始化项目

  使用npm init后,需要注意这个package name不能为gulp(如下图),然后一直按回车就行。
gulp-file-include静态页面预构建
操作完成之后,gulptest文件夹下面就会多一个package.json文件
gulp-file-include静态页面预构建
先安装下一些开发环境下所需的依赖

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

gulp-file-include静态页面预构建gulp-file-include静态页面预构建
安装后会多这两个东西,也就是安装到开发环境下的依赖包存放的位置
gulp-file-include静态页面预构建

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

gulp-file-include静态页面预构建
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文件夹下,写自己的一些代码,这里就随便添加了一些,
gulp-file-include静态页面预构建
index.html里面用到了gulp-file-include的方法
index.html
gulp-file-include静态页面预构建
include/header.html
gulp-file-include静态页面预构建
include/footer.html
gulp-file-include静态页面预构建
最后在命令行输入gulp,就执行编译了

  gulp      

gulp-file-include静态页面预构建
浏览器打开的页面
gulp-file-include静态页面预构建
dist文件夹下的内容和编译后index.html里的代码,在dist文件夹里面生成的就是一个常规的html代码文件
gulp-file-include静态页面预构建

四、最后

  最后的目录结构
gulp-file-include静态页面预构建
  删除distnode_modulespackage-lock.json这三个内容,就得到一个基础模板,下次要使用时,直接复制一份,然后使用npm install安装所需依赖即可
gulp-file-include静态页面预构建
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)

上一篇:C++之初阶模板


下一篇:560. 和为 K 的子数组 (前缀和)