前言
对之前使用前端自动化做一个回顾
正文
1.自动化构建初体验
// npm scripts
"scrripts":{
"build": 'sass scss/main.css css/style.css --watch' // --watch 监视文件改变
"preserve": '', // 会自动在执行serve之前执行
"serve": ''
//yarn add npm-run-all同时执行多个命令(run-p)
"start": 'run-p build serve'
}
// npm-run-all同时执行多个命令
2.常用的自动化构建工具
-
常用的构建工具:Grunt Gulp FIS
- Grunt 功能强大几乎能做任何事情,但是是基于零时文件构建,速度较慢
- Gulp 基于内存实现,默认支持多个任务
- FIS 百度推出
-
webpack属于打包工具
3.Grunt的基本使用
3-1.基本使用
// Grunt入口文件
// 定义grunt自动执行的任务
//需导出一个函数
// 接收一个grunt 的形参, 内部提供 API
module.exports = grunt => {
// yarn grunt foo 会执行此任务
grunt.registerTask('foo', () => { })
grunt.registerTask('bar', '任务描述', () => { })
//yarn grunt 会自动调取 default任务
grunt.registerTask('default', () => { })
//依次执行
grunt.registerTask('default', ['foo', 'bar'])
//异步任务(默认执行同步任务)
grunt.registerTask('async-task', function () {
const done = this.async()
setTimeout(() => {
console.log('async-task')
done()
}, 1000);
})
}
3-2.标记任务失败
// 标记任务失败 (通过在函数体中 return false 标记失败 会导致后续任务无法执行)
module.exports = grunt => {
// yarn grunt foo 会执行此任务
grunt.registerTask('foo', () => {
return false
})
grunt.registerTask('bar', () => {
console.log('bar');
})
grunt.registerTask('default', ['foo', 'bar'])
//异步任务(done(false))
grunt.registerTask('async-task', function () {
const done = this.async()
setTimeout(() => {
console.log('async-task')
done(false)
}, 1000);
})
}
4.Grunt的配置方法
//配置属性
module.exports = grunt => {
// grunt.initConfig({
// foo: 'bar'
// })
grunt.initConfig({
foo: {
bar: 123
}
})
grunt.registerTask('foo', () => {
console.log(grunt.config('foo'));
console.log(grunt.config('foo,bar'));
})
}
5.Grunt的多目标模式
//多目标模式任务
module.exports = grunt => {
grunt.initConfig({
build: {
//除了options作为任务选项 其他的都会作为数据
options: {
foo:'aaa'
},
css: 123,
js: 12
}
})
//多目标, 可以让任务配置子任务 通过 yarn grunt build:css执行指定子任务
grunt.registerMultiTask('build', function(){
console.log(this.target);
console.log(this.data);
console.log(this.options);
})
}
6.Grunt 插件的使用
// 插件的使用
module.exports = grunt => {
grunt.initConfig({
clean: {
temp: 'temp/**' //清除temp下的所有子目录文件
// temp: 'temp/*' //清除temp下的所有文件
}
})
// yarn add grunt-contrib-clean 用于清理临时文件 使用 yarn grunt clean
grunt.loadNpmTasks('grunt-contrib-clean')
}
7.Grunt 常用插件及总结
7-1 sass插件的使用
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')
}
7-2 babel 及 load-grunt-tasks 插件的使用
//babel插件 的使用
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) //自动加载所有的task
}
7-3 grunt-contrib-watch 自动监听的使用
//babel插件 的使用
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) //自动加载所有的task
grunt.registerTask('default', ['sass', 'babel', 'watch']) // 优化
}
明天继续更 Gulp ......
