1.引入gulp模塊
yarn add gulp --dev
2.添加入口文件gulpfile.js
3.引入gulp批量插件gulp-load-plugins ,減少手動(dòng)引入每一個(gè)gulp插件
yarn add gulp-load-plugins --dev
4.樣式編譯,并對(duì)css文件進(jìn)行編譯
yarn add gulp-sass
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })//通過base確定轉(zhuǎn)換過后的基準(zhǔn)目錄
.pipe(plugins.sass({ outputStyle: 'expanded' }))//完全展開
.pipe(dest('temp'))//建立temp时迫，防止邊讀取邊寫入造成文件無法生成問題
}
5.腳本編譯
使用gulp-babel、@babel/core钾麸、@babel/preset-env插件編譯js文件，將es6轉(zhuǎn)換為es5
yarn add gulp-babel @babel/core @babel/preset-env --dev
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
}
6.頁面模板編譯
引入gulp-swin插件編譯
yarn add gulp-swig --dev
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板緩存導(dǎo)致頁面不能及時(shí)更新
.pipe(dest('temp'))
}
7.圖片和字體文件轉(zhuǎn)換
一般字體不需要壓縮宙帝，主要是圖片壓縮
yarn add gulp-imagemin --dev
const image = () => {
return src('src/assets/images/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
const font = () => {
return src('src/assets/fonts/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
8.其他文件及文件清除
public文件直接拷貝；使用del插件將原先編譯后的文件目錄刪除
yarn add del --dev
const extra = () => {
return src('public/**', { base: 'public' })
.pipe(dest('dist'))
}
const clean = () => {
return del(['dist', 'temp'])
}
9.開發(fā)服務(wù)器
安裝browser-sync插件募闲，當(dāng)代碼修改并保存時(shí)步脓，瀏覽器熱更新，提高開發(fā)效率
yarn add browser-sync --dev
const serve = () => {
//監(jiān)聽源文件變化
watch('src/assets/styles/*.scss', style)
watch('src/assets/scripts/*.js', script)
watch('src/*.html', page)
//減少構(gòu)建次數(shù)
watch([
'src/assets/images/**',
'src/assets/fonts/**',
'public/**'
], bs.reload)
bs.init({
notify: false,//服務(wù)器提示
port: 2080,//端口
// open: false,//默認(rèn)開啟瀏覽器
// files: 'temp/**',//啟動(dòng)后自動(dòng)監(jiān)聽的文件
server: {
baseDir: ['temp', 'src', 'public'],//設(shè)置根目錄
routes: {//特殊路由浩螺，優(yōu)先basedir從這里尋找文件
'/node_modules': 'node_modules' }
}
})
}
10.useref文件引用處理及文件壓縮
1.使用 gulp-useref 插件可以將 HTML 引用的多個(gè) CSS 和 JS 合并起來靴患，減小依賴的文件個(gè)數(shù)，從而減少瀏覽器發(fā)起的請(qǐng)求次數(shù)要出。gulp-useref 根據(jù)注釋將 HTML 中需要合并壓縮的區(qū)塊找出來蚁廓，對(duì)區(qū)塊內(nèi)的所有文件進(jìn)行合并。需要注意的是厨幻，gulp-useref只負(fù)責(zé)合并，不負(fù)責(zé)壓縮
使用 gulp-if 插件來判斷讀取流文件類型腿时，并壓縮對(duì)應(yīng)文件
yarn add gulp-if --dev
yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
yarn add gulp-useref --dev
const useref = () => {
return src('temp/*.html', { base: 'temp' })
.pipe(plugins.useref({ searchPath: ['temp', '.'] }))
.pipe(plugins.if(/\.js$/, plugins.uglify()))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
.pipe(plugins.if(/\.html$/, plugins.htmlmin({
collapseWhitespace: true,//刪除空格
minifyCSS: true,//壓縮行內(nèi)樣式
minifyJS: true//壓縮行內(nèi)js
})))
.pipe(dest('dist'))
}
11.重新梳理構(gòu)建過程及完整代碼
// 實(shí)現(xiàn)這個(gè)項(xiàng)目的構(gòu)建任務(wù)
const { src, dest, parallel, series, watch } = require('gulp')
//建立temp况脆，防止邊讀取邊寫入造成文件無法生成問題
//區(qū)別開發(fā)時(shí)build和上線之前構(gòu)建，建立個(gè)臨時(shí)目錄temp批糟，最終上線用dist
const del = require('del')
// yarn add browser-sync --dev
const browserSync = require('browser-sync')
const loadPlugins = require('gulp-load-plugins')
//自動(dòng)加載插件 yarn add gulp-load-plugins --dev
const plugins = loadPlugins()
//創(chuàng)建開發(fā)服務(wù)器
const bs = browserSync.create()
const data = {
menus: [
{
name: 'Home',
icon: 'aperture',
link: 'index.html'
},
{
name: 'Features',
link: 'features.html'
},
{
name: 'About',
link: 'about.html'
},
{
name: 'Contact',
link: '#',
children: [
{
name: 'Twitter',
link: 'https://twitter.com/w_zce'
},
{
name: 'About',
link: 'https://weibo.com/zceme'
},
{
name: 'divider'
},
{
name: 'About',
link: 'https://github.com/zce'
}
]
}
],
pkg: require('./package.json'),
date: new Date()
}
const clean = () => {
return del(['dist', 'temp'])
}
const style = () => {
return src('src/assets/styles/*.scss', { base: 'src' })//通過base確定轉(zhuǎn)換過后的基準(zhǔn)目錄
.pipe(plugins.sass({ outputStyle: 'expanded' }))//完全展開
.pipe(dest('temp'))//建立temp格了，防止邊讀取邊寫入造成文件無法生成問題
}
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
}
const page = () => {
return src('src/*.html', { base: 'src' })
.pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板緩存導(dǎo)致頁面不能及時(shí)更新
.pipe(dest('temp'))
}
const image = () => {
return src('src/assets/images/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
const font = () => {
return src('src/assets/fonts/**', { base: 'src' })
.pipe(plugins.imagemin())
.pipe(dest('dist'))
}
const extra = () => {
//拷貝
return src('public/**', { base: 'public' })
.pipe(dest('dist'))
}
//初始化服務(wù)器配置
const serve = () => {
//監(jiān)聽源文件變化
watch('src/assets/styles/*.scss', style)
watch('src/assets/scripts/*.js', script)
watch('src/*.html', page)
// watch('src/assets/images/**', image)
// watch('src/assets/fonts/**', font)
// watch('public/**', extra)
//減少構(gòu)建次數(shù)
watch([
'src/assets/images/**',
'src/assets/fonts/**',
'public/**'
], bs.reload)
bs.init({
notify: false,//服務(wù)器提示
port: 2080,//端口
// open: false,//默認(rèn)開啟瀏覽器
// files: 'dist/**',//指定dist文件發(fā)生改變及時(shí)熱部署
server: {
baseDir: ['temp', 'src', 'public'],//設(shè)置根目錄
routes: {//特殊路由，優(yōu)先basedir從這里尋找文件
'/node_modules': 'node_modules' }
}
})
}
const useref = () => {
//yarn add gulp-useref --dev
return src('temp/*.html', { base: 'temp' })
.pipe(plugins.useref({ searchPath: ['temp', '.'] }))
// html js css
//yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
//yarn add gulp-if --dev
.pipe(plugins.if(/\.js$/, plugins.uglify()))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
.pipe(plugins.if(/\.html$/, plugins.htmlmin({
collapseWhitespace: true,//刪除空格
minifyCSS: true,//壓縮行內(nèi)樣式
minifyJS: true//壓縮行內(nèi)js
})))
.pipe(dest('dist'))
}
const compile = parallel(style, script, page)
// 上線之前執(zhí)行的任務(wù)
const build = series(
clean,
parallel(
series(compile, useref),//useref依賴compile
image,
font,
extra
)
)
//開發(fā)時(shí)執(zhí)行
const develop = series(compile, serve)
module.exports = {
clean,
build,
develop
}
