Part2-1-3 自动化构建

最新推荐文章于 2023-08-09 08:57:13 发布
最新推荐文章于 2023-08-09 08:57:13 发布
阅读量407 收藏
点赞数
分类专栏： 大前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38066007/article/details/117124921
版权

Gulp 的基本使用

安装 gulp

yarn add gulp --dev

在项目根目录下创建 gulp入口文件 gulpfile.js

// 实现这个项目的构建任务
exports.foo = done => {
  console.log('foo123')
  done()  // gulp 任务都为异步任务，所以需要调用done函数来标识任务结束
}

// default 为默认任务
exports.default = done => {
  console.log('defalut task')
  done()  // gulp 任务都为异步任务，所以需要调用done函数来标识任务结束
}

 

执行任务命令

yarn gulp foo

 

执行默认任务命令

yarn gulp

 

Gulp 创建组合任务

使用 gulp 的 series、parallel 模块来创建组合任务

series 用来创建串行任务

parallel 用来创建并行任务

const { series, parallel } = require('gulp')

const task1 = done => {
  setTimeout(() => {
    console.log('task1 working')
    done()
  }, 1000)
}

const task2 = done => {
  setTimeout(() => {
    console.log('task2 working')
    done()
  }, 1000)
}

const task3 = done => {
  setTimeout(() => {
    console.log('task3 working')
    done()
  }, 1000)
}

exports.foo = series(task1, task2, task3)
exports.bar = parallel(task1, task2, task3)

 

Gulp 创建异步任务的几种方式

const fs = require('fs')

// 使用回调函数
exports.callback = done => {
  console.log('callback task')
  done()
}

exports.callback_error = done => {
  console.log('callback task')
  done(new Error('task failed'))
}

// 使用 promise
exports.promise = () => {
  console.log('promise task')
  return Promise.resolve()
}

exports.promise_error = () => {
  console.log('promise task')
  return Promise.reject(new Error('task failed'))
}


// 使用 async await
exports.async = async () => {
  await timeout(1000)
  console.log('async task')
}

const timeout = time => {
  return new Promise(resolve => {
    setTimeout(resolve, time)
  })
}


// 使用 stream
// readStream 有一个 end 的事件，一旦读取的文件流完成后，就会触发end事件，gulp就会知道任务完成了
exports.stream = () => {
  const read = fs.createReadStream('yarn.lock')
  const write = fs.createWriteStream('a.txt')
  read.pipe(write)
  return read
}

 

使用gulp完成代码压缩

const fs = require('fs')
const { Transform } = require('stream')

exports.default = () => {
  // 文件读取流
  const readStream = fs.createReadStream('normalize.css')

  // 文件写入流
  const writeStream = fs.createWriteStream('normalize.min.css')

  // 文件转换流
  const transformStream = new Transform({
    // 核心转换过程
    transform: (chunk, encoding, callback) => {
      const input = chunk.toString()
      const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
      callback(null, output)
    }
  })

  return readStream
    .pipe(transformStream) // 转换
    .pipe(writeStream) // 写入
}

 

Gulp 文件操作API + 插件的使用

const { src, dest } = require('gulp') // src: 读取流  dest: 写入流
const cleanCSS = require('gulp-clean-css') // 压缩 css文件
const rename = require('gulp-rename') // 写入后的文件重命名

exports.default = () => {
  return src('src/*.css')
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.css' })) // extname：重新命名扩展名
    .pipe(dest('dist'))
}

 

样式编译

const { src, dest } = require('gulp')
const sass = require('gulp-sass') // 编译 sass 文件


// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}

module.exports = {
  style
}

 

脚本编译

安装 babel 依赖  yarn add gulp-bable --dev

安装 babel 核心转换模块  yarn add @babel/core @babel/preset-env --dev

const { src, dest } = require('gulp')
const sass = require('gulp-sass') // 编译 sass 文件
const babel = require('gulp-babel') // 使用babel转换es6语法



// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


module.exports = {
  style,
  script 
}

 

页面模板编译

如果页面有使用模板引擎，则要安装 对应的模板引擎转换插件

例如页面使用了 swig, 需要安装 swig 转换插件 yarn add gulp-swig --dev

然后使用 parallel  完成 并行任务

const { src, dest, parallel } = require('gulp')
const sass = require('gulp-sass') // 编译 sass 文件
const babel = require('gulp-babel') // 使用babel转换es6语法
const swig= require('gulp-swig') // 页面模板引擎转换插件


