一、初始化
首先先做一個項目初始化，用來記錄你項目中用到的工具
再你項目文件下打開一個控制台，輸入命令 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 }) ] })) }
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※別再煩惱如何寫文案,掌握八大原則!
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※超省錢租車方案
※教你寫出一流的銷售文案?
※網頁設計最專業,超強功能平台可客製化
