Part2-1 gulp自动化构建

Posted 2021-07-11 沿着路走到底

整体思路： 

最终创建二个大任务： develop、build ，分别满足 开发时 和 上线 打包的需求。

在根目录中创建 pages.config.js 文件，准备好 swig 模板引擎需要的数据

一、先创建 develop、build 都需要的任务。

1、无论是 develop、build, 我们都希望在项目构建前能先清空原目录中的文件，再进行构建。创建 clean 任务

2、develop、build 都会对 html、js、css 做构建，创建 style、script、page 任务

3、创建 compile 任务，将 style、script、page 用 parallel 模块 并行执行

4、develop、build 用 series 模块 添加 clean、 compile 任务串行执行，clean任务执行完后再执行 compile 命令

const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')
const data = require('./pages.config.js')
 
const plugins = loadPlugins()
const bs = browserSync.create()

const clean = () => {
  return del(['dist', 'temp'])
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .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 }))
}
 
 
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

const compile = parallel(style, script, page)
 
const build = series(clean, compile)
 
const develop = series(clean, compile)
 
 
module.exports = {
  build,
  develop
}

 

二、添加开发时需要的任务

添加 serve 任务，对开发过程中，修改的文件进行监听，并使浏览器刷新

将 serve 任务添加到 develop 任务里，使用 series 模块，先执行 clean 任务，执行完clean任务，执行compile任务，执行完 compile 任务，再执行 serve 任务

const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')
const data = require('./pages.config.js')
 
const plugins = loadPlugins()
const bs = browserSync.create()

const clean = () => {
  return del(['dist', 'temp'])
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .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 }))
}
 
 
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

const serve = () => {
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
 
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)
 
  bs.init({
    notify: false,
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

const compile = parallel(style, script, page)
 
const build = series(clean, compile)
 
const develop = series(clean, compile, serve)
 
module.exports = {
  build,
  develop
}

 

三、添加上线前打包需要的任务

1、图片、字体、public下的文件由于不常改动，并且只是进行压缩的文件，在开发时没有进行构建，所以需要 build 任务里添加进去。

     创建 image、font、extra任务添加进 build 任务

2、创建 useref 任务，对于 html 里外部引用的文件进行处理，并添加进 build 任务里

const { src, dest, parallel, series, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync')
const data = require('./pages.config.js')
 
const plugins = loadPlugins()
const bs = browserSync.create()

const clean = () => {
  return del(['dist', 'temp'])
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })
    .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 }))
}
 
 
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

const serve = () => {
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
 
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)
 
  bs.init({
    notify: false,
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

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 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(clean, compile, serve)
 
module.exports = {
  build,
  develop
}

 

四、在 package.json 里添加启动命令

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

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

 

 

 

 

 

1