// 准备页面模板引擎渲染数据
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()
}


// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


// 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'))
}


const compile = parallel(style, script, page)


module.exports = {
  compile
}

 

图片和字体文件的转换

安装图片压缩插件  yarn add gulp-imagemin --dev  此压缩是无损压缩，也可以对字体文件的 svg 文件进行压缩

 

const { src, dest, parallel } = require('gulp')
const sass = require('gulp-sass') // 编译 sass 文件
const babel = require('gulp-babel') // 使用babel转换es6语法
const swig= require('gulp-swig') // 页面模板引擎转换插件
const imagemin= require('gulp-imagemin')


// 准备页面模板引擎渲染数据
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()
}


// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


// 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'))
}


const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}


const compile = parallel(style, script, page, image, font)


module.exports = {
  compile
}

 

public等不需要编译的额外文件的目录下文件构建

建立 build 任务，用 parallel 并行执行任务模块，同时进行 extra, 和compile的任务

const { src, dest, parallel } = require('gulp')
const sass = require('gulp-sass') // 编译 sass 文件
const babel = require('gulp-babel') // 使用babel转换es6语法
const swig= require('gulp-swig') // 页面模板引擎转换插件
const imagemin= require('gulp-imagemin')


// 准备页面模板引擎渲染数据
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()
}


// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


// 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'))
}


const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}


const compile = parallel(style, script, page, image, font)

const build = parallel(compile, extra)


module.exports = {
  build
}

 

文件清除

每次构建项目前，需要先对dist目录进行清除

安装清除插件   yarn add del --dev

由于项目构建前应先清除原有目录文件，所以用 series 串行任务模块，先执行 clean,再执行 build

const { src, dest, parallel, series } = require('gulp')
const del = require('del')


const sass = require('gulp-sass') // 编译 sass 文件
const babel = require('gulp-babel') // 使用babel转换es6语法
const swig= require('gulp-swig') // 页面模板引擎转换插件
const imagemin= require('gulp-imagemin')


// 准备页面模板引擎渲染数据
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'])
}

// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


// 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(swig({ data }))
    .pipe(dest('dist'))
}


const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}


const compile = parallel(style, script, page, image, font)

const build = series(clean, parallel(compile, extra))


module.exports = {
  build
}

 

自动加载插件

安装 gulp-load-plugins 可以使用 一些gulp插件，这样就不用再单独安装很多插件  yarn add gulp-load-plugins --dev

const { src, dest, parallel, series } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()


// const sass = require('gulp-sass') // 编译 sass 文件
// const babel = require('gulp-babel') // 使用babel转换es6语法
// const swig= require('gulp-swig') // 页面模板引擎转换插件
// const imagemin= require('gulp-imagemin') // 图片压缩插件 对字体下的svg文件也可以压缩


// 准备页面模板引擎渲染数据
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'])
}

// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(plugins.sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


// 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data }))
    .pipe(dest('dist'))
}


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'))
}


const compile = parallel(style, script, page, image, font)

const build = series(clean, parallel(compile, extra))


module.exports = {
  build
}

 

热更新开发服务器

安装开发服务器模块，支持代码修改后，自动更新到浏览器中，  yarn add browser-sync --dev

const { src, dest, parallel, series } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')

const plugins = loadPlugins()
const bs = browserSync.create()


// const sass = require('gulp-sass') // 编译 sass 文件
// const babel = require('gulp-babel') // 使用babel转换es6语法
// const swig= require('gulp-swig') // 页面模板引擎转换插件
// const imagemin= require('gulp-imagemin') // 图片压缩插件 对字体下的svg文件也可以压缩


// 准备页面模板引擎渲染数据
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'])
}

// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(plugins.sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


// 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data }))
    .pipe(dest('dist'))
}


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'))
}

const serve = () => {
  bs.init({
    notify: false,  // 关闭提示，以免影响样式调试
    port: 2080, // 默认端口 3000
    // open: false, // 自动打开浏览器设置，默认是 true
    // files: 'dist/**', // 设置让 browser-sync 监听的文件
    server: {
      baseDir: 'dist',
      routes: {  // routes 会先于 baseDir执行
        '/node_modules': 'node_modules'
      }
    }
  })
}


const compile = parallel(style, script, page, image, font)

const build = series(clean, parallel(compile, extra))


module.exports = {
  build,
  serve
}

 

监视变化

引入 gulp 的 watch 模块

在 serve 任务中加入 watch 任务

const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')

const plugins = loadPlugins()
const bs = browserSync.create()


// const sass = require('gulp-sass') // 编译 sass 文件
// const babel = require('gulp-babel') // 使用babel转换es6语法
// const swig= require('gulp-swig') // 页面模板引擎转换插件
// const imagemin= require('gulp-imagemin') // 图片压缩插件 对字体下的svg文件也可以压缩


// 准备页面模板引擎渲染数据
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'])
}

// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(plugins.sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
}


// defaults: { cache: false } 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('dist'))
}


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'))
}

const serve = () => {
  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)
  bs.init({
    notify: false,  // 关闭提示，以免影响样式调试
    port: 2080, // 默认端口 3000
    // open: false, // 自动打开浏览器设置，默认是 true
    // files: 'dist/**', // 设置让 browser-sync 监听的文件
    server: {
      baseDir: 'dist',
      routes: {  // routes 会先于 baseDir执行
        '/node_modules': 'node_modules'
      }
    }
  })
}


const compile = parallel(style, script, page, image, font)

const build = series(clean, parallel(compile, extra))


module.exports = {
  build,
  serve
}

 

构建优化

image,font,public 下的文件不会频繁改动，因此无需在开发的时候实时监听，因为监视更多的文件意味着更大的开销

将 image,font 任务从 compile 任务中取出，在开发阶段中不做编译, 

将image, font 任务放入 build 任务中

增加 develop 任务，使用 series串行模块，先执行 compile 任务，再执行 serve 任务

给 style, script, html 任务 增加 bs.reload({ stream: true })，使得浏览器监听到修改的变化并更新，

stream: true：以流的方式推送给浏览器

const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')

const plugins = loadPlugins()
const bs = browserSync.create()


// const sass = require('gulp-sass') // 编译 sass 文件
// const babel = require('gulp-babel') // 使用babel转换es6语法
// const swig= require('gulp-swig') // 页面模板引擎转换插件
// const imagemin= require('gulp-imagemin') // 图片压缩插件 对字体下的svg文件也可以压缩


// 准备页面模板引擎渲染数据
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'])
}

// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(plugins.sass({ outputStyle: 'expanded' })) 
    .pipe(dest('dist'))
    .pipe(bs.reload({ stream: true }))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('dist'))
    .pipe(bs.reload({ stream: true }))
}


// defaults: { cache: false } 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('dist'))
    .pipe(bs.reload({ stream: true }))
}


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'))
}

const serve = () => {
  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)


  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload) // 监视这三种文件的变化，当有变化时，浏览器自动更新

  bs.init({
    notify: false,  // 关闭提示，以免影响样式调试
    port: 2080, // 默认端口 3000
    // open: false, // 自动打开浏览器设置，默认是 true
    // files: 'dist/**', // 设置让 browser-sync 监听的文件
    server: {
      baseDir: ['temp', 'src', 'public'], // 会从第一个目录寻找，如果没有寻找到，以此向后寻找，image,font在开发阶段就直接用原文件，节省构建速度
      routes: {  // routes 会先于 baseDir执行
        '/node_modules': 'node_modules'
      }
    }
  })
}


const compile = parallel(style, script, page)

const build = series(clean, parallel(compile, extra, image, font))

const develop = series(compile, serve)


module.exports = {
  build,
  develop
}

 

引用文件处理

安装引用依赖插件  yarn add gulp-useref --dev

添加 useref 任务,会将引用的外部依赖文件 写入新建的文件中

要对这些新建的文件进行压缩

安装 html,js,css 的压缩插件   yarn add gulp-htmlmin gulp-uglify gulp-css-clean --dev

安装 gulp-if 插件，针对文件的读取流分别做不同的操作  yarn add gulp-if --dev

将压缩后的文件先放在 release 目录里，防止读取文件在一个目录下会产生冲突

因为多了 release 目录，之前的构建目录需要做调整

将 style, script, page 这三个在开发阶段需要构建的任务，在构建后放入 temp 目录

相应的 useref 任务改成从 temp 目录中读取文件

将 useref 任务 放入 build 任务, compile 任务执行完后，才能执行 useref 任务

const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')

const plugins = loadPlugins()
const bs = browserSync.create()


// const sass = require('gulp-sass') // 编译 sass 文件
// const babel = require('gulp-babel') // 使用babel转换es6语法
// const swig= require('gulp-swig') // 页面模板引擎转换插件
// const imagemin= require('gulp-imagemin') // 图片压缩插件 对字体下的svg文件也可以压缩


// 准备页面模板引擎渲染数据
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'])
}

// sass文件编译后，样式尾部 } 会跟在最后一个属性后面，
// 设置 outputStyle: 'expanded'，可以让 尾部 }换行
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' }) // base：保留基准路径
    .pipe(plugins.sass({ outputStyle: 'expanded' })) 
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}


const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}


// defaults: { cache: false } 防止模板缓存导致页面不能及时更新
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}


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'))
}

const serve = () => {
  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)


  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload) // 监视这三种文件的变化，当有变化时，浏览器自动更新

  bs.init({
    notify: false,  // 关闭提示，以免影响样式调试
    port: 2080, // 默认端口 3000
    // open: false, // 自动打开浏览器设置，默认是 true
    // files: 'dist/**', // 设置让 browser-sync 监听的文件
    server: {
      baseDir: ['temp', 'src', 'public'], // 会从第一个目录寻找，如果没有寻找到，以此向后寻找，image,font在开发阶段就直接用原文件，节省构建速度
      routes: {  // routes 会先于 baseDir执行
        '/node_modules': 'node_modules'
      }
    }
  })
}


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, // 压缩css代码
      minifyJS: true // 压缩js代码
    })))
    .pipe(dest('dist')) // 将压缩后的文件先放在 release 目录里
}


const compile = parallel(style, script, page)

const build = series(clean, parallel(series(compile, useref), extra, image, font))

const develop = series(compile, serve)


module.exports = {
  build,
  develop
}

 

配置启动命令

将 build, develop启动命令配置到 package.json 文件中去

"scripts": {
    "build": "gulp build",
    "develop": "gulp develop"
 }

 

发布并使用模块

发布模块

yarn publish --registry https://registry.yarnpkg.com

 

 

1

