前端自动化工作流程

最新推荐文章于 2023-12-27 20:38:13 发布
最新推荐文章于 2023-12-27 20:38:13 发布
阅读量186 收藏
点赞数
分类专栏： 前端自动化工作流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44600183/article/details/116453076
版权

一、前端工程化

1.工程化的定义和主要解决的问题

  1. 工程化的定义：
    1. 遵循一定的标准和规范，通过工具去提升开发的效率，降低成本的一种手段。
  2. 主要解决的问题：
    1. 传统语言或语法的弊端
    2. 无法使用模块化、组件化
    3. 重复的机械式工作
    4. 代码风格统一、质量保证
    5. 依赖后端服务接口支持
    6. 整体依赖后端项目
    7. 部署上线前需要手动压缩代码及资源文件
    8. 部署过程需要手动上传代码到服务器

2.一个项目中工程化的表现

  1. 一切一提高效率、降低成本、质量保证为目的的手段都属 [ 工程化 ]
  2. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0YsfpdSv-1620281845575)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429155734825.png)]
  3. 创建项目：使用脚手架工具创建项目基础结构
  4. 编码：格式化代码、校验代码风格、编译/构建/打包
  5. 预览/测试：WebServer / mock、LiveReloading / HMR 、Source Map . 热更新
  6. 提交：Git Hooks 、Lint-staged、持续集成 代码提交之前做检查、日志
  7. 部署：CI / CD 、自动发布。避免手动操作失误

3.工程化 != 工具

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PRi623Ne-1620281845577)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429160908808.png)]

二、脚手架工具

​ 创建项目基础结构、提供项目规范和约定

1.脚手架工具概要

  • 脚手架的作用
    1. 相同的组织结构
    2. 相同的开发范式
    3. 相同的模块依赖
    4. 相同的工具配置
    5. 相同的基础代码
  • 常用的脚手架工具
  • 通用的脚手架工具剖析
  • 开发一款脚手架

三、Yeoman 简介

  1. 最老牌、最通用的的web 脚手架工具。

1. Yeoman 基本使用

  1. 安装 yeoman

    yarn global add yo			// 安装 yeoman
yarn global add generator-node  // 安装generator生成器 工具
yo node 

    npm i -g yo
npm i -g generator-node
yo node

  2. yo 安装描述

    1. 模块叫什么名字
      1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zOH7s3N4-1620281845578)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429162949545.png)]
    2. 项目已经存在是否选择另外一个
      1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fnb2oxZa-1620281845580)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429163103493.png)]
    3. 项目描述
      1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mnhy5fyb-1620281845581)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429163230987.png)]
    4. 项目的主页
      1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bvNZ9kBk-1620281845582)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429163342888.png)]
    5. 作者的邮箱、主页、关键词
      1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AIw9KhGb-1620281845583)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429163520864.png)]
    6. 是否发送代码的覆盖率报告，持续集成
      1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qZBnfWc-1620281845583)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429163626300.png)]
    7. node的支持、github名字、MIT
      1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IXyC3YFT-1620281845584)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429163804203.png)]

  3. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qAO1Oa7s-1620281845584)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429164010082.png)]

2.Yeoman 使用步骤总结

  1. 明确你的需求

  2. 找到合适的 Generator

  3. 全局范围安装找到的 Generator

  4. 通过 yo 命令运行对应的 Generator

  5. 通过命令行交互填写选项

  6. 生成你所需要的项目结构

  7. 步骤：

    // 地址：https://yeoman.io/generators/  			// yeoman 官网
yarn global add generator-webapp
yo generator-webapp
yo webapp

