gulp构建项目并发布yarnpkg

初步准备

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并配置。