Question

我已经设置了一个grunt文件来自动完成我的一些任务。我还将我的监视任务拆分为较小的子任务，转移到prevent it becoming one monolithic watch task。

每个用于运行的各个任务都非常好，但现在看来手表在发生时缺少一些文件更改。例如，它会检测到我的scss中的更改并进行编译。但它会错过编译后的css中的后续更改，并跳过autoprefix和ftp-deploy。

我该如何纠正？我需要使用debouncedelay，我的手表spawn设置错误，还是有其他问题？

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

详细了解参考资料：How to run two grunt watch tasks simultaneously

但是，我会将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']
  }
}

这很好用，我没有更多的问题，因为我不会在他们正在观看的任何区域同时工作。

grunt-watch正在跳过我的一些任务，为什么？

2 个答案: