前端自动化构建

最新推荐文章于 2024-07-10 15:43:48 发布
最新推荐文章于 2024-07-10 15:43:48 发布
阅读量341 收藏
点赞数
分类专栏： lagou 基础知识 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenacxz/article/details/114580728
版权

前端自动化构建

在这里插入图片描述
自动化转换工作流，作用是为了脱离运行环境兼容带来的问题
开发阶段使用一些提高效率的语法、规范和标准
常用的自动化构建工具，
grunt gulp fis

Grunt

基本使用

mkdir sample-grunt
sudo yarn init --yes
sudo yarn link
新建入口文件gruntfile.js

//grunt的入口文件，用于定义一些要grunt自动执行的任务
//需要导出一个函数,此函数接受一个形参，内部提供一些创建任务时需要的API
module.exports = grunt => {
    //注册任务   指定任务名字，指定任务函数，任务发生时自动执行的函数
    //yarn grunt foo 
    grunt.registerTask('foo', ()=>{
        console.log('hello grunt')
    })
    //yarn grunt --help获取grunt的帮助信息 yarn grunt bar 
    grunt.registerTask('bar', '任务描述', ()=>{
        console.log('hello grunt')
    })
    //yarn grunt
    // grunt.registerTask('default', ()=>{
    //     console.log('自动调用default')
    // })
    //yarn grunt
    grunt.registerTask('default', ['foo', 'bar'])
    //grunt对异步任务的支持,默认支持同步模式
    // grunt.registerTask('async-task', ()=>{
    //     setTimeout(()=>{
    //         console.log('async task work')
    //     }, 1000)
    // })
    grunt.registerTask('async-task', function(){
        const done = this.async()
        setTimeout(()=>{
            console.log('async task work')
            done()
        }, 1000)
    })
}

Grunt标记任务失败

//grunt的入口文件，用于定义一些要grunt自动执行的任务
//需要导出一个函数,此函数接受一个形参，内部提供一些创建任务时需要的API
module.exports = grunt => {
    grunt.registerTask('bad', '任务失败', ()=>{
        console.log('grunt bad')
        return false
    })
    //注册任务   指定任务名字，指定任务函数，任务发生时自动执行的函数
    //yarn grunt foo 
    grunt.registerTask('foo', ()=>{
        console.log('hello grunt')
    })
    //yarn grunt --help获取grunt的帮助信息 yarn grunt bar 
    grunt.registerTask('bar', '任务描述', ()=>{
        console.log('hello grunt')
    })
    //yarn grunt   bar任务不会被执行
    //yarn grunt --force会被强制执行
    grunt.registerTask('default', ['foo', 'bad', 'bar'])
    //yarn grunt async-bad异步执行抛出错误，标记此任务为失败的任务
    grunt.registerTask('async-bad', function(){
        const done = this.async()
        setTimeout(()=>{
            console.log('async task work')
            done(false)
        }, 1000)
    })
}

Grunt的配置选项方法

//grunt的入口文件，用于定义一些要grunt自动执行的任务
//需要导出一个函数,此函数接受一个形参，内部提供一些创建任务时需要的API
module.exports = grunt => {
    // grunt.initConfig({
    //     foo:'bar'
    // })
    grunt.initConfig({
        foo:{
            bar:'123'
        }
    })
    grunt.registerTask('foo', ()=>{
        console.log(grunt.config('foo.bar'))
    })
}

Grunt多目标任务

module.exports = grunt => {
    //yarn grunt build
    //yarn grunt build:css
    grunt.initConfig({
        build:{
            options:{
                foo:'bar',
            },
            css:{
                options:{
                    foo:'baz'
                }
            },
            js:'2'
        }
    })
    //多目标模式，可以将任务根据配置形成多个子任务
    grunt.registerMultiTask('build', function() {
        console.log(this.options())
        console.log(`target:${this.target}, data:${this.data}`)
    })
}

在这里插入图片描述

Grunt插件的使用

sudo yarn add grunt-contrib-clean
yarn grunt clean 删除temp下对应的文件

module.exports = grunt => {
    grunt.initConfig({
        clean:{
            temp:'temp/*.txt'
        }
    })
    grunt.loadNpmTasks('grunt-contrib-clean')
}

Grunt常用的插件以及总结

