使用gulp-file-include对前端公共部分进行封装

程序员文章站 2024-03-20 20:53:04

...

当我们在画页面的时候，总有部分是和其他页面一模一样的，比如页头、页尾等，这样就导致一个地方的修改要在其他N个页面手动重复修改，这样很耗费耐心，又容易犯错，这时候gulp-file-include就显得很有作用
1.安装gulp-file-include
npm install --save-dev gulp-file-includ
2.创建gulpfile.js文件

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

function fileIncludeTask(done) {
    src(['./src/en/*.html']) //引入的路径 
         .pipe(fileinclude({
            prefix: '@@',   //变量前缀 @@include
            basepath: '@file' 
        }))
        .pipe(dest('./dist/en/')); //输出文件路径  没有这个文件夹也没关系，系统会自动创建一个
    done()
}
exports.fileIncludeTask = fileIncludeTask

3.html部分代码


<body>   //include 引用文件的路径一定要正确
   @@include('../assets/public/zh/header.html',{
      "index": "active"
  })
  </body>

4.被引用部分代码

<ul>
        <li @@if (context.index==='active' ) { class="active" }>
             <a href="#">首页</a>
        </li>
        <li @@if (context.about==='active' ) { class="active" }>
             <a href="#">关于我们</a>
        </li>
        <li @@if (context.services==='active' ) { class="active" }>
            <a href="#">服务范围</a>
        </li>
        <li @@if (context.contact==='active' ) { class="active" }>
            <a href="#">联系我们</a>
        </li>
</ul>

5.这些都准备完了以后，在控制台记得要去编译一下，就可以了
gulp (gulpfile.js 所用的方法名)
使用gulp-file-include对前端公共部分进行封装
6.打包css的话和上面基本一样
npm update
npm install gulp-sass --save-dev

最后一定要注意在html里引用的文件路径一定要正确，否则会报特别特别长的错误