当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 【gulp】001.使用gulp自动构建前端页面实现页面复用

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

2020年07月24日  | 移动技术网IT编程  | 我要评论

系列文章

【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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网