sudo yarn add grunt-sass sass -dev
yarn grunt sass
// 核心模块 预设
sudo yarn add grunt-babel @babel/core @babel/preset-env --dev
yarn grunt babel
sudo yarn grunt-contrib-watch --dev
目标文件发生变化，触发监听
yarn grunt watch

const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt => {
    grunt.initConfig({
        sass:{
            options:{
                //调试配置
                sourceMap:true,
                implementation: sass
            },
            main: {
                files: {
                    //目标文件路径：当前文件路径
                    'dist/css/main.css': 'src/scss/main.scss'
                }
            }
        },
        babel:{
            options:{
                sourceMap:true,
                presets:['@babel/preset-env']
            },
            main: {
                files: {
                    //目标文件路径：当前文件路径
                    'dist/js/app.js': 'src/js/app.js'
                }
            }
        },
        // sudo yarn grunt watch su当下面的文件内容发生变化触发
        watch:{
            js:{
                files:['src/js/*.js'],
                tasks:['babel']
            },
            css:{
                files:['src/scss/*.scss'],
                tasks:['sass']
            },
        }
        
    })
    //当模块变多时，loadNpmTasks也会被多次使用，为了减少使用，
    //sudo yarn add load-grunt-tasks --dev
    // grunt.loadNpmTasks('grunt-sass')
    loadGruntTasks(grunt)//自动加载所有grunt插件中的任务
    //一开始为了避免watch不执行
    grunt.registerTask('default', ['sass', 'babel', 'watch'])
}

Gulp

Gulp的基本使用

mkdir sample-gulp
sudo yarn init
sudo yarn add gulp --dev
新建入口文件gulpfile.js

//gulp的入口文件
//yarn gulp foo
exports.foo = done => { 
    console.log('foo task')
    done()
}
//yarn gulp default
exports.default = done => { 
    console.log('default task')
    done()
}
//gulpd 4.0之前使用
//yarn grunt bar
const gulp = require('gulp')
gulp.task('bar', done => {
    console.log('bar task')
    done()
})

Gulp的组合任务

//创建并行任务和串行任务
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)
    
}
//yarn grunt foo task1->task2->task3
exports.foo = series(task1, task2, task3)
//yarn grunt bar 会一起执行 比如说css和js编译   部署时
exports.bar = parallel(task1, task2, task3)

Gulp中的异步任务的三种方式

//创建并行任务和串行任务
exports.callback = done=>{
    console.log('callback task')
    done()
}

exports.callback_error = done=>{
    console.log('callback_error task')
    done(new Error('task failed'))
    //当有报错时后续的任务不会被执行

}

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

exports.Promise_error = done=>{
    console.log('promise_error task')
    return Promise.reject(new Error('task failed'))
}
//处理异步的方式
const timeout = time =>{
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}
exports.async= async()=>{
    await(1000)
    console.log('async task')
}
//最常用的饿处理异步的方式，stream
const  fs = require('fs')
// exports.stream=()=>{
//     const readStream = fs.createReadStream('package.json')
//     const writeStream = fs.createWriteStream('temp.txt')
//     readStream.pipe(writeStream)
//     return readStream
// }
//模拟gulp中结束stream事件
exports.stream = done =>{
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStream)
    readStream.on('end', ()=>{
        done()
    })
}

构建过程核心的工作原理

将文件读出来写入到另外一个位置
在这里插入图片描述
The streaming build system

//最常用的饿处理异步的方式，stream
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()
            const output = input.replace(/\s+/g, '').repalce(/\/\*.+?\*\//g, '')
            callback(null, output)
        }
    })
    //把读取的文件流写入文件流
    read.pipe(transform)//转换
    .pipe(write)//写入

    return read
}

Gulp

文件操作API+插件的使用
sudo yarn add gulp-clean-css
sudo yarn add gulp-rename

//最常用的饿处理异步的方式，stream
const {src, dest} = require('gulp')
const cleanCss = require('gulp-clean-css')
const reName = require('gulp-rename') 
exports.default = ()=>{
    //src转换流，dest写入流    
    return src('src/*.css')
    .pipe(cleanCss())
    .pipe(reName({
        extname:'.min.css'
    }))
    .pipe(dest('dist'))
}

Gulp案例-样式编译

sudo yarn add gulp --dev
sudo yarn add gulp-sass --dev
yarn gulp style

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

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(sass())
  .pipe(dest('dist'))
}

