自动化构建(grunt基本使用和gulp的基本使用和案例)

你猜猜吧
257 阅读5分钟

grunt部分

一：自动化构建简介

  1. 一切重复工作本应该自动化
  2. 作用
  • 脱离运行环境兼容带来的问题
  • 使用提高效率的语法，规范和标准

二：常见的自动化构建工具

Grunt

  1. 生态插件完善,几乎可以完成你想要做的事情，但是由于工作过程是基于临时文件去实现的，所以它的构建速度相对比较慢（因为需要读写，在磁盘中完成）

Gulp

  1. 它很好的解决了Grunt构建速度慢的问题，因为它是基于内存去实现的，对文件的处理是在内存中完成的，同时还默认同时执行多个任务，效率大大提高，而且使用方式相对于Grunt更加直观易懂，目前生态创建也完善

FIS

  1. 更像是一种捆绑套餐，把项目典型的需要尽可能集成再内部了，适合初学者，但是要灵活多变的话Grunt更合适

三：Grunt的基本使用

  1. 创建文件夹
  2. 初始化一个package.json文件（yarn init --yes）
  3. 安装grunt模块（yarn add grunt）
  4. 在文件的根目录新建一个gruntfile.js文件作为grunt入口文件,用于定义一些需要Grunt自动执行的任务，并且需要导出一个函数，此函数接收一个grunt的形参，内部提供一些创建任务时可以用到的API

四：Grunt标记任务失败

  1. 如果在构建任务的逻辑代码中发生错误，那么即可将任务标记为失败任务
  2. 可以在函数体当中通过return false标记错误
  3. 在default执行多个方法时如果前面的任务发生错误，那么后面的任务将不再执行，可以通过-yarn grunt default--force-解决
  4. 在异步方法中可以在异步回调函数中传入一个实参-false

五：Grunt的配置方法

  1. grunt.initConfig

六：Grunt的多目标任务

  1. grunt.registerMultiTack

七：Grunt插件的使用(只演示一个,其他可查看文档)

  1. 使用grunt.loadNpmTasks加载插件

Gulp部分

一：Gulp的基本使用

  1. yarn init --yes 初始化一个package.json文件
  2. yarn add gulp --dev 安装gulp作为开发依赖
  3. 在根目录中创建一个gulpfile.js文件
  4. 可以通过 ---yarn gulp + 任务---运行（默认任务可以直接 yarn gulp 执行）
  5. 因为gulp4.0后是异步任务,所以每次任务完成都需要标记任务完成,否则会报错

二：Gulp的组合任务

  1. Gulp提供的API
  2. series()--将任务操作组合成跟强大的操作,依次执行
  3. parallel()--将任务组合成同时在线的较大操作

三：Gulp的的异步任务

  1. 回调
  2. promise
  3. async await
  4. 返回stream

四：Gulp构建过程核心工作原理

  1. 读取流--> 转换流 --> 写入流

五：Gulp文件操作部分API加插件的使用

  1. Gulp提供了读取流和写入流,相对于node底层的读写流和写入流跟强大，更容易使用，转换流基本使用独立的插件使用
  2. 读取流---src()
  3. 转换流---插件
  4. 写入流---dest()

六：Gulp案例

  1. 样式编译------yarn add gulp-sass --dev
  2. js脚本编译------yarn add gulp-bable @bable/core @bable/preset-env --dev
  3. 页面模板编译------yarn add gulp-swig --dev
  4. 图片和文字转换------yarn add gulp-imagemin --dev
  5. 其他文件及文件清除------yarn add del --dev (这不是gulp插件，只是可以在gulp上使用)
  6. 自动加载插件------yarn add gulp-load-plugins --dev
  7. 开发服务器------yarn add browser-sync --dev(这不是gulp插件，它可以提供gulp管理，插件一个开发服务器，这个支持我们修改代码后自动热更新)
  8. 监视变化以及构建优化------gulp的API--watch
  9. 文件引用处理------yarn add gulp-useref --dev
  10. 文件压缩(js：gulp-uglify)-(html：gulp-htmlmin)-(css：gulp-clean-css)
  11. gulp-if----用于判断是上面类型(用于文件压缩)
  12. 重新规划构建过程
  13. 补充-package.json配置
  14. 文件目录如下

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

//自动加载插件
const loadPlugins = require('gulp-load-pugins')
//使用方法
const plugins = loadPlugins()

//清除---这不是gulp插件
const del = require('del')

const browserSync =  require('browser-sync')
//这个模块提供一个create方法用于创建一个开发服务器
const  bs = browserSync.create()

//清除文件
const claen = () => {
//这里表示清除dist文件和temp文件
return del(['dist', 'temp'])
}

//样式编译sass转为浏览器可以编译的css
const style = () => {
//base的目的就是把文件路径保留下来
return src('src/assets/styles/*.scss',{ base : 'src'})
.pipe(plugins.sass())
.pipe(dest('temp'))
}

//js脚本编译es6转es5
const script = () => {
return src('src/assets/scripts/*.js', { base : 'src'})
.pipe(plugins.bable({ presets: ['@bable/env']}))
.pipe(dest('temp'))
}

//模板脚本编译
const page = () => {
return src('src/*.html', {base : 'src'})
.pipe(plugins.swig())
.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'))
}

//拷贝其他文件例如public
const extra = () => {
return src('public/**', { base : 'public' })
.pipe(dest('dist'))
}

//把之前的构建注释转换成链接,并压缩对应文件
const userf = () => {
return src('temp/*.html' , { base : 'temp' })
.pipe(plugins.useref({ serachPath: ['temp' , ''] }))
.pipe(plugins.if(/\.js$/, plugins.uglify()))
.pipe(plugins.if(/\.css$/, plugins.cleanCss()))
//没有配置的话只会压缩行内的一个空格
.pipe(plugins.if(//.html$\, plugins.htmlmin({
collapseWhiteaspace:true,
minifyCss:true,
minifyJS:true
})))
.pipe(dest('dist'))
}

const serve = () => {
//Glup的API-watch
//监听以下目录，如果发生变化则触发相应的任务是浏览器内容更新
watch('src/assets/styles/*.scss', style)
watch('src/assets/scripts/*.js', script)
watch('src/*.html', page)

//reload是browerSync插件的方法
//bs.reload下面的路径文件变化就会刷新浏览器
watch(['src/assets/images/**', 'src/assets/fonts/**', 'public/**'], bs.reload())

//init方法初始化一些相关的配置
bs.init({
//关闭打开网页时右上角的提示
notify:false,
//开发服务器的端口
port:8080,
//是否自动打开浏览器
open:'true',
//指定一个字符串,用于browser启动过后被监听的文件
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 ), image, font, extra))

//开发阶段
const develop = series( compile, serve )

modele.exports = {
clean,
build,
develop
}

七：最后可以在package.json配置

  1. 通过yarn clean 运行
  2. 通过yarn build 运行
  3. 通过yarn develop运行

avatar
文章
阅读
粉丝