当使用grunt-contrib-watch时,grunt-autoprefixer无休止地循环

Question

我只是在学习Grunt.我将使用罗盘进行垂直节奏和图像精灵生成,并使用autoprefixer为css3样式添加前缀.

这是我的Gruntfile.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

一切都按预期工作,除了grunt-contrib-watch无休止地调用grunt-autoprefixer.

我刚开始学习Grunt.这可能是我的Gruntfile.js上的错误配置

我希望你能在这里帮助我.

Answer 1

将您的任务配置更改为:

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

基本上,grunt-contrib-watch将在文件更新时运行任务,并且因为源文件和目标文件相同,所以它会将其转换为无限循环.一旦您的指南针任务构建了您的CSS,只需运行自动修复.希望这可以帮助.:-)