gulp压缩html，css，js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理
一、初始化
首先先做一个项目初始化，用来记录你项目中用到的工具
再你项目文件下打开一个控制台，输入命令 yarn init -y 进行初始化
输入命令yarn add gulp -g --- 全局安装gulp，这里我提前已经安装过了就不演示了，然后再输入命令yarn add gulp -S 局部安装，都安装完成过后输入命令 gulp -v，如果出现两个版本号，就代表都安装成功了
接着在你的项目文件夹下新建一个文件名为 gulpFile.js js文件，名字必须叫这个，官方规定的，用来写gulp命令
好了，可以开始安装压缩工具进行压缩了
二、html压缩
安装html压缩工具，输入命令
yarn add gulp-htmlmin -D
安装压缩html的工具，安装到开发环境，生产环境用不到
安装完成过后打开初始化时生成的文件 package.json，开发环境有没有你刚安装的 gulp-htmlmin
打开开始建的 gulpFile.js 文件，开始写命令
const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html压缩模块
const path = { //方便管理路径
html: {
src: 'src/**/*.html',
dest: 'dist'
}
}
gulp.task('html', () => { //创建任务，并命名任务名
/*一个*表示所有文件，两个*表示所有目录*/
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)) //指定压缩文件放置的目录
})
然后输入命令
gulp html
执行压缩
像这样就压缩成功了
上面是 gulp3 写法，gulp4 写法：
const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html压缩模块
const path = { //方便管理路径
html: {
src: 'src/**/*.html',
dest: 'dist'
}
}
const html = () => { //创建任务，并命名任务名
/*一个*表示所有文件，两个*表示所有目录*/
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
}
三、css压缩
安装css压缩模块，输入命令
yarn add gulp-clean-css -D
然后也在gulpFile.js文件里写压缩css的命令
const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html压缩模块
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const path = { //方便管理路径
/*一个*表示所有文件，两个*表示所有目录*/
html: {
src: 'src/**/*.html',
dest: 'dist'
},
css: {
src: 'src/**/*.css',
dest: 'dist'
}
}
gulp.task('css', () => {
return gulp.src(path.css.src)
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
})
输入命令 gulp css 命令执行
另外css还有一个很好用的模块，它可以自动给需要兼容的css属性加前缀，输入命令安装它
yarn add gulp-autoprefixer -D
安装好了，引入模块，调用即可
四、js压缩
安装js es6语法转es5语法模块，压缩js模块，输入命令
yarn add -D gulp-babel @babel/core @babel/preset-env //es6语法转es5
yarn add -D gulp-uglify //压缩js
同样的打开 gulpFile.js 文件写压缩js的命令
const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html压缩模块
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const autoprefixer = require('gulp-autoprefixer') //引入加前缀模块
const babel = require('gulp-babel'), //引入es6转es5模块
uglify = require('gulp-uglify') //引入js压缩模块
const path = { //方便管理路径
/*一个*表示所有文件，两个*表示所有目录*/
html: {
src: 'src/**/*.html',
dest: 'dist'
},
css: {
src: 'src/**/*.css',
dest: 'dist'
},
js: {
src: 'src/**/*.js',
dest: 'dist'
}
}
gulp.task('js', () => {
gulp.src(path.js.src)
.pipe(babel({
presets: ['@babel/env'] //es6转es5
}))
.pipe(uglify()) //执行压缩
.pipe(gulp.dest(path.js.dest))
})
输入命令 gulp js 运行
五、监听任务
监听任务需要使用gulp4的写法
const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html压缩模块
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const autoprefixer = require('gulp-autoprefixer') //引入加前缀模块
const babel = require('gulp-babel'), //引入es6转es5模块
uglify = require('gulp-uglify') //引入js压缩模块
const path = { //方便管理路径
/*一个*表示所有文件，两个*表示所有目录*/
html: {
src: 'src/**/*.html',
dest: 'dist'
},
css: {
src: 'src/**/*.css',
dest: 'dist'
},
js: {
src: 'src/**/*.js',
dest: 'dist'
}
}
const css = () => {
return gulp.src(path.css.src)
.pipe(autoprefixer())
.pipe(cleanCss())
.pipe(gulp.dest(path.css.dest))
}
const js = () => {
return gulp.src(path.js.src)
.pipe(babel({
presets: ['@babel/env'] //es6转es5
}))
.pipe(uglify()) //执行压缩
.pipe(gulp.dest(path.js.dest))
}
const html = () => { //创建任务，并命名任务名
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)) //指定压缩文件放置的目录
}
const watch = () => { //监听文件，文件改变执行对应的任务
gulp.watch(path.html.src, html)
gulp.watch(path.css.src, css)
gulp.watch(path.js.src, js)
}
module.exports = {
html,
js,
css,
watch
}
输入命令 gulp watch 即可实现监听
六、gulp创建服务器
输入命令
yarn add gulp-connect -D
引入模块
const connect = require('gulp-connect')
创建服务器
const server = () => { connect.server({ //创建服务器 root: 'dist',//根目录 port: '2000',//端口号 livereload:true//服务器热更新 }) }
导出模块
module.exports = {
html,
js,
css,
watch,
server
}
输入命令 gulp server 就可以运行了
如果想直接打开首页，可以输入命令安装open模块
yarn add open -S
然后再任何位置写入你想打开的网址
open('http://127.0.0.1:2000')
还有一个模块也可以创建服务器
输入命令安装
yarn add gulp-webServer -D
引入模块
const webserver = require('gulp-webserver')
创建服务器
const createServer = () => { return gulp.src('./dist') .pipe(webserver({ //创建服务器 port:'3000', //端口号 open:'/html', //默认打开路径 livereload:true //热更新 })) }
七、同时运行多个任务
// 默认任务：default 我们可以把所有任务都放进default // series 同步执行，先执行删除dist任务，再执行其他任务 // parallel 异步执行（并行），不会互相影响的任务可以并行 module.exports.default = gulp.series(gulp.parallel(html,js,css,watch,server))
运行只需要写 gulp 命令
如果想页面实时更新的话，再想实时更新的任务后面加上
.pipe(connect.reload())
然后重启服务器就ok了
八、反向代理
输入命令
yarn add http-proxy-middleware -D
引入模块
const proxy = require('http-proxy-middleware')
创建反向代理
connect 创建的服务器要用函数创建代理
const server = () => { connect.server({ //创建服务器 root: 'dist', //根目录 port: '2000', //端口号 livereload: true, //服务器热更新 middleware: () => { return [ proxy.createProxyMiddleware('/api', { //创建反向代理，请求已 /api 开头就使用target的服务器 target: 'http://localhost',//需要代理的服务器 changeOrigin: true }) ] } }) }
webserver创建的服务器要用数组创建代理
const createServer = () => { return gulp.src('./dist') .pipe(webserver({ //创建服务器 port: '3000', //端口号 open: '/html', //默认打开路径 livereload: true, //热更新 middleware: [ proxy.createProxyMiddleware('/api', { //创建反向代理，请求已 /api 开头就使用target的服务器 target: 'http://localhost', changeOrigin: true }) ] })) }