3.创建 Generator 模块

  1. 初始化

    yarn init

  2. 安装 Generator 的基类

    yarn add yeoman-generator

  3. // 此文件作为 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  prompting () {
    // Yeoman 在询问用户环节会自动调用此方法
    // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
    return this.prompt([
      {
        type: 'input',
        name: 'name',
        message: 'Your project name',
        default: this.appname // appname 为项目生成目录名称
      }
    ])
    .then(answers => {
      // answers => { name: 'user input value' }
      this.answers = answers
    })
  }
  writing () {
    // Yeoman 自动在生成文件阶段调用此方法

    // // 我们这里尝试往项目目录中写入文件
    // this.fs.write(
    //   this.destinationPath('temp.txt'),
    //   Math.random().toString()
    // )

    // -------------------------------------------------------

    // // 通过模板方式写入文件到目标目录

    // // 模板文件路径
    // const tmpl = this.templatePath('foo.txt')
    // // 输出目标路径
    // const output = this.destinationPath('foo.txt')
    // // 模板数据上下文
    // const context = { title: 'Hello zce~', success: false }

    // this.fs.copyTpl(tmpl, output, context)

    // -------------------------------------------------------

    // 模板文件路径
    const tmpl = this.templatePath('bar.html')
    // 输出目标路径
    const output = this.destinationPath('bar.html')
    // 模板数据上下文
    const context = this.answers

    this.fs.copyTpl(tmpl, output, context)
  }
}

  4. 命令行输入

    yo link

4.vue generator 的案例

  1. win +ｒ　键输入 cmd 打开命令行工具输入：

    mkdir generator-vue		 // 创建generator-vue文件夹
cd generator-vue		 // 进入创建好的文件夹
yarn init 			     // 初始化package.json
yarn add generator-vue 		// 安装yeoman 的依赖
code .				// 通过vscode 打开项目

  2. 在 vscode 中的依次创建 generators/app/index.js 的入口文件

    // index.js
const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  prompting () {
    return this.prompt([
      {
        type: 'input',
        name: 'name',
        message: 'Your project name',
        default: this.appname // appname 为项目生成目录名称
      }
    ])
    .then(answers => {
      // answers => { name: 'user input value' }
      this.answers = answers
    })
  }
  writing () {
    // 模板文件路径
    const tmpl = this.templatePath('bar.html')
    // 输出目标路径
    const output = this.destinationPath('bar.html')
    // 模板数据上下文
    const context = this.answers

    this.fs.copyTpl(tmpl, output, context)
  }
}

  3. 在 app 文件下面创建 templates 文件，把项目的结构拷贝到templates中作为模板！

  4. 在项目模板中 把需要创建项目时替换的名称，换位模板标记 <%= name %>

  5. 在index.js的入口文件中输入：

    const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  prompting () {
    return this.prompt([
      {
        type: 'input',
        name: 'name',
        message: 'Your project name',
        default: this.appname // appname 为项目生成目录名称
      }
    ])
    .then(answers => {
      this.answers = answers
    })
  }
  writing () {
    const templates = [
      'public',
      'public/favicon.ico',
      'public/index.html',
      'src',
      'src/api',
      'src/api/index.js',
      'src/api/login.js',
      'src/assets',
      'src/assets/images',
      'src/assets/images/user.png',
      'src/assets/images/user-default.png',
      'src/assets/scss',
      'src/assets/scss/_variable.scss',
      'src/assets/scss/app.scss',
      'src/assets/scss/common.scss',
      'src/assets/scss/home.scss',
      'src/assets/scss/reset.scss',
      'src/components,
      'src/components/EChart.vue',
      'src/components/Icon.vue',
      'src/components/IconSvg.vue',
      'src/components/Tabs.vue',
      'src/icons',
      'src/icons/svg',
      'src/icons/svg/daochu.svg',
      'src/icons/svg/daoru.svg',
      'src/icons/svg/morentouxiang.svg',
      'src/icons/svg/tuichu.svg',
      'src/icons/index.js',
      'src/layout',
      'src/layout/components',
      'src/layout/components/CommonAside.vue',
      'src/layout/components/CommonForm.vue',
      'src/layout/components/CommonHeader.vue',
      'src/layout/components/CommonTab.vue',
      'src/layout/components/CommonTable.vue',
      'src/layout/components/index.js',
      'src/layout/Main.vue',
      'src/mock',
      'src/mock/home.js',
      'src/mock/index.js',
      'src/mock/permission.js',
      'src/mock/user.js',
      'src/router',
      'src/router/index.js',
      'src/router/routes.js',
      'src/store',
      'src/store/modules',
      'src/store/modules/tab.js',
      'src/store/modules/user.js',
      'src/store/getters.js',
      'src/store/index.js',
      'src/utlis',
      'src/utlis/bus.js',
      'src/utlis/config.js',
      'src/utlis/request.js',
      'src/views',
      'src/views/CollectiFDataFiles',
      'src/views/CollectiFDataFiles/index.vue',
      'src/views/Home',
      'src/views/Home/Home.vue',
      'src/views/Login',
      'src/views/Login/Login.vue',
      'src/views/MobileTerminalTargeKnowledgeManagement',
      'src/views/MobileTerminalTargeKnowledgeManagement/index.vue',
      'src/views/PlatformTargetKnowledgeManagement',
      'src/views/PlatformTargetKnowledgeManagement/index.vue',
      'src/views/RegionalSpecificKnowledgeManagement',
      'src/views/RegionalSpecificKnowledgeManagement/index.vue',
      'src/views/RestoreThePostInformationMaterialFile',
      'src/views/RestoreThePostInformationMaterialFile/index.vue',
      'src/views/TheGlobalQuantity',
      'src/views/TheGlobalQuantity/index.vue',
      '.browserslistrc',
      '.DS_Store',
      '.eslintrc.js',
      '.gitignore',
      'babel.config.js',
      'package.json',
      'package-lock.json',
      'postcss.config.js',
      'README.md',
      'vue.config.js',
      'yarn.lock'
    ]
    templates.forEach(item => {
      this.fs.copyTpl(
        this.templatePath(item),
        this.destinationPath(item),
        this.answers
      )
    })
  }
}

  6. 然后在命令行中输入

    yarn link 				// link 到全局
