系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
在 Magento 2 中，Grunt 是一个常用的任务运行器，用于执行一些常见的前端开发任务，例如编译 LESS 文件、压缩 JavaScript 文件等。下面是一个简单的 Magento 2 Grunt 编译 LESS 文件的代码示例：
首先，需要安装 Grunt 和相关插件。可以使用以下命令安装：
npm install -g grunt-cli npm install grunt grunt-contrib-less grunt-contrib-watch --save-dev
接下来，在 Magento 2 的主题文件夹中创建一个 Gruntfile.js 文件，并添加以下代码：
javascript
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: true,
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: 'styles.css.map',
sourceMapFilename: 'css/styles.css.map'
},
files: {
'css/styles.css': 'less/styles.less'
}
}
},
watch: {
less: {
files: ['less/**/*.less'],
tasks: ['less']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less', 'watch']);
};上述代码定义了一个 less 任务和一个 watch 任务。less 任务用于编译 LESS 文件，并生成对应的 CSS 文件和 Source Map 文件。watch 任务用于监视 LESS 文件的变化，并在文件变化时重新编译 LESS 文件。
在上述代码中，LESS 文件位于 less/styles.less，编译后生成的 CSS 文件位于 css/styles.css，Source Map 文件位于 css/styles.css.map。
最后，在终端中进入 Magento 2 的主题文件夹，运行以下命令即可开始监听 LESS 文件的变化并实时编译：
Copy code
grunt
需要注意的是，如果 Magento 2 使用了缓存，可能需要在每次修改 LESS 文件后清除缓存才能看到效果。可以使用以下命令清除缓存：
php bin/magento cache:clean