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
                })
            ]
        }))
}