初步准备
1.新建项目 cxy-pages
2.创建项目描述文件 yarn init
3.项目中新增lib/index.js并在package.json 文件中增加"main": "lib/index.js"
下载主要依赖(运行依赖)
1.yarn add gulp --save
2.yarn add gulp-load-plugins --save自动加载package.json文件里的 gulp 插件
导入基本功能
//-----index.js---------------------------
// 实现这个项目的构建任务
const { src, dest, parallel, series, watch } = require('gulp')
// 统一管理gulp的组件
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
// 获取工程目录
const cwd = process.cwd()
module.exports = {}
设置资源路径
//默认配置
let config = {
build:{
src:'src',//项目业务源代码路径
dist:'dist',//发布文件路径
temp:'temp',//临时文件路径，开发模式下读取路径
public:'public',//公共静态资源路径
paths:{
styles:'assets/styles/**/*.scss',//样式路径
scripts:'assets/scripts/**/*.js',//js文件路径
pages:'**/*.html',//静态页面路径
images:'assets/images/**',//图片路径
fonts:'assets/fonts/**',//字体路径
}
}
}
try {
//读取用户pages.config.js配置
const loadConfig = require(`${cwd}/pages.config.js`)
config = Object.assign({},config,loadConfig)
} catch (error) {}
删除发布文件夹
yarn add del --save
//...省略号代表折叠了部分代码
...
const del = require('del')
const clean = () => {
// 删除dist，及temp文件下内容
return del([config.build.dist, config.build.temp])
}
module.exports = {
clean
}
处理style（scss）
yarn add gulp-sass --save
//...省略号代表折叠了部分代码
...
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))//目标地址
}
module.exports = {
clean，
style
}
处理javascript
yarn add gulp-babel @babel/core @babel/preset-env --save
//...省略号代表折叠了部分代码
...
const script = () => {
// 使用gulp-babel需要同时安装@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参数设置转化版本
.pipe(dest(config.build.temp))//目标地址
}
module.exports = {
...
script
}
处理html文件
yarn add gulp-swig --save
//...省略号代表折叠了部分代码
...
const page = () => {
return src(config.build.paths.pages, { base: config.build.src, cwd: config.build.src })
.pipe(plugins.swig({ data:config.data }))//页面模板中接收配置文件中的数据
.pipe(dest(config.build.temp))//目标地址
}
module.exports = {
...
page
}
处理图片和字体
yarn add gulp-imagemin --save
//...省略号代表折叠了部分代码
...
const image = () => {
return src(config.build.paths.images, { base: config.build.src, cwd: config.build.src })
.pipe(plugins.imagemin())//压缩图片
.pipe(dest(config.build.dist))//开发模式不需要频繁压缩，所以直接导到dist，生产模式使用
}
const font = () => {
return src(config.build.paths.fonts, { base: config.build.src, cwd: config.build.src })
.pipe(plugins.imagemin())//压缩字体
.pipe(dest(config.build.dist))//开发模式不需要频繁压缩，所以直接导到dist，生产模式使用
}
module.exports = {
...
image,
font
}
处理公共静态资源
//...省略号代表折叠了部分代码
...
const extra = () => {
//静态资源不需要特殊处理直接导到temp
return src('**', { base: config.build.public, cwd: config.build.public })
.pipe(dest(config.build.temp))
}
module.exports = {
...
extra
}
开发模式监听代码变化并刷新
yarn add browser-sync --save
//...省略号代表折叠了部分代码
...
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],//文件默认查找地址读取顺序
routes: {
'/node_modules': 'node_modules'
}
}
})
}
合并及压缩文件
yarn add gulp-useref gulp-if gulp-uglify gulp-clean-css gulp-htmlmin
//...省略号代表折叠了部分代码
...
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标签中的css
minifyJS: true//压缩html的script标签中的css
})))
.pipe(dest(config.build.dist))
}
module.exports = {
...
useref
}
整理编译模式
//...省略号代表折叠了部分代码
...
//编译css+js+html
const compile = parallel(style, script, page)
//开发模式编译+监听
const dev = series(compile, serve)
//打包到dist
const build = series(clean, parallel(series(compile, useref), image, font, extra))
module.exports = {
clean，//清除编译文件
dev，//开发模式编译运行
build //打包
}
设置默认执行脚本
1.项目中新增bin/cxy-pages.js并在package.json 文件中增加
//...省略号代表折叠了部分代码
{
...
"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目录的绝对路径
require('gulp/bin/gulp')
本地使用
1.通过yarn link 连接到全局
2.通过cxy-pages build|dev|clean 使用
发布到yarnpkg上使用
1.yarn publish发布
2.在需要用到的项目目录下 yarn add cxy-pages --dev 下载使用
3.可以通过修改其项目中的script去定义编译脚本
4.一些配置数据，如html中的data内容和编译文件路径等，可以通过在项目根目录中新建pages.config.js并配置。