module.exports={
  style
}

脚本编译

sudo yarn add gulp-babel @babel/core @babel/preset-env --dev
yarn gulp script

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

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}

module.exports={
  style,
  script
}

页面模版编译

sudo yarn add gulp-swig --dev
yarn gulp page
yarn gulp compile

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

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入html
  .pipe(swig({data }))
  .pipe(dest('dist'))
}
const compile = parallel(style, script, page)
module.exports={
  compile
}

图片和文字文件转换

sudo yarn add gulp-imagemin --dev
yarn gulp 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()
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入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
}

其他文件及文件清除

//自动帮我删除指定文件
sudo yarn add del --dev

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

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

const clean =() => {
  //存放任意的文件路径
  return delete(['dist'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入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
}

自动加载插件

sudo yarn add gulp-load-plugins --dev

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

const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()

// 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()
}

const clean =() => {
  //存放任意的文件路径
  return delete(['dist'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(plugins.sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入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
}

热更新开发服务器

sudo yarn add browser-sync --dev
支持代码修改后自动热更新到浏览器中
只能修改dist文件夹下的文件浏览器发生修改
yarn gulp serve

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

const loadPlugins = require('gulp-load-plugins')
//自动创建一个开发服务器
const plugins = loadPlugins()

const browerSync = require('browser-sync')
const bs = browerSync.create()
// 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()
}

const clean =() => {
  //存放任意的文件路径
  return delet(['dist'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(plugins.sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入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 serve = () =>{
  //初始化相关配置
  bs.init({
   
    //提示
    notify:false,
    //端口号
    // port:2080,
    //是否启动点额时候打开浏览器
    //browser-sync路径启动监听的通配符
    files:'dist/**',
    server: {
       //网页根目录
      baseDir: 'dist',
      //特殊路由，将目标模版指定到对应的配置里去
      
      routes:{
        '/node_modules': 'node_modules'
      }
    }
  })
}
const compile = parallel(style, script, page, image, font)
const build  = series(clean, parallel(compile, extra))
module.exports={
  compile,
  build,
  serve
}

监视变化以及构建优化

const {src, dest, parallel, series, watch} = require(‘gulp’)

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

const loadPlugins = require('gulp-load-plugins')
//自动创建一个开发服务器
const plugins = loadPlugins()

const browerSync = require('browser-sync')
const bs = browerSync.create()
// 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()
}

const clean =() => {
  //存放任意的文件路径
  return delet(['dist'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(plugins.sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入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 serve = () =>{
  //文件路径，文件函数
  //源代码修改后自动编译到dist中，同步到浏览器
  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,
    //是否启动点额时候打开浏览器
    //browser-sync路径启动监听的通配符
    files:'dist/**',
    server: {
       //网页根目录
      baseDir:['dist', 'src', 'public'],
      //特殊路由，将目标模版指定到对应的配置里去
      
      routes:{
        '/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={
  clean,
  compile,
  build,
  serve,
  develop
}

useref文件引用处理

//引用关系文件
//引入的node_modules下的从npm引入的一些插件，通过useref压缩合并转换成打包后的dist下的本地文件
sudo yarn add gulp-useref --dev
yarn gulp useref

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

const loadPlugins = require('gulp-load-plugins')
//自动创建一个开发服务器
const plugins = loadPlugins()

const browerSync = require('browser-sync')
const bs = browerSync.create()
// 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()
}

const clean =() => {
  //存放任意的文件路径
  return delet(['dist'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(plugins.sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入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 useref = () =>{
  //把dist文件夹下的html文件做优化操作再转换入到dist文件夹下
  
  return src('dist/*.html', {base:'dist'})
    .pipe(plugins.useref({searchPath:['dist', '.']}))
    .pipe(dest('dist'))
}
const serve = () =>{
  //文件路径，文件函数
  //源代码修改后自动编译到dist中，同步到浏览器
  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,
    //是否启动点额时候打开浏览器
    //browser-sync路径启动监听的通配符
    files:'dist/**',
    server: {
       //网页根目录
      baseDir:['dist', 'src', 'public'],
      //特殊路由，将目标模版指定到对应的配置里去
      
      routes:{
        '/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={
  clean,
  compile,
  build,
  serve,
  develop,
  useref
}

文件压缩

sudo yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
sudo yarn add gulp-if --dev
yarn gulp compile
yarn gulp useref

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

const loadPlugins = require('gulp-load-plugins')
//自动创建一个开发服务器
const plugins = loadPlugins()

const browerSync = require('browser-sync')
const bs = browerSync.create()
// 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()
}

const clean =() => {
  //存放任意的文件路径
  return delet(['dist'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(plugins.sass())
  .pipe(dest('dist'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入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'))
}
//sudo yarn add gulp-useref --dev


const useref = () =>{
  //把dist文件夹下的html文件做优化操作再转换入到dist文件夹下

  return src('dist/*.html', {base:'dist'})
    .pipe(plugins.useref({searchPath:['dist', '.']}))
    //html js css进行代码压缩
    //sudo yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
    //sudo yarn add gulp-if --dev
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhiteSpace:true,
      minifyCSS:true,
      minifyJS:true
    })))
    .pipe(dest('release'))
}
const serve = () =>{
  //文件路径，文件函数
  //源代码修改后自动编译到dist中，同步到浏览器
  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,
    //是否启动点额时候打开浏览器
    //browser-sync路径启动监听的通配符
    files:'dist/**',
    server: {
       //网页根目录
      baseDir:['dist', 'src', 'public'],
      //特殊路由，将目标模版指定到对应的配置里去
      
      routes:{
        '/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={
  clean,
  compile,
  build,
  serve,
  develop,
  useref
}

重新规划构建过程

开发时的编译目录为了避免和上线的构建目录区分，可以新增一个临时目录

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

const loadPlugins = require('gulp-load-plugins')
//自动创建一个开发服务器
const plugins = loadPlugins()

const browerSync = require('browser-sync')
const bs = browerSync.create()
// 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()
}

const clean =() => {
  //存放任意的文件路径
  return delet(['dist', 'temp'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(plugins.sass())
  .pipe(dest('temp'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('temp'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入html
  .pipe(plugins.swig({data }))
  .pipe(dest('temp'))
}
//图片压缩
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'))
}
//sudo yarn add gulp-useref --dev


const useref = () =>{
  //把dist文件夹下的html文件做优化操作再转换入到dist文件夹下

  return src('temp/*.html', {base:'temp'})
    .pipe(plugins.useref({searchPath:['temp', '.']}))
    //html js css进行代码压缩
    //sudo yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
    //sudo yarn add gulp-if --dev
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhiteSpace:true,
      minifyCSS:true,
      minifyJS:true
    })))
    //为了避免文件冲突
    .pipe(dest('release'))
}
const serve = () =>{
  //文件路径，文件函数
  //源代码修改后自动编译到dist中，同步到浏览器
  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,
    //是否启动点额时候打开浏览器
    //browser-sync路径启动监听的通配符
    files:'dist/**',
    server: {
       //网页根目录
      baseDir:['temp', 'src', 'public'],
      //特殊路由，将目标模版指定到对应的配置里去
      
      routes:{
        '/node_modules': 'node_modules'
      }
    }
  })
}
const compile = parallel(style, script, page)
//上线之前执行任务
const build  = series(clean, parallel(series(compile, useref), extra, image, font))
const develop = series(compile, serve)
module.exports={
  clean,
  compile,
  build,
  serve,
  develop,
  useref
}

补充

可以剔出部分导出的插件
将剩余的部分命令放入packag.json
直接使用
yarn clean
yarn build
yarn develop

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

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

const loadPlugins = require('gulp-load-plugins')
//自动创建一个开发服务器
const plugins = loadPlugins()

const browerSync = require('browser-sync')
const bs = browerSync.create()
// 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()
}

const clean =() => {
  //存放任意的文件路径
  return delet(['dist', 'temp'])
}

const style = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/styles/*.scss', {base:'src'})
  .pipe(plugins.sass())
  .pipe(dest('temp'))
}
const script = ()=>{
  //_开头的scss文件不会被编译
  return src('src/assets/scripts/*.js', {base:'src'})
  //.pipe(babel()) babel只是一个默认的转换平台，需要通过内部的插件转换成想要的代码
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('temp'))
}
const page = ()=>{
  return src('src/*.html', {base:'src'})
  //data作为动态数据转换进入html
  .pipe(plugins.swig({data }))
  .pipe(dest('temp'))
}
//图片压缩
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'))
}
//sudo yarn add gulp-useref --dev


const useref = () =>{
  //把dist文件夹下的html文件做优化操作再转换入到dist文件夹下

  return src('temp/*.html', {base:'temp'})
    .pipe(plugins.useref({searchPath:['temp', '.']}))
    //html js css进行代码压缩
    //sudo yarn add gulp-htmlmin gulp-uglify gulp-clean-css --dev
    //sudo yarn add gulp-if --dev
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhiteSpace:true,
      minifyCSS:true,
      minifyJS:true
    })))
    //为了避免文件冲突
    .pipe(dest('release'))
}
const serve = () =>{
  //文件路径，文件函数
  //源代码修改后自动编译到dist中，同步到浏览器
  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,
    //是否启动点额时候打开浏览器
    //browser-sync路径启动监听的通配符
    files:'dist/**',
    server: {
       //网页根目录
      baseDir:['temp', 'src', 'public'],
      //特殊路由，将目标模版指定到对应的配置里去
      
      routes:{
        '/node_modules': 'node_modules'
      }
    }
  })
}
const compile = parallel(style, script, page)
//上线之前执行任务
const build  = series(clean, parallel(series(compile, useref), extra, image, font))
const develop = series(compile, serve)
module.exports={
  clean,
  build,
  develop,
}

封装工作流-准备
在这里插入图片描述
在这里插入图片描述
安装脚手架模版
sudo yarn global add zce-cli
zce init nm zce-pages
git remote add https://github.com/xiaodashi12/cjg-pages.git
git add .
git commit -m ‘first commit’

新模块zce-pages
yarn
yarn link
老的模块
yarn link ‘zce-pages’

封装工作流-提取gulpfile
封装工作流-解决模块问题
封装工作流-抽象路径配置
封装工作流-包装gulp cli
封装工作流-发布并使用模块
封装工作流-总结

FIS
FIS的基本使用
sudo yarn global add fis3
fis3 release -d output
新增文件fis-conf.js

编译与压缩

Mr_Debugger
关注
专栏目录
nodejs前端自动化构建环境的搭建
01-02
前端自动化构建环境可以把这些重复工作一次配置，多次重复执行，极大的提高开发效率。 目前最知名的构建工具： Gulp、Grunt、NPM + Webpack；  grunt是前端工程化的先驱  gulp更自然基于流的方式连接任务  ...
初此认识前端
Mr_MengXie的博客
07-11 753
初次认识前端
前端部署总结
Mr_linjw的专栏
02-09 2035
先上灵魂拷问 在文章之前，先抛一些灵魂拷问： 前端代码从 tsx/jsx 到部署上线被用户访问，中间大致会经历哪些过程？ 上述过程中分别都有哪些考虑、指标和优化点，以满足复杂的业务需求？ 可能大部分同学都知道强缓存/协商缓存，那前端各种产物（HTML、JS、CSS、IMAGES 等）应该用什么缓存策略？以及为什么？ 若使用协商缓存，但静态资源却不频繁更新，如何避免协商过程的请求浪费？ 若使用强缓存，那静态资源如何更新？ 配套的
前端开发
Mr_Wangxj的博客
03-05 351
输入产品名称: 数量排序: 产品编号 产品名称 购买数量 产品单价 产品总价 操作 {{msg.bh}} {{msg.mc}} - + {{msg.dj}} {{msg.count*msg.dj}} 总价:{{all()}}购买数量:{{allnum()}} 商品编号: 产品名称: 购买数量: 产品单
前端自动化构建-保姆级文档
打工人
10-26 1480
前端自动化构建 gulp
Gulp前端自动化构建工具
01-08
**Gulp前端自动化构建工具** Gulp是一个流行的前端自动化构建工具，它的出现极大地提升了开发者的工作效率。Gulp以其简洁的API和强大的插件生态系统，让开发者能够轻松地完成诸如代码编译、压缩、合并、刷新页面等...
前端自动化构建工具grunt使用教程.zip
01-09
前端自动化构建工具grunt使用教程.zip 除了webpack,别忘了还有其它自动化构建工具
前端自动化构建工具gulp使用教程.zip
01-09
前端自动化构建工具gulp使用教程.zip 除了webpack,别忘了还有其它自动化构建工具
4款前端自动化构建工具的介绍与对比.zip_java自动化框架
01-07
4款前端自动化构建工具的介绍与对比.zip 大家都知道webpack是当人不让的前端自动化构建工具,但是除了它还有其它常用的前端打包工具存在,现在我们来比较4款
2024年前端最全浅谈前端自动化构建(1)，前端已死
2401_84617356的博客
05-06 1017
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】EXPOSE 80”]DockerFile步骤详解：拉取nodejs镜像容器中创建app目录复制打包相关的json文件到当前文件下设置淘宝源为cnpm（加快install的速度）install项目复制所有依赖到当前文件下将项目打包拉取nginx镜像复制nginx配置文件到/etc/nginx/nginx.conf复制dist文件到指定目录设置对外端口号设置nginx启动命令。
前端自动化构建工具(Grunt,、Gulp、 Webpack)
01-02
使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一。 本套视频主要讲解当前开发中最流行的三种自动化构建工具: Grunt, Gulp, webpack。从理解什么是构建工具，为什么要用构建工具，到如何去使用构建工具。 学习本套视频之前 建议先学习 JS 模块化。
从零开始通过webhooks实现前端自动化
weixin_40604277的博客
01-31 1084
1. 前置条件 有一台自己的服务器。比如阿里云，腾讯云之类 有远程仓库能够push代码，pull代码。比如github，或者码云 远程仓库有webhooks功能 2. 自动化部署流程图 3. 构建流程 3-1. 服务器部署git环境 1. 安装git 通过指令yum install git安装git 安装按完成后可以看到 2. 设置ssh密钥 通过以下指令创建密钥,-C后面的内...
Jenkins实现前端项目自动化构建
软件自动化测试技术交流、资源分享
07-22 1386
前端代码是通过Gitlab管理、通过npm编译，因此必须先安装Git以及搭建nodejs环境。
作为前端 leader，我是如何快速搭建CICD自动化部署的
xiangzhihong8的专栏
07-05 2082
假设你入职了一家小公司，既没有内部自研的 DevOps 平台，也没有专业的运维。需要你自己去搭建多环境 CI/CD 自动化部署，你会怎么做？你可能需要综合考虑成本、服务器选择、CI/CD易用度、可扩展等方面，对于不怎么熟悉 CI/CD 相关的小伙伴来说有点难以选择。这里先给大家介绍两个可以免费使用的 CICD 平台：阿里云效 和 Github Actions。通过给一个 vitepress 静态站点 和一个 koa.js + mongodb 接口服务搭建多环境、多版本自动化部署，来熟悉具体使用方法。
Jenkins自动化构建部署前端项目（Linux+gitee）
weixin_46653360的博客
12-09 1828
本文讲述了Jenkins自动化构建部署前端项目，内容包括Linux系统安装Jenkins、如何配置构建项目并发布到目标服务器
实现前端项目自动构建和部署(Gitee Go)
qq_43742385的博客
07-04 1012
教大家使用Gitee GO + Nginx从零到一实现项目上线，并且后续构建和部署的环节完全自动化。我们真正的做到了只需要开发。
前端 自动化构建 入门及原理
weixin_45345105的博客
11-25 612
自动化构建简介 今天请假肝学习 周三. 把一些重复的工作机械化和一些不被支持的新特转化，以及利用其它高效工具进行开发。 自动化构建初体验 scss也是一种自动化构建，帮我们自动转换成原始css，但也要重复执行命令， 我们可以用npm script解决这些问题 npm script 使用 package中新增一个对象 先安装下面这个，用于启动一个测试服务器 package中添加 启动成功 我们要在这个服务器启动前设置样式，有个serve之前的属性 添加变动监听变化 ，自动编译 因为加了wat
前端工程化（01）：10款自动化构建工具初识。
最新发布
贝格前端工场的博客
07-10 964
前端工程化是指通过使用工具、流程和最佳实践来优化前端开发流程、提高开发效率、优化项目质量和降低维护成本的一种开发方式。使用构建工具（如Webpack、Gulp、Grunt等）对前端资源进行打包、压缩、合并、编译等处理，以提高前端资源加载性能、减少页面加载时间。采用模块化的开发方式（如CommonJS、ES6模块）来组织前端代码，以便于代码复用、维护和拓展。通过自动化工具（如Jenkins、Travis CI等）实现前端代码的自动化部署，减少手动部署带来的错误和时间成本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值