自动化构建

最新推荐文章于 2022-12-27 22:45:43 发布

赤楠曦

最新推荐文章于 2022-12-27 22:45:43 发布

阅读量1k

点赞数

分类专栏：笔记文章标签：前端 gulp 前端框架

本文链接：https://blog.csdn.net/weixin_53800968/article/details/124107090

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

简介

初体验

scss编译

创建sass文件
安装yarn add sass --dev
执行./node_modules/.bin/sass查看帮助信息
执行./node_modules/.bin/sass 输入路劲输出路径

npm Scripts

在package.js文件中添加scripts:'sass 输入路径输出路径'

npm Scripts实现自动化构建最简单的方式

添加一个模块yarn add browser-sync --dev用于启动一个测试服务器运行项目

在package.json中添加serve:"browser-sync ."

scripts中的preserve:'yarn build'在serve之前去执行

为sass命令添加以--watch参数 sass会监听文件的变化自动编译

安装yarn add npm-fun-all --dev模块,同时执行多个命令，防止阻塞

删除preserve:'yarn build'，添加"start :"run-p build serve"同时执行两个命令

常用自动化构建工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmMT6dDj-1649676491570)(自动化构建/image-20220401224729269.png)]

Grunt最早的构建系统

基于磁盘读写构建速度相对较慢

Gulp

基于内存，更受欢迎

FIS

百度开发，绑定功能

Grunt的使用

yarn init
yarn add grunt
在vscode中执行code gruntfile.js创建一个grunt的入口文件

// Grunt 的入口文件
// 用于定义一些需要 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接收一个 grunt 的对象类型的形参
// grunt 对象中提供一些创建任务时会用到的 API

module.exports = grunt => {
  grunt.registerTask('foo', 'a sample task', () => {
    console.log('hello grunt')
  })

  grunt.registerTask('bar', () => {
    console.log('other task')
  })

  // // default 是默认任务名称
  // // 通过 grunt 执行时可以省略
  // grunt.registerTask('default', () => {
  //   console.log('default task')
  // })

  // 第二个参数可以指定此任务的映射任务，
  // 这样执行 default 就相当于执行对应的任务
  // 这里映射的任务会按顺序依次执行，不会同步执行
  grunt.registerTask('default', ['foo', 'bar'])

  // 也可以在任务函数中执行其他任务
  grunt.registerTask('run-other', () => {
    // foo 和 bar 会在当前任务执行完成过后自动依次执行
    grunt.task.run('foo', 'bar')
    console.log('current task runing~')
  })

  // 默认 grunt 采用同步模式编码
  // 如果需要异步可以使用 this.async() 方法创建回调函数
  // grunt.registerTask('async-task', () => {
  //   setTimeout(() => {
  //     console.log('async task working~')
  //   }, 1000)
  // })

  // 由于函数体中需要使用 this，所以这里不能使用箭头函数
  grunt.registerTask('async-task', function () {
    const done = this.async()
    setTimeout(() => {
      console.log('async task working~')
      done()
    }, 1000)
  })
}

通过yarn grunt foo运行入口文件中定义的一些命令

grunt 多目标模式的任务

运行多目标任务yarn grunt 多目标任务名：目标任务

module.exports = grunt=>{
    grunt.initConfig({
        build:{ // 除了option以外其它的键都会成为一个目标任务
            options:{ // 任务的配置选项
                foo:'bar'
            },
            css:{ // 目标中也可以添加option 会将任务的选项覆盖
                options:{
                    foo:'css'
                },
                value:'1'
            },
            js:'2',
        }
    })
    grunt.registerMultiTask('build',function(){
        console.log(this.options())
        console.log(this.target,this.data)
    })
}

Gunt插件的使用

安装yarn add grunt-contrib-clean用于清除开发过程中产生的临时文件

module.exports = grunt=>{
    clean:{
        temp:'temp/app.js', // 清除app.js文件
        temp:'temp/*.tex'// 清除所有的txt文件
        temp:'temp/**'// 清除temp目录下的所有文件
        
    }
    grunt.loadNpmTasks('grunt-contrib-clean')
}

运行yuarn grunt clean

grunt常用插件及总结

sass

yarn add grunt-sass sass --dev

const sass = require('sass')

