Grunt
-
初始化
package.json文件yarn init # or npm init -
安装
grunt模块yarn add grunt --dev -
在项目根目录下创建
gruntfile.js入口文件，在里面定义一些需要grunt自动执行的构建任务/* gruntfile.js Grunt 的入口文件 用于定义一些需要 Grunt 自动执行的任务 需要导出一个函数 此函数接收一个 grunt 的形参,内部提供一些创建任务时可以用到的 API */ module.exports = grunt => { grunt.registerTask('foo', () => { console.log('hello grunt !'); }) } // 通过命令行运行 yarn grunt foo
grunt-foo
// 如果第二个参数是 字符串，会变成任务的描述 grunt.registerTask('bar', '任务描述', () => { console.log('bar!'); }) // 通过命令行查看
yarn grunt --help
```js
// 如果任务名称叫 'default' 会作为 grunt的默认任务
grunt.registerTask('default', () => {
console.log('default')
})
// 通过命令行运行
yarn grunt
// 如果第二个参数是 数组，会依次执行当中的任务
grunt.registerTask('default', ['foo','bar']);
grunt-arr
// 异步任务
grunt.registerTask('async-task', function () {
const done = this.async();
setTimeout(() => {
console.log('async task');
done(); // 标识任务完成
}, 100);
});
标记任务失败
grunt.registerTask('bad', () => {
console.log('bad');
return false;
});
grunt.registerTask('default', ['foo', 'bad', 'bar']);
// => 因为 bad 任务执行失败 使用 bar 任务不会执行
// 可使用 --force 强制执行
yarn grunt --force
grunt-fail
// 异步任务标记失败
grunt.registerTask('async-task', function () {
const done = this.async();
setTimeout(() => {
console.log('async task');
done(false); // 在 done 函数中添加 false
}, 100);
});
配置选项方法
module.exports = grunt => {
grunt.initConfig({
foo: 'bar'
});
grunt.registerTask('task', () => {
console.log(grunt.config('foo'));
});
}
多目标任务
module.exports = grunt => {
grunt.initConfig({
build: {
options: { // 作为任务的配置选项出现
msg: 'task options'
},
foo: {
options: { // 目标配置中的 options 会覆盖对象中的 options
msg: 'foo target options'
}
},
bar: 'bar'
}
});
// 多目标模式,可以让任务根据配置形成多个子任务
grunt.registerMultiTask('build', function () {
console.log(this.options());
/*
this.target: 当前配置目标
this.data: 配置的值
*/
console.log(`target: ${this.target}, data: ${this.data}`);
})
}
多目标任务
常用插件
1 grunt-contrib-clean：清除项目开发过程中产生的临时文件
1. 安装
yarn add grunt-contrib-clean --dev
2. 使用
module.exports = grunt => {
grunt.initConfig({
clean: {
temp: 'temp/**' // 需要清除的文件路径
}
})
// 加载插件中提供的任务
grunt.loadNpmTasks('grunt-contrib-clean');
}
3. 运行
yarn grunt clean
start-menu
end-menu
2 grunt-sass：处理sass样式
1. 安装
yarn add grunt-sass sass --dev
2. 使用
const sass = require('sass');
module.exports = grunt => {
grunt.initConfig({
sass: {
options: {
sourceMap: true, // 生成对应的 sourceMap 文件
implementation: sass // 使用什么模块来处理sass的编译
},
main: {
files: {
// 需要输出的css路径 : 输入的源路径
'dist/css/main.css': 'src/scss/main.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
}
3. 运行
yarn grunt sass
3. grunt-babel：编译ES6语法
1. 安装
yarn add grunt-babel @babel/core @babel/preset-env --dev
2. 减少 loadNpmTasks 的使用
yarn add load-grunt-tasks --dev
3. 使用
const loadGruntTasks = require('load-grunt-tasks');
module.exports = grunt => {
grunt.initConfig({
babel: {
options: {
sourceMap: true, // 生成对应的 sourceMap 文件
presets: ['@babel/preset-env'] // 将最新的ECMASript 特性加载进来
},
main: {
files: {
'dist/js/app.js': 'src/js/app.js'
}
}
}
});
loadGruntTasks(grunt); // 自动加载所有的 grunt 插件中的任务
}
4. 运行
yarn grunt babel
4. grunt-contrib-watch：当文件修改时自动编译
1. 安装
yarn add grunt-contrib-watch --dev
2. 使用
module.exports = grunt => {
grunt.initConfig({
watch: {
js: {
files: ['src/js/*.js'], // 需要监视的文件
tasks: ['babel'], // 文件发生改变时需要执行的任务
},
css: {
files: ['src/scss/*.scss'],
tasks: ['sass'],
}
}
});
loadGruntTasks(grunt); // 自动加载所有的 grunt 插件中的任务
// 确保在 yarn grunt 启动的时候先进行一次编译操作，然后再启动监听
grunt.registerTask('default', ['sass', 'babel', 'watch']);
}
3. 运行
yarn grunt
完整代码：
/*
Grunt 的入口文件
用于定义一些需要 Grunt 自动执行的任务
需要导出一个函数
此函数接收一个 grunt 的形参,内部提供一些创建任务时可以用到的 API
*/
const sass = require('sass');
const loadGruntTasks = require('load-grunt-tasks');
module.exports = grunt => {
grunt.initConfig({
sass: {
options: {
sourceMap: true, // 生成对应的 sourceMap 文件
implementation: sass // 使用什么模块来处理sass的编译
},
main: {
files: {
// 需要输出的css路径 : 输入的源路径
'dist/css/main.css': 'src/scss/main.scss'
}
}
},
babel: {
options: {
sourceMap: true,
presets: ['@babel/preset-env'] // 将最新的ECMASript特性加载进来
},
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 插件中的任务
// 确保在 yarn grunt 启动的时候先进行一次编译操作，然后再启动监听
grunt.registerTask('default', ['sass', 'babel', 'watch']);
}
full-menu
网友评论