cd .. 					// 返回到上一级
mkdir vue-template		// 创建 vue-template 文件夹
cd vue-template
yo node					// node 是开始安装 generator-node 的名字

四、自动化构建

1.自动化简介

  1. 一切重复工作本应自动化
  2. 把开发阶段写的源代码转换成生产环境的生产代码（自动化构建工作流）
  3. 脱离运行环境兼容带来的问题
  4. 使用提高效率的规范、语法和标准
    1. ECMAScript Next
    2. Sass
    3. 模板引擎

2.自动化构建初体验（scss）

/* 命令行中输入 黑色字体*/

yarn init   // 初始化
// 创建scss 文件夹和 main.scss 文件和index.html
yarn add sass --dev			//	安装sass官方提供的scss文件
// 执行 node_modules\.bin\sass  文件 打印帮助信息
node_modules\.bin\sass
// 执行 node_modules\.bin\sass scss/main.scss css/style.css 生成style.css
node_modules\.bin\sass scss/main.scss css/style.css

// npm Scripts
// 在package.json 中输入 "scripts":{
//    "build": "sass scss/main.scss css/style.css"
//  },
"scripts":{"build": "sass scss/main.scss css/style.css"}
// yarn build  或 npm run build
yarn build

// yarn add browser-sync --dev  启动测试服务器运行项目
yarn add browser-sync --dev
// 在package.json 中输入 "scripts":{
//    "build": "sass scss/main.scss css/style.css"，
//	  "serve": "browser-sync ."
//  },
yarn serve			//	启动服务器,自动弹出浏览器
// 添加prserve  自动执行yarn build 执行scss 到 css
// 在package.json 中输入 "scripts":{
//    "build": "sass scss/main.scss css/style.css"，
//	  "preserve": "yarn build",
//	  "serve": "browser-sync ."
//  },

 yarn add npm-run-all --dev		// 同时启动 build serve 命令
  // "scripts": {
  //   "build": "sass scss/main.scss css/style.css --watch",
  //   "serve": "browser-sync . --files \"csss/*.css\"",
  //   "start": "run-p build serve"
  // },

