Grunt && Gulp前端自动化构建工具
前端自动化构建
- 一、自动化构建的认识
-
- 1. 概念相关
- 2. 自动化初体验
- 二、Grunt
-
- 1. Grunt 的基本使用
- 2. Grunt 标记任务失败
-
- 1. 如何标记
- 2. 失败之后带来的影响
- 3. Grunt 的配置方法
- 4. Grunt 多目标任务
- 5. Grunt 插件的使用
- 三、Gulp
一、自动化构建的认识
1. 概念相关
学自动化构建的目的？
比如说在一个项目中我们想使用 ecmascript 的最新特性，以及想使用 sass来编写css，但这些内容都不是浏览器所能够识别的，此时我们就需要借助一些工具如 如可以借助 sass 编译工具将sass语法编译为css语法使浏览器识别。
自动话构建的概念感觉不好定义
个人理解
从源码到生产代码中间通过编译转换的步骤就是构建步骤，在利用一些工具将构建的过程不需要人为的进行构建，通过监听源代码的变化之后会自动构建编译，这应该就是自动化构建
2. 自动化初体验
需求： 在项目中使用sass来编写样式。
- 构建环节
借助 sass 官方提供的工具来将 scss文件转换为 css文件.
yarn add sass
在package.json中配置 npm scripts 执行脚本
ps：scripts 中的脚本可以省略 ./node_modules/.bin/， 当借助 yarn 或是 npm run 脚本命令的时候，他会自动的去 ./node_modules/.bin/ 找我们配置的命令。
yarn build 得到了构建之后的代码
2. 借助 broswer-sync 启动一个服务器运行我们的项目
yarn add browser-sync -D
在 scripts 中配置命令
运行 yarn serve 启动服务
如果此时我们更改了style.scss 中的文件，就需要重新构建css之后再启动服务，这样我们需要输入两遍命令，此时我们可以借助 npm scripts 中的钩子命令，
运行 yarn serve
3. 自动化
此时我们像监听scss文件变化之后，自动执行build命令。
此时发现加上–watch之后，后面的serve命令就被堵塞不执行了，这时就需要同时执行多个script任务，可以借助与 npm-run-all 来实现。
yarn add npm-run-all -D
安装这个模块之后，我们就可以执行多个任务了，同时也可以监听style.scss文件的变化。
当style.scss变化之后，会自动执行build命令。
虽然说 build的命令会随着 style.scss变化而执行， 但是修改style.scss之后我们希望的是自动的更新页面。
此时就能够达到我们的效果了。
二、Grunt
对于 Grunt 仅了解既可以，因为其已经推出历史的舞台了，能够看懂别的项目中的代码就行了。
1. Grunt 的基本使用
- 安装grunt
yarn add grunt -D
- 创建 grunt 的入口文件 gruntfile.js
// Grunt 的入口文件
// 这个文件主要是用来定义 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接受一个 grunt 的参数， 该参数提供创建任务所用到的 API
module.exports = grunt => {
// 1. grunt.registerTask(任务名, 任务函数| 任务数组(已经注册过任务名) 如：[ task1, task 2]) 来注册一个任务，通过 yarn grunt 任务名称，如要执行task1 =》 yarn grunt task1。
grunt.registerTask('task1', () => {
console.log('task1任务执行了')
})
grunt.registerTask('task2', () => {
console.log('task2任务执行了')
})
// 2. 如果注册的任务名称为 default 就可以直接通过命令 yarn grunt 来执行 default 任务
// 任务函数可以为数
grunt.registerTask('default', ['task1', 'task2'])
grunt.registerTask('task3', ['task1', 'task2'])
// 3. grunt 还可以创建异步任务, 不过创建异步任务需要通过 任务函数体的this.async()得到一个回调函数，再异步操作之后调用这个回调函数来告诉grunt 任务结束
grunt.registerTask('async-task', function() {
const doneFn = this.async()
setTimeout(() => {
console.log('异步任务执行了')
doneFn()
}, 1000);
})
}
- 通过 yarn grunt + 任务名来运行grunt 任务
2. Grunt 标记任务失败
1. 如何标记
module.exports = grunt => {
// 1. 标记grunt 任务失败，同步任务只需要再 任务函数体返回一个false
grunt.registerTask('task1', () => {
console.log('task1任务执行了')
// 任务函数体返回一个false
return false
})
grunt.registerTask('task2', () => {
console.log('task2任务执行了')
})
grunt.registerTask('default', ['task1', 'task2'])
grunt.registerTask('task3', ['task1', 'task2'])
// 2. 异步任务标记失败，需要给 异步任务结束回调传递一个false
grunt.registerTask('async-task', function() {
const doneFn = this.async()
setTimeout(() => {
console.log('异步任务执行了')
// 传递false
doneFn(false)
}, 1000);
})
}
2. 失败之后带来的影响
比如现在有一个 grunt default 任务，该任务执行task1，task2，task3, 现在再task2任务中标记任务失败，当执行这个default任务的时候，task1会执行，到task2就执行失败，同时task2后面的任务终止执行。
以上面的例子来运行代码得到如下结果：
3. Grunt 的配置方法
4. Grunt 多目标任务
module.exports = grunt => {
grunt.initConfig({
// 2. 将多目标任务的名再 initConfig 里进行初始化
build: {
// 3. build 对象中的每一个键值对就是一个任务,除了options是配置项
options: {
config1: 'hhhh'
},
css: 'css~~~',
js: 'js~~~'
}
})
// 1. 再 grunt 通过grunt.registerMultiTask 与 grunt.initConfig 我们可以
// 配置多目标任务
grunt.registerMultiTask('build', function() {
// 4. 通过 this.target 可以拿到任务吗，this.data 可以拿到任务目标值
console.log('创建多目标任务','name: => ', this.target, 'value: => ', this.data)
// 5. 通过this.options() 可以拿到配置项中的数据
console.log(this.options())
// 6. 通过 yarn grunt build 运行多任务，如果仅想指定某个任务可以 build: 子任务名
})
grunt.registerTask('async-task', function () {
const doneFn = this.async()
setTimeout(() => {
console.log('异步任务执行了')
// 传递false
doneFn(false)
}, 1000);
})
}
5. Grunt 插件的使用
仅介绍 Sass，babel，watch 插件的使用
const {
loadNpmTasks } = require("grunt")
const loadGruntTasks = require('load-grunt-tasks')
const sass = require('sass')
module.exports = grunt => {
grunt.initConfig({
// sass
// yarn add grunt-sass sass -D
sass: {
main: {
options: {
sourceMap: true,
implementation: sass
},
files: {
// key 为 输出路径， value 为 输入路径
'dist/css/main.css': 'src/scss/main.scss'
}
}
},
// babel
// yarn add grunt-babel @babel/core @babel/preset-env -D
babel: {
options: {
presets: ['@babel/preset-env']
},
main: {
files: {
// key 为 输出， value 为 输入
'dist/js/app.js': 'src/js/app.js'
}
}
},
// watch
// yarn grunt-contrib-watch
// 当监听的文件发生变化之后，会自动执行对于的 task
watch: {
js: {
files: ['src/js/*.js'],
tasks: ['babel']
},
css: {
files: ['src/scss/*.scss'],
tasks: ['sass']
},
}
})
grunt.registerTask('default', ['sass', 'babel', 'watch'])
// grunt.loadNpmTasks('grunt-sass')
// 1. 使用loadNpmTasks 导入 插件不方便，可以使用 loadGruntTasks 插件帮忙自动导入安装的插件
loadGruntTasks(grunt) // 将 grunt 传入之后会自动所有的插件
}
grunt 使用插件的操作总结
- 安装对于的插件
- 通过 grunt-loadNpmTasks(‘grunt-sass’) 载入sass
- 再 initConfig 中配置 sass 任务。(具体配置可以参考官网)
三、Gulp
Gulp 内容太多了单独写了一篇，可以查看这个文章
Gulp