沿着路走到底
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ruoyi框架学习--Vue前端配置文件详解
qq_39367410的博客
09-16 3760
vue核心配置文件 main.js vue.config.js package.json 详解
webpack 编译stylus_Webpack Loader
weixin_29261711的博客
12-24 311
一.Webpack与LoaderWebpack希望对所有依赖资源一视同仁，抹平针对不同类型资源的处理差异：Unlike most bundlers out there, the motivation behind Webpack is to gather all your dependencies (not just code, but other assets as well) and gene...
vue-element项目打包后偶尔出现icon乱码，Using / for division is deprecated and will be removed in Dart Sass 2.0.0
ZMJ_QQ的博客
09-05 1878
vue-element项目打包后上线偶尔出现icon图标乱码，DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.报错
sass 学习
qq_35792483的博客
10-23 313
搭建环境 一、安装ruby http://rubyinstaller.org/downloads（官网） 二、安装sass 1）打开命令终端，输入：gem install sass 2）从http://rubygems.org/gems/sass下载sass安装包，然后在终端输入: “gem install <把下载的安装包拖到这里>” 然后直接额回车即可安装成功。 ...
Webpack 的 sass-loader 在生产模式下最小化 CSS 问题
最新发布
qq_41304029的博客
08-09 854
将mode 改为production模式后，生成的css会被压缩了，但是我并没有引入CssMinimizerPlugin插件，然后我试着将optimization.minimize 设置为false，测试是否为webpack自带的压缩，但是设置为false还是可以进行压缩，所以我觉得应该是某个loader 进行了压缩，另外提醒一个：css 后缀和 scss 后缀的可以统一用跟scss 一样的loader，处理scss的也可以处理css。然后我试了引入scss 和css发现是scss-loader的问题。
vue-cli 3中dart-sass替换node-sass，element ui icon图标乱码问题
拿回忆下酒
11-28 1088
使用dart-sass ，element icon图标乱码问题
vue项目打包发布后线上出现icon乱码
juvenile_Li的博客
10-12 1713
打包发布到线上，页面偶发性出现图标乱码问题，再次刷新页面后，又可正常显示
vue、Element-UI 图标偶发性乱码问题解决方案
weixin_42717735的博客
06-08 4216
vue、Element-UI 图标偶发性乱码问题解决方案
gulp-sass设置不同样式风格的输出方法
yezhouyong的专栏
06-11 611
sass最终输出的样式包括下面几种样式风格：嵌套输出方式 nested展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressedsass:123456789101112131415nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }   li { display: inline-blo...
记一些vue使用postcss中遇到的坑o(╯□╰)o
weixin_33912638的博客
11-21 1738
postcss-px2rem在官方文档中说即在css中使用/*no*/时不会将px转换成rem，使用/*px*/时会将css中的px转换成当然baseDpr是可配置的，默认是2，则默认将css中的px按照dpr=2来转换。But......在使用的时候发现我的期望(*^▽^*)border-radius: 4px; border: 1px solid #e7e7e7; [data-dpr="1"...
如何使用Vue原生组件编译应用程序主题？这个工具不要错过
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-20 371
本文主要为大家介绍在使用Kendo UI for Vue控件的过程中如何编译一个应用程序主题，欢迎下载最新版控件体验！
Vue配置文件vue.config.js配置前端代理
qq_45190444的博客
11-17 1867
//将此代码片段命名为 vue.config.js,放在项目根目录即可 //仅需修改target属性要访问的接口IP即可 <br>// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分，具体配置参考文档 module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下，Vue CLI 会假设
使用element-ui 遇到的问题总结（待续...
u014105739的博客
08-18 1058
el-dialog 单独组件：(前提是没有使用新的字段接收value, 直接使用的是prop 里面的默认值value)如果是在close 里面调用 this.$emit('show', false) 点击关闭按钮会报错, 因为el-dialog 源码里面 在close 的时候 会去调用 下面的方法， 会直接修改el-dialog 单独组件的显示值，prop 值 数据流向是单向的，是导致流向冲突，报错,；会有node 版本不兼容问题 (如果升级了node版本，可能会导致node-sass编译报错);....
gulp的基础使用与模块发布
weixin_41962912的博客
12-11 365
文章说明：本文章为拉钩大前端训练营所做笔记和心得，若有不当之处，还望各位指出与教导，谢谢 ! 一、自动化构建 简介: 自动化指的是机器代替手工完成工作，构建可以理解为转换，就是把一个东西转换为另外的一些东西。总的来说自动化构建就是把开发阶段写出来的源代码自动化去转换成生产环境当中可以运行的代码或者程序，这样的转行的过程称为自动化构建工作流，这样做是尽可能让我们脱离运行环境兼容带来的问题。在开发阶段去使用一些提高效率的语法、规范和标准，比如开发网页应用时，可以运用ECMAScript NEXT提...
Sass学习之路(4)——不同样式风格的输出方式
YuuyaRin的博客
12-12 3605
因为每个前端工程师编写代码的风格都不太一样，所以Sass的编译也非常人性化的提供了不同风格的编译方式，主要分为4种。     比如下面这一段Sass代码，我们来看看在不同风格下，会编译成什么样吧： nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-blo
解决dart-sass转义伪元素中的字符集-elementUI字体图标乱码
个人博客
10-19 1739
解决dart-sass转义伪元素中的字符集（elementUI字体图标乱码的问题）一、问题描述二、解决办法1.修改dart-sass配置2.直接使用css 一、问题描述 当我在scss中使用伪元素修改elementUIselect选择框的下拉图标样式时遇到一个问题： 我写的伪类content本地打包之后字符集被转义为明文，但是element原生的样式却没问题 虽然直接发布依然可以显示，但是会偶发的出现乱码。 二、解决办法 在网上查找说是dart-sass在打包过程中会将伪元素content中的内容转义。
大前端【2-1练习】开发脚手架及封装自动化构建工作流
songyy_的博客
02-17 175
1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。 答： 初步认识：所谓工程化是指遵循一定的标准和规范通过工具提高效率的一种手段，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。 解决的问题： （1）重复的机械工作，比如部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器。 （2）团队开发时，很难做到风格统一，保证质量的完成需求开发 （3）部分功能需要等待后端服务接口完成以后才可以进行开发 （4）无法使用模块化或组件
前端工程化之自动化构建
gongye2019的博客
04-05 239
在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化中有关于自动化构建的相关知识，文章有点长，希望对大家有所帮助。每天进步一点点。 一、自动化构建简介 自动化构建就是把我们开发阶段写出来的源代码，自动化的转换成生产环境中可以运行的代码或者程序，这个自动化转换的过程称为自动化构建工作流。 它的作用是尽量脱离运行环境兼容带来的问题，在开发阶段使用一些提高效率的语法，规范和标准，例如，ES6+、Sass、模板引擎等。 二、自动化构建初体验 这里引入 进阶__前端漫漫路 写的 自动化构建 的
ISO 10303-43:2000工业自动化集成资源表达结构标准
43-2000，正式名称为《工业自动化系统和集成：产品数据表示和交换 第43部分 - 集成通用资源：表达结构》（Industrial Automation Systems and Integration - Product Data Representation and Exchange - Part 43: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值