moudle.exports = grunt =>{
    grunt.initConfig({
        sass:{
            options:{
                surceMap:true,
                implementation:sass
            },
            main:{
                files:{
                    'dist/css/main.css':'src/scss/main.scss'
                }
            },
        }
    })
    
    grunt.loadNpmTasks('grunt-sass')// 载入
}

执行yarn grunt sass

babel

yarn add grunt-babel @babel/core @babel/preset-env --dev

yarn add load-grunt-tasks --dev用于减少loadNpmTasks的使用

const sass = require('sass')
const loadGrunTasks = require('load-grunt-tasks')
moudle.exports = grunt =>{
    grunt.initConfig({
        sass:{
            options:{
                surceMap:true,
                implementation:sass
            },
            main:{
                files:{
                    'dist/css/main.css':'src/scss/main.scss'
                }
            },
        },
        bable:{
            options:{
                surceMap:true,
                presets:['@babel/preset-env']
            }
            main:{
                files:{"dist/js/app.css":'src/js/app.js'}
            },
            
        }
    })
    
    // grunt.loadNpmTasks('grunt-sass')// 载入
    loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务
}

grunt-contrib-watch

yarn add grunt-contrib-watch修改完成文件自动编译文件

const sass = require('sass')
const loadGrunTasks = require('load-grunt-tasks')
moudle.exports = grunt =>{
    grunt.initConfig({
        sass:{
            options:{
                surceMap:true,
                implementation:sass
            },
            main:{
                files:{
                    'dist/css/main.css':'src/scss/main.scss'
                }
            },
        },
        bable:{
            options:{
                surceMap:true,
                presets:['@babel/preset-env']
            },
            main:{
                files:{"dist/js/app.css":'src/js/app.js'}
            },
        },
        watch:{
            js:{
                files:['src/js/*.js'],
                tasks:['babel'],
            },
            css:{
                files:['src/scss/*.scss'],
                tasks:['sass'],
            },
        },
    })
    
    // grunt.loadNpmTasks('grunt-sass')// 载入
    loadGruntTasks(grunt) // 自动加载所有的 grunt 插件中的任务
    // watch 第一次文件不该变就不会执行，添加一个默认任务
    grunt.registerTask('default',['sass',"bable",'watch'])
}

Gulp的基本使用

yarn init
yarn add gulp --dev
code gulpfile.js

// gulp 的入口文件
exports.foo = done => {  // 异步任务
    console.log('foo task working~')
    done() // 标记任务的完成
}

exports.default = done =>{  // 默认任务
    console.log('default task working~')
    done()
}

// 4.0以前

const gulp = require('gulp')

gulp.task('bar',done=>{  // 不推荐向后兼容
    console.log('bar working~')
    done()
})

gulp的组合任务

const {series,parallel} = require('gulp')
const task1 = done =>{
    setTimeout(()=>{
        consotle.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异步任务的三种方式

exports.callback = done =>{
	console.log('callback task~')
    done()
}

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

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

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

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

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

exports.stream = ()=>{
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStream)
    return readStream
}

exports.stream=()=>{ // 模拟gulp结束任务的操作
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStream)
    readStream.on('end',()=>{
        done()
    })
}

Gulp构建过程核心工作原理

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


exports.default = ()=>{
    const read = fs.createReadStream('normalize.css')
    const write = fs .createWriteStream('normalize.min.css')
    // 文件转换流
    const transform = new Transform({
        transform:(chunk,encoding,callback) =>{
            // 核心转换过程实现
            // chunk => 读取流中读取到的内容（Buffer）
            const input = chunk.toString()
            // 替换空白，替换css注释
            const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')
            // 错误优先的函数没有错误传入null
            callback(null,output)
        }
    })
    read.pip(transform) // 转换
        .pipe(write) // 写入
    return read
}

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

const { src, dest } = require('gulp')
// 提供压缩css代码的转换流
const cleanCSS = require('gulp-clean-css')
// 重命名
const rename = require('gulp-rename')

exports.default = () => {
  return src('src/*.css') // 创建读取流 通配符匹配所有css文件
    .pipe(cleanCSS()) // 压缩css代码的转换流
    .pipe(rename({ extname: '.min.css' })) // 重命名
    .pipe(dest('dist')) // dist('写入目标目录')创建写入流
}

Gulp案例-样式编译

自动化构建网页应用

yarn add gulp --dev

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

const style = () =>{
    return src('src/assets/styles/*.scss',{base:'src'}) // 创建一个读取流
    /*
    	base:将src下的目录输出
    */
    .pipe(dest('dist'))// dest创建写入流，pipe将读取到的内容写入dist目录下
}

module.exports={
    style,
}

yarn add gulp-sass --dev

const {src,dest} = require('gulp')
const sass = require('gulp-sass')

const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

module.exports={
    style,
}

脚本文件es6的编译安装yarn add gulp-babel --dev

const {src,dest} = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
// gulp-babel 插件不会想gulp-sass插件一样将它所依赖的子插件自动安装，需要手动安装 @babel/core @babel/preset-env dev
const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

const script = ()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    	.pipe(babel({presets:['@babel/preset-env']})) // 如果不配置presets转换将会没有效果
    	.pipe(dest('dist'))
}

