Gruntjs 使用grunt contrib watch时，grunt autoprefixer会无休止地循环

我只是在学咕哝。我将使用compass生成垂直节奏和图像精灵，并使用autoprefixer作为css3样式的前缀

这是我的grunfile.js

module.exports = function(grunt) {
  var globalConfig = {
    sassDir: 'sass',
    cssDir: 'css'
  };

  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  // Project configuration.
  grunt.initConfig({
    globalConfig: globalConfig,
    pkg: grunt.file.readJSON('package.json'),
    compass: {
      dev: {
        options: {
          sassDir: '<%= globalConfig.sassDir %>',
          cssDir: '<%= globalConfig.cssDir %>'
        }
      }
    },
    autoprefixer: {
      dev: {
        options: {
          browsers: ['last 2 versions']
        },
        src: '<%= globalConfig.cssDir %>/style.css',
        dest: '<%= globalConfig.cssDir %>/style.css'
      }
    },
    watch: {
      compass: {
        files: ['<%= globalConfig.sassDir %>/**/*.scss'],
        tasks: ['compass:dev'],
      },
      autoprefixer: {
        files: ['<%= globalConfig.cssDir %>/style.css'],
        tasks: ['autoprefixer:dev']
      },
      livereload: {
        options: { livereload: true },
        files: ['<%= globalConfig.cssDir %>/style.css']
      }
    }
  });

  // Default task(s) that will be run by invoking 'grunt' w/o args
  grunt.registerTask('styles:dev', ['compass', 'autoprefixer']);
  grunt.registerTask('default', ['styles:dev', 'watch']);
};

除了grunt contrib watch没完没了地调用grunt autoprefixer之外，一切都正常工作

我刚开始学咕噜声。这可能是我的grunfile.js上的错误配置

---

我希望您能在这里帮助我。

将您的任务配置更改为：

watch: {
  compass: {
    files: ['<%= globalConfig.sassDir %>/**/*.scss'],
    tasks: ['compass:dev', 'autoprefixer:dev']
  },
  livereload: {
    options: { livereload: true },
    files: ['<%= globalConfig.cssDir %>/style.css']
  }
}

观察：{
指南针：{
文件：['/***.scss']，
任务：['compass:dev'，'autoprefixer:dev']
},
利弗雷罗德：{
选项：{livereload:true}，
文件：['/style.css']
}
}

---

基本上，grunt contrib watch会在文件更新时运行任务，因为源文件和目标文件相同，所以会将其变成无限循环。一旦compass任务构建了css，只需运行自动刷新。希望这有帮助。：-）

如果您不介意的话，您是否可以分享一些配置gruntfile.js的最佳实践技巧？：）谢谢。一旦你习惯了配置任务，你会发现很多不同的插件可以自动完成各种常见的开发工作。在这个例子中，我并没有太多的最佳实践可供参考，您已经为公共目录设置了配置，使用了matchdep技巧等。我发现，只要您阅读每个插件的文档，就可以非常简单地开始工作。当然，可以在npm存储库中浏览新插件，但有很多东西需要发现：-）

watch: {
  compass: {
    files: ['<%= globalConfig.sassDir %>/**/*.scss'],
    tasks: ['compass:dev', 'autoprefixer:dev']
  },
  livereload: {
    options: { livereload: true },
    files: ['<%= globalConfig.cssDir %>/style.css']
  }
}