gulp4.0的使用和gulpfile.js任务配置
自动化构建工具
写代码的时候会遵循一些框架的方式或者某些技术，或我们自己处理的模块化，但是这种代码是不能直接在浏览器运行的，这个过程我们就需要使用自动化构建工具，这些工具都是基于node环境。
node官网：https://nodejs.org，下载LTS版本的即可。
常用的工具
grunt 比较古老，功能少，更新少，插件少，现在用的很少🧐🧐
gulp pc端 jquery的项目打包更多使用gulp
webpack 最主流的打包工具，vue、react都是用的webpack👊👊
gulp的介绍
gulp官网：https://www.gulpjs.com.cn/
用自动化构建工具增强你的工作流程！
gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。
简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。
高效：基于 node 强大的流(stream)能力，gulp 在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。
生态：遵循严格的准则，确保我们的插件结构简单、运行结果可控。
Builds can be the most awful sinkhole for teams to waste their time with - gulp is a serious win for any project
（对于一个团队来讲，构建是一个浪费时间的最糟糕的一个坑，但是如果使用gulp，对于任何项目来讲这都将会是一场巨大的胜利）✌✌✌✌
gulp使用
安装node环境：https://nodejs.org，下载LTS版本的即可
在任意位置打开命令行工具，使用npm全局安装gulp命令行工具
npm i gulp -g，安装完成以后执行gulp -v只要看到版本号就说明安装成功创建项目目录，一般由小写字母加数字构成
进入目录，执行
npm init -y初始化项目，会创建一个package.json文件，这个文件里就是当前项目的一些说明信息，也可以手动修改规划目录结构，比如：src放源代码，dist就是根据src源代码使用gulp打包之后可以用来上线的代码，dist是不用动的，我们写代码在src里面写，但是最后运行的是dist目录
gulp项目目录结构
在当前项目局部安装gulp，
npm i gulp -dev，高版本npm会自动帮我们 –save 保存在package.json文件的依赖里，-dev的意思是安装成开发依赖，也就是说这个包只有开发环境需要，线上产品环境不需要。这样的话即使删除node_modules也可以直接运行npm i就可以根据package.json里面的所有依赖包信息把这些依赖包全局安装进来创建一个
gulpfile.js文件，注意：文件名一定要叫gulpfile！！！然后在这个文件里制定各种任务。管理路径，把所有的路径集中用paths对象来管理，包括源文件路径和目标路径
** 代表所有文件夹
* 代表所有文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22const path = {
html: {
src: 'src/**/*.html', // src下面的所有文件夹下的所有html文件，下面的js，css以此类推
dest: 'dist' // 处理的结果放到dist目录
},
css: {
src: 'src/css/**/*.css', // src下面css目录里的所有文件夹下的所有css文件
dest: 'dist/css' // 处理的结果放到dist下的css目录里
},
js: {
src: 'src/js/**/*.js',
dest: 'dist/js'
},
img: {
src: 'src/images/**/*',
dest: 'dist/images'
},
libs: {
src: 'src/libs/**/*',
dest: 'dist/libs'
}
}制定压缩html的任务：执行
npm i gulp-htmlmin -dev安装压缩html的插件，然后制定压缩任务，再通过module.exports 把这个任务暴露出去，就可以执行gulp html来运行这个任务了1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const html = () => {
// 需要把任务代码return
return gulp.src(path.html.src)
.pipe(htmlmin({
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}))
.pipe(gulp.dest(path.html.dest))
}
module.exports = {
html
}制定js任务：先ES6转ES5，然后再压缩，最后在导出那里加上js任务
安装压缩js的包
npm i gulp-uglify -dev安装ES6转ES5的包
npm i gulp-babel @babel/core @babel/preset-env -dev1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const uglify = require('gulp-uglify')
const babel = require('gulp-babel')
const js = () => {
return gulp.src(path.js.src)
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest(path.js.dest))
.pipe(connect.reload())
}
module.exports = {
html,
js
}css任务压缩css：
npm i gulp-clean-css -dev1
2
3
4
5
6
7
8
9
10
11
12const cleanCss = require('gulp-clean-css')
const css = () => {
return gulp.src(path.css.src)
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
}
module.exports = {
html,
js,
css
}给需要兼容的css样式自动加上兼容性前缀：
npm i gulp-autoprefixer -dev1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const cleanCss = require('gulp-clean-css')
const autoPrefixer = require('gulp-autoprefixer')
const css = () => {
return gulp.src(path.js.src)
.pipe(autoprefixer({
presets: ['@babel/env']
}))
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
}
module.exports = {
html,
js,
css
}如果用到sass来写样式，那么还要把css任务做进一步修改：
sass编译成成css：
npm i node-sass gulp-sass -dev首先，path对象里css的src属性路径要把后缀名css改成scss，再修改css任务
1
2
3
4
5
6
7
8
9
10
11
12
13const cleanCss = require('gulp-clean-css')
const autoPrefixer = require('gulp-autoprefixer')
const sass = require('gulp-sass')
const css = () => {
return gulp.src(path.js.src)
.pipe(sass())
.pipe(autoprefixer({
presets: ['@babel/env']
}))
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
}开启服务器：
npm i gulp-connect -dev项目根目录是dist，所以项目中的一切路径都写成/开头的绝对路径，/指的就是dist，避免模块化之后相对位置发生变变化导致路径错误1
2
3
4
5
6
7
8
9const connect = require('gulp-connect')
const server = () => {
connect.server({
root: 'dist', // 项目根路径是dist
livereload: true, // 服务器支持热更新
port: 2333 // 配置端口号2333
})
}由于dist目录是每次执行任务时自动生成的，所以为了避免上一次旧的代码对新的代码造成影响，我们一般会在开启任务之前先把dist目录删掉：
npm i del -dev1
2
3const del = require('del')
const clean = () => del(['dist'])还有一些图片或者引入的第三方的文件需要做一个移动处理
1
2
3
4
5// img任务：复制到dist里
const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))
// libs任务：文件的复制
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))监听html、js和css文件的变化，重启对应任务，在被监听的任务后面都要重启服务器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// watch任务：监听一些文件的修改，一旦被修改了就自动重启对应的任务
const watch = () => {
gulp.watch(path.html.src, html)
gulp.watch(path.css.src, css)
gulp.watch(path.js.src, js)
}
// 再在html、css和js任务后面都加上一句.pipe(connect.reload())，比如css任务改成这样：
const css = () => {
return gulp.src(path.css.src)
.pipe(sass())
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
.pipe(connect.reload())
}任务导出做一下修改，单个导出只能单个执行，所以我们可以把所有要执行的任务放在默认人任务里，就只需要在命令行里执行gulp即可执行所有任务：导出默认任务流，先同步执行clean，再异步执行其他任务
1
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))
如果需要跨域访问其他接口，则需要配置跨域，需要依赖另一个中间件：
npm i http-proxy-middleware -dev1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const connect = require('gulp-connect')
const proxy = require('http-proxy-middleware')
const server = () => {
connect.server({
root: 'dist',
livereload: true,
port: 8000,
// 中间件：函数返回一个数组，数组配置跨域代理
middleware: function () {
return [
// 将以/api为开头的请求代理到域 http://localhost:80
proxy('/api', {
target: 'http://localhost:80',
changeOrigin: true
})
]
}
})
}
现在，我们只需要在命令行里运行gulp 项目就能启动起来了，然后在浏览器里输入 http://localhost:2333就能访问主页啦，最后，贴上完整代码：🙆♂️🙆♂️🙆♂️
1 |
const gulp = require('gulp'), |
这是package.json🙋♂️🙋♂️🙋♂️
1 |
{ |
代码不是万能的，但不写代码是万万不能的
Dary记