在开发过程中,我试图使用grunt将less文件编译成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。我做错了什么?
附言:我使用forever来启动我的应用程序,在同一个终端窗口中,我使用命令grunt watch,但当我更改较少的文件时,什么都不会发生。
PPS:我的文件结构如下:
root
-- public
-- less
-- css
正如你在上面看到的,我的主less文件位于root/public/liss/bootstrap.less,我希望css在root/public/css/bootstrip.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']);
}