Grunt只监视更改文件 [英] Grunt watch less on changed file only
问题描述
我想要一个包含2个任务的grunt文件：less（编译所有较少的文件）和watch（监听更改并重新编译更改后的文件）。
我有以下Gruntfile.js：
$ p $ module.exports = function（grunt）{
var files = [
{
展开：true，
cwd：'media / less'，
src：['* .less']，
dest：'media / css /' ，
ext：'.css'
}，
{
展开：true，
cwd：'media / less / vendor'，
src： ['* .less']，
dest：'media / css / vendor /'，
ext：'.css'
}，
{
展开： true，
cwd：'media / admin / less'，
src：['* .less']，
dest：'media / admin / css /'，
ext ：'.css'
}
];
grunt.initConfig（{
less：{
development：{
options：{
compress：false，
yuicompress：true，
优化：2
}，
文件：文件
}，
制作：{
选项：{
压缩：true，
yuicompress：true，
optimization：2
}，
files：files
}
}，
watch：{
styles： {
files：['media / ** / *。less']，
tasks：['less：development']，
options：{
nospawn：true
}
}
}
}）;
grunt.loadNpmTasks（'grunt-contrib-less'）;
grunt.loadNpmTasks（'grunt-contrib-watch'）;
grunt.registerTask（'default'，['less：development']）;
};
less 任务运行正常，没有任何问题。然而， watch 任务会监听更改，但在更改时重新编译所有文件。我怀疑这与我如何设置我的 less 任务有关，因为我希望我的少文件列表是动态的，而不是手动添加每个文件。
根据这个答案 grunt应该已经支持这个了，但我不确定如何。
手表事件并覆盖 files less 任务的属性。这是我的最终代码： module.exports = function（grunt）{
var files = [
{
expand：true，
cwd：'media / less'，
src：['* .less']，
dest：'media / css /'，
ext：'.css'，
extDot：'last'
}，
{
展开：true，
cwd：'media / less / vendor' ，
src：['* .less']，
dest：'media / css / vendor /'，
ext：'.css'，
extDot：'last'
}，
{
展开：true，
cwd：'media / admin / less'，
src：['* .less']，
dest：'media / admin / css /'，
ext：'.css'，
extDot：'last'
}
];
grunt.initConfig（{
less：{
development：{
options：{
compress：false，
yuicompress：true，
优化：2
}，
文件：文件
}，
制作：{
选项：{
压缩：true，
yuicompress：true，
optimization：2
}，
files：files
}
}，
watch：{
styles： {
files：['media / ** / *。less']，
tasks：['less：development']，
options：{
nospawn：true
}
}
}
}）;
grunt.event.on（'watch'，function（action，filepath）{
//忽略包含文件，TODO：命名约定
//如果包含文件（filepath.indexOf（'.inc。'）> -1）
返回true;
//可能会重新编译所有文件
不是执行此操作的最有效方式
var srcDir = filepath.split（'/'）;
var filename = srcDir [srcDir.length - 1];
删除srcDir [srcDir。长度 - 1];
srcDir = srcDir.join（'/'）;
var destDir = srcDir.replace（/ less / g，'css'）;
grunt .config（'less.development.files'，[{
src：filename，
dest：destDir，
展开：true，
cwd：srcDir，
ext ：'.css'，
extDot：'last'
}]）;
}）;
grunt.loadNpmTasks（'grunt-contrib-less'）;
grunt.loadNpmTasks（'grunt-contrib-watch'）;
grunt.registerTask（'default'，['less：development']）;
};
I want to have a gruntfile with 2 tasks: less (compiles all less files) and watch (listens to changes and re-compiles the changed file).
I have the following Gruntfile.js:
module.exports = function(grunt) {
var files = [
{
expand: true,
cwd: 'media/less',
src: ['*.less'],
dest: 'media/css/',
ext: '.css'
},
{
expand: true,
cwd: 'media/less/vendor',
src: ['*.less'],
dest: 'media/css/vendor/',
ext: '.css'
},
{
expand: true,
cwd: 'media/admin/less',
src: ['*.less'],
dest: 'media/admin/css/',
ext: '.css'
}
];
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files
}
},
watch: {
styles: {
files: ['media/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less:development']);
};
The less task runs correctly without any problems. The watch task however listens to changes, but re-compiles all files when one is changed. I suspect it's something to do with how I set up my less task, because I want my less file list to be dynamic and not to add each file manually.
As per this answer grunt should already support this, but I'm unsure how.
Ended up using the watch event and overriding the files property of the less task. Here's my final code:
module.exports = function(grunt) {
var files = [
{
expand: true,
cwd: 'media/less',
src: ['*.less'],
dest: 'media/css/',
ext: '.css',
extDot: 'last'
},
{
expand: true,
cwd: 'media/less/vendor',
src: ['*.less'],
dest: 'media/css/vendor/',
ext: '.css',
extDot: 'last'
},
{
expand: true,
cwd: 'media/admin/less',
src: ['*.less'],
dest: 'media/admin/css/',
ext: '.css',
extDot: 'last'
}
];
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: files
},
production: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: files
}
},
watch: {
styles: {
files: ['media/**/*.less'],
tasks: ['less:development'],
options: {
nospawn: true
}
}
}
});
grunt.event.on('watch', function(action, filepath){
// ignore include files, TODO: have naming convention
// if an include file has been changed, all files will be re-compiled
if(filepath.indexOf('.inc.') > -1)
return true;
// might not be the most efficient way to do this
var srcDir = filepath.split('/');
var filename = srcDir[srcDir.length - 1];
delete srcDir[srcDir.length - 1];
srcDir = srcDir.join('/');
var destDir = srcDir.replace(/less/g, 'css');
grunt.config('less.development.files', [{
src: filename,
dest: destDir,
expand: true,
cwd: srcDir,
ext: '.css',
extDot: 'last'
}]);
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less:development']);
};
这篇关于Grunt只监视更改文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
