【gulp】001.使用gulp自动构建前端页面实现页面复用
系列文章
【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