初步準(zhǔn)備
1.新建項(xiàng)目 cxy-pages
2.創(chuàng)建項(xiàng)目描述文件 yarn init
3.項(xiàng)目中新增lib/index.js并在package.json 文件中增加"main": "lib/index.js"
下載主要依賴(運(yùn)行依賴)
1.yarn add gulp --save
2.yarn add gulp-load-plugins --save自動(dòng)加載package.json文件里的 gulp 插件
導(dǎo)入基本功能
//-----index.js---------------------------
// 實(shí)現(xiàn)這個(gè)項(xiàng)目的構(gòu)建任務(wù)
const { src, dest, parallel, series, watch } = require('gulp')
// 統(tǒng)一管理gulp的組件
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
// 獲取工程目錄
const cwd = process.cwd()
module.exports = {}
設(shè)置資源路徑
//默認(rèn)配置
let config = {
build:{
src:'src',//項(xiàng)目業(yè)務(wù)源代碼路徑
dist:'dist',//發(fā)布文件路徑
temp:'temp',//臨時(shí)文件路徑，開發(fā)模式下讀取路徑
public:'public',//公共靜態(tài)資源路徑
paths:{
styles:'assets/styles/**/*.scss',//樣式路徑
scripts:'assets/scripts/**/*.js',//js文件路徑
pages:'**/*.html',//靜態(tài)頁面路徑
images:'assets/images/**',//圖片路徑
fonts:'assets/fonts/**',//字體路徑
}
}
}
try {
//讀取用戶pages.config.js配置
const loadConfig = require(`${cwd}/pages.config.js`)
config = Object.assign({},config,loadConfig)
} catch (error) {}
刪除發(fā)布文件夾
yarn add del --save
//...省略號(hào)代表折疊了部分代碼
...
const del = require('del')
const clean = () => {
// 刪除dist，及temp文件下內(nèi)容
return del([config.build.dist, config.build.temp])
}
module.exports = {
clean
}
處理style（scss）
yarn add gulp-sass --save
//...省略號(hào)代表折疊了部分代碼
...
const style = () => {
return src(config.build.paths.styles, { base: config.build.src, cwd: config.build.src})
.pipe(plugins.sass({ outputStyle: 'expanded' }))//輸出格式展開
.pipe(dest(config.build.temp))//目標(biāo)地址
}
module.exports = {
clean求冷，
style
}
處理javascript
yarn add gulp-babel @babel/core @babel/preset-env --save
//...省略號(hào)代表折疊了部分代碼
...
const script = () => {
// 使用gulp-babel需要同時(shí)安裝@babel/core 和 @babel/present
return src(config.build.paths.scripts, { base: config.build.src, cwd: config.build.src })
.pipe(plugins.babel({ presets: [require('@babel/preset-env')] }))//presets參數(shù)設(shè)置轉(zhuǎn)化版本
.pipe(dest(config.build.temp))//目標(biāo)地址
}
module.exports = {
...
script
}
處理html文件
yarn add gulp-swig --save
//...省略號(hào)代表折疊了部分代碼
...
const page = () => {
return src(config.build.paths.pages, { base: config.build.src, cwd: config.build.src })
.pipe(plugins.swig({ data:config.data }))//頁面模板中接收配置文件中的數(shù)據(jù)
.pipe(dest(config.build.temp))//目標(biāo)地址
}
module.exports = {
...
page
}
處理圖片和字體
yarn add gulp-imagemin --save
//...省略號(hào)代表折疊了部分代碼
...
const image = () => {
return src(config.build.paths.images, { base: config.build.src, cwd: config.build.src })
.pipe(plugins.imagemin())//壓縮圖片
.pipe(dest(config.build.dist))//開發(fā)模式不需要頻繁壓縮晰筛，所以直接導(dǎo)到dist恭取，生產(chǎn)模式使用
}
const font = () => {
return src(config.build.paths.fonts, { base: config.build.src, cwd: config.build.src })
.pipe(plugins.imagemin())//壓縮字體
.pipe(dest(config.build.dist))//開發(fā)模式不需要頻繁壓縮僧须，所以直接導(dǎo)到dist，生產(chǎn)模式使用
}
module.exports = {
...
image,
font
}
處理公共靜態(tài)資源
//...省略號(hào)代表折疊了部分代碼
...
const extra = () => {
//靜態(tài)資源不需要特殊處理直接導(dǎo)到temp
return src('**', { base: config.build.public, cwd: config.build.public })
.pipe(dest(config.build.temp))
}
module.exports = {
...
extra
}
開發(fā)模式監(jiān)聽代碼變化并刷新
yarn add browser-sync --save
//...省略號(hào)代表折疊了部分代碼
...
const browserSync = require('browser-sync')
const bs = browserSync.create()
...
const style= () => {
return ...
.pipe(bs.reload({ stream: true }))
}
const script= () => {
return ...
.pipe(bs.reload({ stream: true }))
}
const page = () => {
return ...
.pipe(bs.reload({ stream: true }))
}
...
const serve = () => {
watch(config.build.paths.styles,{ cwd:config.build.src }, style)
watch(config.build.paths.scripts, { cwd: config.build.src }, script)
watch(config.build.paths.pages, { cwd: config.build.src }, page)
watch([
config.build.paths.images,
config.build.paths.fonts
],{cwd:config.build.src}, bs.reload)
watch('**', { cwd: config.build.public }, bs.reload)
bs.init({
notify: false,
port: 8080,
// open:false,
// files: 'temp/**',
server: {
baseDir: [config.build.temp, config.build.src, config.build.public],//文件默認(rèn)查找地址讀取順序
routes: {
'/node_modules': 'node_modules'
}
}
})
}
合并及壓縮文件
yarn add gulp-useref gulp-if gulp-uglify gulp-clean-css gulp-htmlmin
//...省略號(hào)代表折疊了部分代碼
...
const path = require('path')
const useref = () => {
// return src( config.build.paths.pages, { base: config.build.temp ,cwd: config.build.temp })
return src(path.join(config.build.temp, config.build.paths.pages), { base: config.build.temp })
.pipe(plugins.useref({ searchPath: [config.build.temp, '.'] }))
.pipe(plugins.if(/\.js$/, plugins.uglify()))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
.pipe(plugins.if(/\.html$/, plugins.htmlmin({
collapseWhitespace: true,//去掉空格
minifyCss: true,//壓縮html的style標(biāo)簽中的css
minifyJS: true//壓縮html的script標(biāo)簽中的css
})))
.pipe(dest(config.build.dist))
}
module.exports = {
...
useref
}
整理編譯模式
//...省略號(hào)代表折疊了部分代碼
...
//編譯css+js+html
const compile = parallel(style, script, page)
//開發(fā)模式編譯+監(jiān)聽
const dev = series(compile, serve)
//打包到dist
const build = series(clean, parallel(series(compile, useref), image, font, extra))
module.exports = {
clean幢码，//清除編譯文件
dev己莺，//開發(fā)模式編譯運(yùn)行
build //打包
}
設(shè)置默認(rèn)執(zhí)行腳本
1.項(xiàng)目中新增bin/cxy-pages.js并在package.json 文件中增加
//...省略號(hào)代表折疊了部分代碼
{
...
"main": "lib/index.js",
"bin":"bin/cxy-pages.js",
"files":[
"lib",
"bin"
],
...
}
2.在cxy-pages.js 中
#!/usr/bin/env node
process.argv.push('--cwd')
process.argv.push(process.cwd())
process.argv.push('--gulpfile')
process.argv.push(require.resolve('..'))//cxy-pages目錄的絕對(duì)路徑
require('gulp/bin/gulp')
本地使用
1.通過yarn link 連接到全局
2.通過cxy-pages build|dev|clean 使用
發(fā)布到y(tǒng)arnpkg上使用
1.yarn publish發(fā)布
2.在需要用到的項(xiàng)目目錄下 yarn add cxy-pages --dev 下載使用
3.可以通過修改其項(xiàng)目中的script去定義編譯腳本
4.一些配置數(shù)據(jù)，如html中的data內(nèi)容和編譯文件路徑等凌受，可以通過在項(xiàng)目根目錄中新建pages.config.js并配置。
