Grunt
-
初始化
package.json文件yarn init # or npm init -
安裝
grunt模塊yarn add grunt --dev -
在項目根目錄下創(chuàng)建
gruntfile.js入口文件，在里面定義一些需要grunt自動執(zhí)行的構建任務/* gruntfile.js Grunt 的入口文件 用于定義一些需要 Grunt 自動執(zhí)行的任務 需要導出一個函數 此函數接收一個 grunt 的形參,內部提供一些創(chuàng)建任務時可以用到的 API */ module.exports = grunt => { grunt.registerTask('foo', () => { console.log('hello grunt !'); }) } // 通過命令行運行 yarn grunt foogrunt-foo// 如果第二個參數是 字符串，會變成任務的描述 grunt.registerTask('bar', '任務描述', () => { console.log('bar!'); }) // 通過命令行查看
yarn grunt --help
```js
// 如果任務名稱叫 'default' 會作為 grunt的默認任務
grunt.registerTask('default', () => {
console.log('default')
})
// 通過命令行運行
yarn grunt
// 如果第二個參數是 數組，會依次執(zhí)行當中的任務
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 任務執(zhí)行失敗 使用 bar 任務不會執(zhí)行
// 可使用 --force 強制執(zhí)行
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: { // 作為任務的配置選項出現(xiàn)
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：清除項目開發(fā)過程中產生的臨時文件
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'], // 需要監(jiān)視的文件
tasks: ['babel'], // 文件發(fā)生改變時需要執(zhí)行的任務
},
css: {
files: ['src/scss/*.scss'],
tasks: ['sass'],
}
}
});
loadGruntTasks(grunt); // 自動加載所有的 grunt 插件中的任務
// 確保在 yarn grunt 啟動的時候先進行一次編譯操作，然后再啟動監(jiān)聽
grunt.registerTask('default', ['sass', 'babel', 'watch']);
}
3. 運行
yarn grunt
完整代碼：
/*
Grunt 的入口文件
用于定義一些需要 Grunt 自動執(zhí)行的任務
需要導出一個函數
此函數接收一個 grunt 的形參,內部提供一些創(chuàng)建任務時可以用到的 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'], // 需要監(jiān)視的文件
tasks: ['babel'], // 文件發(fā)生改變時需要執(zhí)行的任務
},
css: {
files: ['src/scss/*.scss'],
tasks: ['sass'],
}
}
});
// grunt.loadNpmTasks('grunt-sass');
loadGruntTasks(grunt); // 自動加載所有的 grunt 插件中的任務
// 確保在 yarn grunt 啟動的時候先進行一次編譯操作，然后再啟動監(jiān)聽
grunt.registerTask('default', ['sass', 'babel', 'watch']);
}
full-menu
