gulp压缩html，css，js文件流程、监放任务、使用gulp建立服务器、同时运行多个任务、反向代理

时间 2020-06-17

标签 gulp 压缩 html css 文件流程任务使用建立服务器同时运行多个反向代理栏目 JavaScript 繁體版

原文原文链接

1、初始化

首先先作一个项目初始化，用来记录你项目中用到的工具javascript

再你项目文件下打开一个控制台，输入命令 yarn init -y 进行初始化css

输入命令yarn add gulp -g --- 全局安装gulp，这里我提早已经安装过了就不演示了，而后再输入命令yarn add gulp -S 局部安装，都安装完成事后输入命令 gulp -v，若是出现两个版本号，就表明都安装成功了html

接着在你的项目文件夹下新建一个文件名为 gulpFile.js js文件，名字必须叫这个，官方规定的，用来写gulp命令java

好了，能够开始安装压缩工具进行压缩了es6

2、html压缩

安装html压缩工具，输入命令 web

yarn add gulp-htmlmin -D

安装压缩html的工具，安装到开发环境，生产环境用不到json

安装完成事后打开初始化时生成的文件 package.json，开发环境有没有你刚安装的 gulp-htmlmingulp

打开开始建的 gulpFile.js 文件，开始写命令api

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
}

3、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

安装好了，引入模块，调用便可

4、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 运行

5、监放任务

监放任务须要使用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 便可实现监听

6、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 //热更新
        }))
}

7、同时运行多个任务

// 默认任务：default 咱们能够把全部任务都放进default
// series 同步执行，先执行删除dist任务，再执行其余任务
// parallel 异步执行（并行），不会互相影响的任务能够并行
module.exports.default = gulp.series(gulp.parallel(html,js,css,watch,server))

运行只须要写 gulp 命令

若是想页面实时更新的话，再想实时更新的任务后面加上

.pipe(connect.reload())

而后重启服务器就ok了

8、反向代理

输入命令

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