3.常用的自动构建化工具

  1. Grunt （自由）:
    1. 临时构建，相对速度较慢
  2. Gulp（自由）:
    1. 构建速度快，基于内存实现
    2. 同时支持多个任务
  3. FIS（基础）：
    1. 百度团队推出
    2. 捆绑套餐、模块开发

五、Grunt 自动化构建工具

1.Grunt 基本用法

  1. 添加 grunt 包

    yarn add grunt

  2. 在当前文件夹下添加 gruntfile.js 文件

    code gruntfile			// grunt 的配置文件

    // gruntfile.js

// 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

2.Grunt 标记任务失败

module.exports = grunt => {
  // 任务函数执行过程中如果返回 false
  // 则意味着此任务执行失败
  grunt.registerTask('bad', () => {
    console.log('bad working~')
    return false
  })

  grunt.registerTask('foo', () => {
    console.log('foo working~')
  })

  grunt.registerTask('bar', () => {
    console.log('bar working~')
  })

  // 如果一个任务列表中的某个任务执行失败
  // 则后续任务默认不会运行
  // 除非 grunt 运行时指定 --force 参数强制执行
  grunt.registerTask('default', ['foo', 'bad', 'bar'])

  // 异步函数中标记当前任务执行失败的方式是为回调函数指定一个 false 的实参
  grunt.registerTask('bad-async', function () {
    const done = this.async()
    setTimeout(() => {
      console.log('async task working~')
      done(false)
    }, 1000)
  })
}

3.Grunt 的配置方法和多目标任务

module.exports = grunt => {
  // 多目标模式，可以让任务根据配置形成多个子任务
  // grunt.initConfig({
  //   build: {
  //     foo: 100,
  //     bar: '456'
  //   }
  // })

  // grunt.registerMultiTask('build', function () {
  //   console.log(`task: build, target: ${this.target}, data: ${this.data}`)
  // })

  grunt.initConfig({
    build: {
      options: {
        msg: 'task options'
      },
      foo: {
        options: {
          msg: 'foo target options'
        }
      },
      bar: '456'
    }
  })

  grunt.registerMultiTask('build', function () {
    console.log(this.options())
  })
}

4.Grunt 插件的使用

module.exports = grunt => {
  grunt.initConfig({
    clean: {
      temp: 'temp/**'
    }
  })
  grunt.loadNpmTasks('grunt-contrib-clean')
}
  1. 下载包，loadNpmTasks 引用插件，配置直接使用

六、Gulp 自动化构建工具

1.Gulp的基本使用

  1. 初始化

    yarn init --yes

  2. 安装 Gulp 包

    yarn add gulp --dev

  3. Gulpfile.js 文件

    code gulpfile.js

    // // 导出的函数都会作为 gulp 任务
// exports.foo = () => {
//   console.log('foo task working~')
// }

// gulp 的任务函数都是异步的
// 可以通过调用回调函数标识任务完成
exports.foo = done => {
  console.log('foo task working~')
  done() // 标识任务执行完成
}

// default 是默认任务
// 在运行是可以省略任务名参数
exports.default = done => {
  console.log('default task working~')
  done()
}

// v4.0 之前需要通过 gulp.task() 方法注册任务
const gulp = require('gulp')

gulp.task('bar', done => {
  console.log('bar task working~')
  done()
})

    命令行

    yarn gulp foo

2.Gulp 组合任务

  1. 串行任务结构

    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)

  2. 命令行

    yarn gulp foo || npm run gulp foo			// 执行任务foo
yarn gulp bar || npm run gulp bar			// 执行任务bar

3.Gulp 异步任务（三种方式）

  1. 回调函数

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

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

  2. Promise

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

  3. async await

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

4. Gulp 构建过程核心工作原理

  1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mizhm0gY-1620281845585)(D:\personal\大前端高薪训练营-拉钩\笔记\image-20210429093445966.png)]

  2. 代码

    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) // 写入
}

  3. 命令行输入

    yarn gulp				// 得到压缩过后的文件

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

  1. 安装插件引用

    const { src, dest } = require('gulp')
const cleanCSS = require('gulp-clean-css')
const rename = require('gulp-rename')

