grunt-watch正在跳過我的某些任務，為什么？

Question

我設置了一個grunt文件來自動執行某些任務。 我還將監視任務分解為較小的子任務，以防止它成為一項整體監視任務 。

每個任務過去都運行得很好，但是現在看來watch缺少一些文件更改，因為它們發生了。 例如，它將檢測我的scss中的更改並進行編譯。 但是它將錯過已編譯的CSS中的后續更改，並跳過自動前綴和ftp部署。

我該如何糾正？ 我是否需要使用debouncedelay，我的手表生成設置是否錯誤，或者還有其他問題？

module.exports = function(grunt) {

  // Load all grunt tasks matching the `grunt-*` pattern
  require('load-grunt-tasks')(grunt);

  // All configuration goes here 
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    // Template strings for directories
    dirs: {
      // Dev
      dev_js: 'js',
      dev_css: 'css',
      dev_scss: 'scss',
      dev_js_authored: '<%= dirs.dev_js %>/authored',
      dev_js_libs: '<%= dirs.dev_js %>/libs',
      dev_js_build: '<%= dirs.dev_js %>/build',
      dev_css_build: '<%= dirs.dev_css %>/build',
      // Production
      prod_server_root: '/wp-content/themes',
      prod_current_theme: '<%= dirs.prod_server_root %>/themename',
      prod_css: '<%= dirs.prod_current_theme %>/css'
    },

    // Template strings for ftp
    ftp_cred: {
      prod_host: 'ip-here',
      prod_auth: 'auth-here'
    },

    // Concatenate
    concat: {   
      js: {
        src: [
          '<%= dirs.dev_js_libs %>/*.js',
          '<%= dirs.dev_js_authored %>/*.js'
        ],
        dest: '<%= dirs.dev_js_build %>/production.js'
      }
    },

    // Minify
    uglify: {
      js: {
        src: '<%= dirs.dev_js_build %>/production.js',
        dest: '<%= dirs.dev_js_build %>/production.min.js'
      }
    },

    // Sass
    sass: {
      compile: {
        options: {
          style: 'compressed'
        },
        files: {
          'css/build/unprefixed.min.css': 'scss/global.scss'
        }
      }
    },

    // Autoprefixer
    autoprefixer: {
      prefix: {
        single_file: {
         src: '<%= dirs.dev_css_build %>/unprefixed.min.css',
         dest: '<%= dirs.dev_css_build %>/production.min.css'
        }
      }
    },

    // FTP
    'ftp-deploy': {
      css: {
        build: {
          auth: {
            host: '<%= ftp_cred.prod_host %>',
            port: 21,
            authKey: '<%= ftp_cred.prod_auth %>'
          },
          src: '<%= dirs.dev_css %>',
          dest: '<%= dirs.prod_css %>',
          exclusions: ['<%= dirs.dev_css_build %>/unprefixed.min.css']
        }        
      }
    },

    // Watch
    watch: {
      scripts_concat: {
        files: ['<%= dirs.dev_js_authored %>/*.js','<%= dirs.dev_js_libs %>/*.js'],
        tasks: ['concat:js']
      },
      scripts_min: {
        files: ['<%= dirs.dev_js_build %>/production.js'],
        tasks: ['uglify:js']
      },
      scss_compile: {
        files: ['<%= dirs.dev_scss %>/**/*.scss'],
        tasks: ['sass:compile']
      },
      css_prefix: {
        files: ['<%= dirs.dev_css_build %>/unprefixed.min.css'],
        tasks: ['autoprefixer:prefix']
      },
      ftp_css: {
        files: ['<%= dirs.dev_css_build %>/production.min.css'],
        tasks: ['ftp-deploy:css']
      },
      livereload: {
        options: { livereload: true },
        files: ['<%= dirs.dev_css_build %>/production.min.css','<%= dirs.dev_js_build %>/production.min.js']
      }
    }

  });

  // Load required plugins
  require('load-grunt-tasks')(grunt);

  // Define what to do at which command
  grunt.registerTask('default', ['watch']);

};

Answer 1

如果你運行grunt watch:scss_compile ，該ftp_css任務將無法運行，因此更改production.min.css不會觸發FTP部署...

因此，您可能希望在grunt-concurrent的幫助下同時運行兩個watch任務

concurrent: {
    options: {
        logConcurrentOutput: true
    },
    css: {
        tasks: ["watch:scss_compile", "watch:ftp_css"]
    }
}

然后：

grunt.registerTask(["concurrent:css"]); // add this task to your default task

請參閱參考資料以獲取更多詳細信息： 如何同時運行兩個grunt watch任務

但是，我將watch任務分為兩個塊： js和css ，因為我假設所有與css相關的任務無論如何都必須在更改后運行。 我會做類似的事情：

  css: {
    files: ['<%= dirs.dev_scss %>/**/*.scss'],
    tasks: ['sass:compile', 'autoprefixer:prefix', 'ftp-deploy:css', 'watch:livereload']
  },
  livereload: {
    options: { livereload: true },
    files: [
        '<%= dirs.dev_css_build %>/production.min.css',
        '<%= dirs.dev_js_build %>/production.min.js'
    ]
  }

Answer 2

好的，所以我發現了錯誤（這是我正在監視並將文件輸出到的文件夾中的混亂）。 最后，我將監視部分更改為較小的有意義的任務鏈集合，如下所示：

watch: {
  js_prod: {
    files: ['<%= dirs.dev_js_authored %>/*.js','<%= dirs.dev_js_libs %>/*.js'],
    tasks: ['concat:js','uglify:js','ftp-deploy:js_prod','clean:temp_js']
  },
  js_standalone: {
    files: ['<%= dirs.dev_js_standalone %>/*.js'],
    tasks: ['ftp-deploy:js_standalone']
  },
  css_prod: {
    files: ['<%= dirs.dev_scss %>/**/*.scss'],
    tasks: ['sass:compile','autoprefixer:prefix','ftp-deploy:css_prod']
  },
  css_ie: {
    files: ['<%= dirs.dev_css_ie %>/*.css','!<%= dirs.dev_css_ie %>/*.min.css'],
    tasks: ['cssmin:ie','ftp-deploy:css_ie','clean:temp_css_ie']
  },
  livereload: {
    options: { livereload: true },
    files: [
      '<%= dirs.dev_css %>/**/*.css',
      '<%= dirs.dev_js_build %>/production.min.js',
      '<%= dirs.dev_js_standalone %>/*.js']
  }
}

這樣可以很好地工作，而且我在監視任務不進行任何更改方面也沒有任何問題，因為我不會在他們正在監視的任何區域中同時工作。