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

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※別再煩惱如何寫文案,掌握八大原則!

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※超省錢租車方案

※教你寫出一流的銷售文案?

網頁設計最專業,超強功能平台可客製化