欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【gulp】001.使用gulp自动构建前端页面实现页面复用

程序员文章站 2022-06-22 21:33:38
最近接到任务,要写一个公司的官网,为了SEO,自然不能使用单页应用,还是得按传统方式来写。但是很多页面有重合的地方,一旦修改,需要把每个页面都修改一次,异常繁琐,甚至可能会漏掉一两个页面,上网搜索发现目前有gulp和grunt两种构建工具比较符合需求,而grunt配置起来比较繁琐,因此剩下的就是gulp了。安装gulp使用gulp需要安装对应环境。nodejs是必不可少的了,我的nodejs版本是v12.16.3。然后是全局安装gulp,执行以下命令npm install gulp -g创建...

系列文章

【gulp】001.使用gulp自动构建前端页面实现页面复用
【gulp】002.gulp实现页面复用,导航栏样式激活
【gulp】003.编译less 使用autoprefixer增加前缀 使用babel转换 生成sourcemap

最近接到任务,要写一个公司的官网,为了SEO,自然不能使用单页应用,还是得按传统方式来写。
但是很多页面有重合的地方,一旦修改,需要把每个页面都修改一次,异常繁琐,甚至可能会漏掉一两个页面,上网搜索发现目前有gulp和grunt两种构建工具比较符合需求,而grunt配置起来比较繁琐,因此剩下的就是gulp了。

安装gulp

使用gulp需要安装对应环境。
nodejs是必不可少的了,我的nodejs版本是v12.16.3。
然后是全局安装gulp,执行以下命令

npm install gulp -g

创建项目

先创建一个文件夹,然后进去npm init

mkdir gulp-project
cd gulp-project
npm init

然后需要为项目安装gulp

npm i gulp

随后需要在项目下创建一个名为gulpfile.js的文件

之后需要做的工作就是编辑这个gulpfile.js了

为了使项目更直观,我将把源文件放在src目录下,构建后的文件放在dist目录下。

构建配置

gulp构建都是基于gulpfile.js来执行的。
gulp将构建工作分成一个一个的任务,通过gulp.task来注册任务。

编辑gulpfile.js

const gulp = require("gulp");
gulp.task("default", () => {
  console.log("aaaaa");
})

这样就注册了gulp的默认任务,通过执行gulp来执行任务(尽管会报错但是请忽略)。

使用插件

gulp的构建操作都是基于gulp的插件,如gulp-file-include能够合并文件,gulp-less能够编译less文件,gulp-babel能够将js代码转换成es5等。

根据我的需求,我使用了以下几款插件:

  • gulp-file-include 合并html文件,文件复用
  • gulp-less 编译less文件
  • gulp-autoprefixer 自动为样式加上不同浏览器的前缀
  • gulp-babel @babel/core @babel/preset-env js代码转es5
  • del 清除构建的目录
  • gulp-webserver 启动本地服务器
  • gulp-sourcemaps 生成sourcemap更方便调试

将以上插件全部安装:

npm i gulp-file-include gulp-less gulp-autoprefixer gulp-babel @babel/core @babel/preset-env del gulp-webserver gulp-sourcemaps

在gulpfile中引入插件

const del = require("del"); //清理dist
const gulp = require("gulp");
const less = require("gulp-less"); //编译less
const babel = require("gulp-babel"); //转es5
const webserver = require("gulp-webserver"); //webserver
const sourcemaps = require("gulp-sourcemaps")
const fileinclude = require("gulp-file-include"); //文件引入
const autoprefixer = require("gulp-autoprefixer"); //自动增加浏览器前缀

注册任务

我的需求是,能够复用html,能够编译less文件,能够将js转es5。
为了方便,将其拆分成几个小任务:

  • 清理上次构建文件
  • 自动合并引入html
  • 编译less
  • 转换es5
  • 复制其他资源文件
  • 启动webserver
  • 监听文件变化,自动执行对应任务
  • 将以上任务整合执行

– 未完待续-

本文地址:https://blog.csdn.net/Montaro2017/article/details/107536841