项目网址:https://gitee.com/big-right-right/grunt-sample.git
## grunt
grunt已经不再流行 但鉴于其构建工具鼻祖的地位 还是有必要学习一下
使用grunt及其插件,可以定义编译scss为css,用babel编译最新版本js等任务
npm init -y
cnpm install grunt --save-dev
touch gruntfile.js
## 定义同步、异步、默认grunt任务,修改 gruntfile.js 文件内容为如下:
/*
Grunt 的入口文件
用于定义一些需要 grunt 自动自行的任务
需要导出一个函数 此函数接收一个 grunt 的形参,内部提供一些创建任务时可以用到的API
*/
module.exports = grunt => {
// 定义一个同步任务,可用 yarn grunt foo 执行
grunt.registerTask('foo', () => {
console.log('hello grunt~')
})
// 定义一个异步任务, 可用 yarn grunt async-task 执行
grunt.registerTask('async-task', function() {
const done = this.async()
setTimeout(() => {
console.log('async task working')
done()
}, 1000)
})
// 标记同步任务失败
grunt.registerTask('bar', '任务描述', () => {
console.log('bar task')
return false // 标记失败
})
// 标记异步任务失败
grunt.registerTask('bad-async', function() {
const done = this.async()
setTimeout(() => {
console.log('bad async')
done(false) // 标记失败
}, 1500)
})
// 定义默认任务 可直接用 yarn grunt 执行
// 任务列表将会依次执行
grunt.registerTask('default', ['foo', 'bar', 'async-task'])
}
## 定义grunt任务的配置,修改 gruntfile.js 文件内容为如下:
module.exports = grunt => {
// 配置grunt数据
grunt.initConfig({
name: 'xiaoming',
address: {
city: 'Beijing'
},
build1: {
options: {
base: 10,
},
css: {
options: {
base: 20,
},
data: 11,
},
js: 22
}
})
// 任务中可获取grunt配置中的数据
grunt.registerTask('ming', () => {
console.log(grunt.config('name')) // xiaoming
console.log(grunt.config('address.city')) // Beijing
})
// 定义一个多目标任务
grunt.registerMultiTask('build1', function(){
console.log(this.options())
console.log(`target: ${this.target}, data: ${this.data}`)
})
/* yarn grunt build1, 将依次输出:
{ base: 20 }
target: css, data: [object Object]
{ base: 10 }
target: js, data: 22
*/
}
## grunt的常用插件
grunt-sass 编译scss文件为css文件
grunt-babel 编译es6+代码文件为js文件
grunt-contrib-watch 监听文件触发任务
grunt-contrib-clean 清除文件
修改 gruntfile.js 文件的内容为如下:
// grunt的常用插件
// grunt-sass:编译scss文件为css文件
// cnpm install grunt-sass sass --save-dev
// yarn grunt sass
// grunt-babel: 编译es6+代码文件为js文件
// cnpm install grunt-babel @babel/core @babel/preset-env --save-dev
// yarn grunt babel
// grunt-contrib-watch: 监听文件触发任务
// cnpm install grunt-contrib-watch --save-dev
// yarn grunt watch
// grunt-contrib-clean: 清除文件
// cnpm install grunt-contrib-clean --save-dev
// yarn grunt clean
// 可以自动加载所有grunt插件中的任务
// cnpm install load-grunt-tasks --save-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/css/main.scss'
}
}
},
babel: {
options: {
presets: ['@babel/preset-env'] // 可编译所有最新es6的特性
},
main: {
files: {
'dist/js/app.js' : 'src/js/app.js'
}
}
},
watch: {
js: {
files: ['src/js/*.js'],
tasks: ['babel']
},
css: {
files: ['src/css/*.scss'],
tasks: ['sass']
}
},
clean: {
temp: 'dist/**' // 删除dist文件夹以及其下所有文件
}
})
// grunt.loadNpmTasks('grunt-sass')
// grunt.loadNpmTasks('grunt-babel')
loadGruntTasks(grunt) // 它可以自动加载所有grunt插件中的任务
grunt.registerTask('default', ['sass', 'babel', 'watch'])
}
执行 yarn grunt。
## package.json内容:
{
"name": "grunt-sample",
"version": "1.0.0",
"description": "grunt已经不再流行 但鉴于其构建工具鼻祖的地位 还是有必要学习一下 使用grunt及其插件,可以定义编译scss为css,用babel编译最新版本js等任务",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitee.com/big-right-right/grunt-sample.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/preset-env": "^7.12.7",
"grunt": "^1.3.0",
"grunt-babel": "^8.0.0",
"grunt-contrib-clean": "^2.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-sass": "^3.1.0",
"load-grunt-tasks": "^5.1.0",
"sass": "^1.29.0"
}
}
本文 完。
本文介绍了构建工具grunt,虽不再流行,但因其鼻祖地位仍值得学习。文中说明了可使用grunt及其插件定义编译scss为css、用babel编译最新版本js等任务,还介绍了grunt常用插件,如grunt - sass、grunt - babel等,并提及修改gruntfile.js文件内容及执行yarn grunt。
3292

被折叠的 条评论
为什么被折叠?



