gulp壓縮html，css，js檔案流程、監聽任務、使用gulp建立伺服器、同時執行多個任務、反向代理

周龍飛發表於2020-06-16
HTMLCSSJS伺服器

一、初始化

首先先做一個專案初始化，用來記錄你專案中用到的工具

再你專案檔案下開啟一個控制檯，輸入命令 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
                })
            ]
        }))
}

 

相關文章