自动化构建
一切重复工作本应自动化,自动化是通过机器代替手工完成一些工作,构建就是转换
转换的过程称为自动化构建工作流,作用是脱离运行环境兼容带来的问题,在开发阶段使用提高效率的语法、规范和标准
比较典型的应用场景:在开发web应用时比如es6,sass,模板引擎等,这些用法大都不被浏览器直接支持,构建转换那些不被支持的【特性】变成能够直接运行的代码
安装sass官方提供的一个sass模块,做为开发依赖安装
Yarn add sass –dev
安装后找到node_modules下安装的路径,然后需要提供scss的路径和转换成的css路径
.\node_modules\.bin\sass scss/main.scss css/style.css
每次都需要执行这个重复的命令,所以npm scripts主要就是用来解决这个问题。可以在定义一些与项目相关的脚本命令
用npm scripts来包装你的构建命令。
在package.json里添加scripts
npm scripts是实现自动化构建工作流的最简方式
常用的自动化构建工具
grunt是最早的前段构建系统,插件生态完善,但是它的工作过程是基于临时文件实现的,所以构建速度较慢,例如用它对工程中的sass文件的构建,一般会对sass文件做编译操作,再去添加一些自由属性的前缀,再去压缩代码。这些步骤grunt每一步都有磁盘读取操作。
Gulp基于内存实现的,对文件的处理都是在内存中实现,速度快一些,默认同时支持多个任务,这是当下最流行的。
Fis是百度团队研发的,最早只是在内部使用。适合初学者
Grunt的基本使用
打开一个空项目
Yarn init –yes
Yarn add grunt
Code grunt file.js
Grunt 标记任务失败
//当任务失败时会阻碍下面的任务执行,命令可以:yarn grunt de
//Grunt 的入口文件
//用于定义一些需要Grunt自动执行的任务
//需要导出一个函数
//此函数接收一个grunt的形参,内部提供一些创建任务时可以用到的API
module.exports = grunt => {
grunt.registerTask('foo', () => { //注册一个任务,第一个参数是名字,第二个参数是指定一个函数,如果还是字符串就是任务的描述
console.log("hhhh");
return false //当任务失败时会阻碍下面的任务执行,命令可以:yarn grunt default --force
});
grunt.registerTask("bar", "任务描述", () => {
console.log("other-----")
});
//如果名称是default就是默认的任务,可以直接yarn grunt去执行
grunt.registerTask('default', ['foo', 'bar']) //如果第二个参数是数组,就是会依次执行里面的任务
grunt.registerTask('async-task', function() { //异步任务
const done = this.async()
setTimeout(function() {
console.log(22222222222222222); //默认支持同步模式,如果需要异步操作的话要用普通的函数,this.async得到一个回调函数,表示任务完成
done()
}, 1000)
})
}
Grunt 配置选项方法
Grunt多目标任务
运行了两个目标,运行某一个目标时
module.exports = grunt => {
grunt.initConfig({
build: {
options: { //除了options,其他的键都做成目标,options做成配置选项
foo: 'bar'
},
css: '1',
js: "2"
}
})
//多目标模式,可以让任务根据配置形成多个子任务
grunt.registerMultiTask('build', "描述", function() {
console.log(this.options())
console.log(`target:${this.target},data:${this.data}`)
})
}
Grunt插件的使用
yarn add grunt-contrib-clean
module.exports = grunt => {
grunt.initConfig({
clean: {
temp: 'temp/app.js'//需要清除的文件路径,也可以用通配符,*.js,或者**表示所有文件
}
})
grunt.loadNpmTasks('grunt-contrib-clean')
}
Grunt实现常用的构建任务
Yarn add grunt-sass sass –dev
const sass = require('sass')
module.exports = grunt => {
grunt.initConfig({
sass: {
options: {
sourceMap: true,
implementation: sass
},
main: {
files: {
'dist/css/main.css': "src/scss/main.scss"
}
}
}
})
grunt.loadNpmTasks('grunt-sass')
}
yarn add grunt-babel @babel/core @babel/preset-env –dev
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"
}
}
}
})
// grunt.loadNpmTasks('grunt-sass')
loadGruntTasks(grunt) //自动加载所有的grunt插件的任务
}
yarn add grunt-contrib-watch –dev //保存自动构建
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"
}
}
},
watch: {
js: {
files: ['src/js/*.js'], //要监视的文件
tasks: ['babel'] //修改后需要执行什么任务
},
css: {
files: ['src/scss/*.scss'],
tasks: ['sass']
}
}
})
// grunt.loadNpmTasks('grunt-sass')
loadGruntTasks(grunt) //自动加载所有的grunt插件的任务
grunt.registerTask('default', ['sass', 'babel', 'watch'])
}