![](/img/trans.png)
[英]Grunt Watch LESS files in folder and create css when less file is changed
[英]How to setup a grunt file to watch and compile less files
我正在尝试使用grunt在开发过程中将较少的文件编译为CSS。 同时,观看并重新加载。 我写的文件是这样的:
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
"public/css/bootstrap.css": "./public/less/bootstrap.less"
}
}
},
watch: {
styles: {
// Which files to watch (all .less files recursively in the less directory)
files: ["public/less/*"],
tasks: ['less'],
options: {
livereload: true,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
我将其另存为gruntfile.js在项目根目录中。 我究竟做错了什么?
PS:我一直在使用永久启动我的应用程序,并且在同一终端窗口中使用命令grunt watch,但是当我更改较少的文件时,什么也没发生。
PPS:我的文件结构如下:
root
-- public
-- less
-- css
如您所见,我的主less文件位于root / public / less / bootstrap.less,我希望将CSS编译为root / public / css / bootstrap.css
非常感谢
您的设置似乎不错,但我在这里发现了问题...可能解决了您的问题
"public/css/bootstrap.css": "./public/less/bootstrap.less"
^^
您的网址是相同的,但是在第二个外观中,您添加了额外的“ ./”,我认为如果删除它,它将起作用。
这是我自己的代码,工作正常。
module.exports = function(grunt){
grunt.initConfig({
//pkg:grunt.file.readJSON('package.json'),
less:{
development:{
options:{
compress: true,
yuicompress: true,
optimization: 2
},
files:{
'webroot/css/meer/index/index2.css' : 'webroot/css/meer/index/index2.less'
}
}
},
watch: {
styles:{
options:{
livereload: true,
spawn: false,
event: ['added','deleted','changed']
},
files:['webroot/css/meer/index/*.less'],
tasks:['less']
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.