exports.default = () => {
  return src('src/*.css')
    .pipe(cleanCSS())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('dist'))
}
林初笔墨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端自动化测试框架源代码CYPRESS
08-10
前端自动化测试在现代Web开发中扮演着至关重要的角色，确保了代码的质量和功能的稳定性。在众多测试框架中，Cypress以其独特的特性和高效性脱颖而出，成为了后Selenium时代的重要选择之一。Cypress与TestCafe、...
Gulp前端自动化构建工具
01-08
Gulp是一个流行的前端自动化构建工具，它的出现极大地提升了开发者的工作效率。Gulp以其简洁的API和强大的插件生态系统，让开发者能够轻松地完成诸如代码编译、压缩、合并、刷新页面等一系列前端开发任务。 **为何...
DevOps—基于 Jenkins 构建 Vue 前端工程自动化流程
weixin_37648525的博客
10-08 2051
这里需要新增 SSH Server，就像平常通过 ssh 连接远程服务器一样，需要填写名称、远程机器 ip，远程机器登录账号，其中的远程机器目录可以填写，这个路径必须在远程机器中已存在，不存在不会自动创建，填写之后后面传输文件时，文件的路径就相对于这个路径，否则就相对于账号的家目录。也可以通过配置页面的流水线语法链接，调整到 Jenkins 的帮助文档，里面有一个代码片段生成器，可以帮助生成一些基本操作的代码，这里生成的代码一般不要更改，包括换行，直接拷到 jenkinsfile 中使用即可。
Jenkins实现前端项目自动化构建
软件自动化测试技术交流、资源分享
07-22 1300
前端代码是通过Gitlab管理、通过npm编译，因此必须先安装Git以及搭建nodejs环境。
前端项目自动化部署
@SCY
12-06 3015
本文主要内容为三个方面： 一、使用Git仓库来管理项目 二、如何使用云服务器 三、使用Jenkins进行自动化部署
JavaScript 前端自动化
m0_54829066的博客
12-23 963
JavaScript 前端自动化是指使用 JavaScript 脚本来自动完成前端工作流程中的一些任务，以提高开发效率和代码质量。
[手把手系列之] Jenkins自动化部署vue前端项目
最新发布
XieStrong
12-27 2704
简介：Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成点击下面的链接进入官网选择最新的版本下载，然后一键安装即可。windows版本Jenkins下载。
前端自动化工具gulp.zip
12-24
"前端自动化(三)"可能涵盖了打包上线的流程，包括合并、压缩资源、添加时间戳（避免缓存问题）以及上传至服务器。例如，使用`gulp-concat`合并JS文件，`gulp-rev`添加版本号，`gulp-deploy`部署到服务器。 总的来说...
详解Puppeteer前端自动化测试实践
10-17
总的来说，Puppeteer 是一个强大且灵活的前端自动化测试工具，它能有效提升测试质量和效率，尤其适用于大规模、复杂前端项目的持续集成和持续部署(CI/CD)流程中。通过熟练掌握 Puppeteer，开发者可以构建出稳定、...
brunch前端自动化工具教程.zip
12-24
**brunch前端自动化工具教程** 在前端开发领域，自动化工具是不可或缺的一部分，它们极大地提高了我们的工作效率，减少了重复劳动。虽然webpack已经成为当前最流行的前端构建工具，但其他优秀的工具如gulp和grunt...
作为前端 leader，我是如何快速搭建CICD自动化部署的
xiangzhihong8的专栏
07-05 1733
假设你入职了一家小公司，既没有内部自研的 DevOps 平台，也没有专业的运维。需要你自己去搭建多环境 CI/CD 自动化部署，你会怎么做？你可能需要综合考虑成本、服务器选择、CI/CD易用度、可扩展等方面，对于不怎么熟悉 CI/CD 相关的小伙伴来说有点难以选择。这里先给大家介绍两个可以免费使用的 CICD 平台：阿里云效 和 Github Actions。通过给一个 vitepress 静态站点 和一个 koa.js + mongodb 接口服务搭建多环境、多版本自动化部署，来熟悉具体使用方法。
Grunt打造前端自动化工作流
难得溜达到此
01-25 761
Grunt这货是啥？ 最近很火的前端自动化小工具，基于任务的命令行构建工具 http://gruntjs.com   Grunt能帮我们干啥？ 在开始介绍前，先向大家描述下面的场景: 【场景1：项目开始前】 先建立一个 projA 的文件夹 再建 html css js images （建5个或以上文件夹，花费1分钟）拷贝 CSS库（Yui Reset
前端自动化介绍
张营的技术博客
03-08 3218
文章目录DevOps介绍前端自动化自动化相关概念问题提出常见现象最佳实践 DevOps介绍 相信大家或多或少的听过这个词DevOps，而且看起来很高大上，其实这个是敏捷开发的一种执行流程表现，先来一张经典的DevOps流程图： 具体的流程为： 先是计划plan，编码code，然后编译build，测试test（Dev） 然后发布release，部署deploy，运维operate，监控monitor（Ops） 然后发现问题或有新的需求，就重新计划plan。。。如此循环 这就是完整的DevOps流程。 下
前端自动化构建入门
wenyeqv的博客
03-02 492
前端三剑客可以使我们构建出想要的网页，但是这种流程并不完美，比如css的样式书写方式引用复杂，重用率低，以至于有人更青睐于less、sass等样式编写风格，但是浏览器并不能直接解析sass，这就需要前端构建工具将我们的源代码重新构建成浏览器能解析的方式 sass官方有自己的源码解析工具，能将用户编写的sass转译成css，从而让浏览器使用 安装 yarn add sass --dev 安装好之后node_modules文件夹中的.bin目录里就有了sass.cmd程序 调用该程序，即可将sass文.
如何构建自动化的前端开发流程
章志强的专栏
02-18 2387
如今的前端开发中，已经不再只是一些简单的静态文件了，对于很多Web App来说，前端代码甚至比后端代码要更加复杂，更加难于管理，例如： 我们有许多的第三方库的依赖需要管理；我们有独立的前端测试需要自动运行；我们还有很多代码需要在发布时进行打包压缩；⋯⋯ 　　所以构建一个自动化的前端开发流程是非常必要的，但现在前端开发流程的构建是百花齐放，没有一个统一的标准，还有很多依赖于后端的架构来做
前端流程自动化
weixin_34032827的博客
03-16 738
原文刊登在github 流程自动化 前端从诞生依赖可以说经历了一个从不规范到规范，再到自动化的一系列过程。最开始的时候没有前端这个领域，所有的前端职责都是由服务端来代替完成，当时的状况是非常混乱的，派别丛生，浏览器厂商规范不统一，模块机制混乱，代码风格写法各自为派，真有点群雄逐鹿的感觉。从HTML5，CSS3，ES6（536）的发布开始，前端已经趋于规范化。浏览器的规范趋向一致，微软的浏览器也...
前端自动化构建
yuan
05-06 866
在自己还得不到幸福的时候，不要靠橱窗太近，盯着幸福出神
前端自动化总流程
weixin_30871293的博客
09-12 81
1.安装nvm（安装node环境） 　　node环境可以直接用.msi文件安装，但通常不这样做。 　　因为node环境版本较多，所以安装版本管理工具： nvm 2.安装npm node依赖包管理工具。 3.安装gulp 4.创建项目 　　4.1 npm初始化 　　4.2 gulp项目本地安装 　　4.3 gulp任务编写 5.打开cmd ，运行gulp中的ser...
构建前端自动化工作流环境
Li_blog的博客
11-30 340
流行框架第一天：构建前端自动化工作流环境兩個問題学习目标 了解什么是Node，什么是NPM；（Node.js） 掌握Bower的使用； 熟练使用Less/Sass； 搭建一个自己的自动化工作流环境； 自动编译 自动合并 自动刷新 自动部署 GIT 与 GITHUB master 托管源文件 gh-pages 托管部署文件 在github搭建自己的blog 为什么要有自动化的流程 在我们的开发过程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值