【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
上一篇: 快手小店怎么退款?快手小店退款详细步骤