module.exports={
    style,
    script,
}

页面模板(html)编译安装模板引擎（gulp-swig）yarn add gulp-swig --dev

const {src,dest,parallel} = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
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()
}

// gulp-babel 插件不会想gulp-sass插件一样将它所依赖的子插件自动安装，需要手动安装 @babel/core @babel/preset-env dev
const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

const script = ()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    	.pipe(babel({presets:['@babel/preset-env']})) // 如果不配置presets转换将会没有效果
    	.pipe(dest('dist'))
}

const page = ()=>{
    return src('src/**/*.html') // 'src/**/*.html' 如果src的其它子目录中也有html 文件
    	.pipe(swig({data}))
    	.pipe(dest('dist'))
}

const compile = parallel(style,script,page)

module.exports={
    compile
}

图片和字体文件转换，安装yarn add gulp-imagemin --dev

const {src,dest,parallel} = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
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()
}

// gulp-babel 插件不会想gulp-sass插件一样将它所依赖的子插件自动安装，需要手动安装 @babel/core @babel/preset-env dev
const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

const script = ()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    	.pipe(babel({presets:['@babel/preset-env']})) // 如果不配置presets转换将会没有效果
    	.pipe(dest('dist'))
}

const page = ()=>{
    return src('src/**/*.html') // 'src/**/*.html' 如果src的其它子目录中也有html 文件
    	.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,
}

其他文件及文件清除

const {src,dest,parallel} = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
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()
}

// gulp-babel 插件不会想gulp-sass插件一样将它所依赖的子插件自动安装，需要手动安装 @babel/core @babel/preset-env dev
const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

const script = ()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    	.pipe(babel({presets:['@babel/preset-env']})) // 如果不配置presets转换将会没有效果
    	.pipe(dest('dist'))
}

const page = ()=>{
    return src('src/**/*.html') // 'src/**/*.html' 如果src的其它子目录中也有html 文件
    	.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,sextra)


module.exports={
    compile,
    build,
}

其它文件的清除yarn add del --dev其他文件的删除

const {src,dest,parallel,series} = require('gulp')
const sass = require('gulp-sass')
const babel = require('gulp-babel')
const swig = require('gulp-swig')
const imagemin = require('gulp-imagemin')

const del = require('del') // 不是gulp的插件，但是可以在gulp中使用

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

// gulp-babel 插件不会想gulp-sass插件一样将它所依赖的子插件自动安装，需要手动安装 @babel/core @babel/preset-env dev
const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

const script = ()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    	.pipe(babel({presets:['@babel/preset-env']})) // 如果不配置presets转换将会没有效果
    	.pipe(dest('dist'))
}

const page = ()=>{
    return src('src/**/*.html') // 'src/**/*.html' 如果src的其它子目录中也有html 文件
    	.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={
    compile,
    build,
}

Gulp自动化构键案例

自动加载插件

安装yarn add gulp-load-plugins --dev不用在手动的requiem插件

const {src,dest,parallel,series} = require('gulp')
// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')

const del = require('del') // 不是gulp的插件，但是可以在gulp中使用

const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins() // 不在手动引入插件，自动引入插件


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

// gulp-babel 插件不会想gulp-sass插件一样将它所依赖的子插件自动安装，需要手动安装 @babel/core @babel/preset-env dev
const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(plugins.sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

const script = ()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    	.pipe(plugins.babel({presets:['@babel/preset-env']})) // 如果不配置presets转换将会没有效果
    	.pipe(dest('dist'))
}

const page = ()=>{
    return src('src/**/*.html') // 'src/**/*.html' 如果src的其它子目录中也有html 文件
    	.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={
    compile,
    build,
}

开发服务器

热更新开发服务器，安装yarn add browser-sync --dev

const { src, dest, parallel, series, watch } = require('gulp')
// const sass = require('gulp-sass')
// const babel = require('gulp-babel')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')

const del = require('del') // 不是gulp的插件，但是可以在gulp中使用
const browserSync = require('browser-sync') // 引入开发者服务器
const bs = browserSync.create() // 创建一个服务器
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins() // 不再手动引入插件，自动引入插件

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

// gulp-babel 插件不会想gulp-sass插件一样将它所依赖的子插件自动安装，需要手动安装 @babel/core @babel/preset-env dev
const style = () =>{
    // 创建一个读取流 base:将src下的目录输出
    return src('src/assets/styles/*.scss',{base:'src'}) 
    // 编译sass _XXX.sass 的文件不会被编译 参数设置完全展开
    .pipe(plugins.sass({outputStyle:'expanded'}))
    // dest创建写入流，pipe将读取到的内容写入dist目录下
    .pipe(dest('dist'))
}

const script = ()=>{
    return src('src/assets/scripts/*.js',{base:'src'})
    	.pipe(plugins.babel({presets:['@babel/preset-env']})) // 如果不配置presets转换将会没有效果
    	.pipe(dest('dist'))
}

const page = ()=>{
    return src('src/*.html') // 'src/**/*.html' 如果src的其它子目录中也有html 文件
    	.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)// 监视其它文件
  watch(['src/assets/images/**','src/assets/fonts/**','src/**/*.html'],bs.reload) // reload 重新发起请求
    bs.init({
      notify:false,// 关闭连接提示
      port:2080,// 指定端口号
      // open:false,// 是否自动打开浏览器
      files:'dist/**',// 监听指定目录下的文件改变自动刷新浏览器
      server:{
          baseDir:['dist','src','public'], // 服务器的基础路径 如果找不到会继续请求后续地址
        	routes:{ // 配置路由先于dist ，网络请求会先去routes的配置项下寻找
                '/node_modules':'node_modules'// 解决node_modules资源找不到的问题
            }
        }
    })
}

const compile = parallel(style,script,page,)
const build = series(clean, parallel(compile,extra,page,image,font,)) // 上线之前
const develop = series(compile,serve)


module.exports={
    compile,
    build,
    develop,
}

ueref文件引用处理

安装yarn add gulp-useref --dev

const useref = ()=>{
    return src('dist/*.html',{base:'dist'})
    	.pipe(plugins.useref({searchPath:['dist','.']}))
    	.pipe(dest('dist'))
}

分别压缩HTML、CSS、Javascript

安装yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev 用于文件压缩

安装yarn add gulp-if --dev用于判断文件类型

const useref = ()=>{
    return src('dist/*.html',{base:'dist'})
    	.pipe(plugins.if(/\.js$/,plugins.uglify()))
}

gulp补充

封装自动化构建工作流

创建一个模块-发布一个模块-使用一个模块

提取一个可复用的自动化构建工作流

在gitree中新建一个仓库``

解决模块中的问题

器
files:‘dist/**’,// 监听指定目录下的文件改变自动刷新浏览器
server:{
baseDir:[‘dist’,‘src’,‘public’], // 服务器的基础路径如果找不到会继续请求后续地址
routes:{ // 配置路由先于dist ，网络请求会先去routes的配置项下寻找
‘/node_modules’:‘node_modules’// 解决node_modules资源找不到的问题
}
}
})
}

const compile = parallel(style,script,page,)
const build = series(clean, parallel(compile,extra,page,image,font,)) // 上线之前
const develop = series(compile,serve)

module.exports={
compile,
build,
develop,
}


## ueref文件引用处理

安装`yarn add gulp-useref --dev`

```js
const useref = ()=>{
    return src('dist/*.html',{base:'dist'})
    	.pipe(plugins.useref({searchPath:['dist','.']}))
    	.pipe(dest('dist'))
}