G运行t 运行仅对已更改的文件进行卷曲

Question

我正在尝试使用 g运行t-运行和 curl 将文件上传到更改后的服务器。如果我将文件名硬编码到实际任务中，我可以让它工作，但我正在尝试运行它基于更改的文件...这是我的 g运行t 文件所以远（剥离到与这个问题相关的部分）。

module.exports = function(grunt) {

    var config = require('./config.json');

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        watch: {              
            less : {
                files : ['front-end/less/**/*.less'],
                tasks : ['newer:less','sync:css','run:deploy_less_files']
            }, 
        },

        less: {
            development: {
                options: {
                    paths: ['front-end/_builds/css'],
                    sourceMap : true,                    
                },
                files: [{                
                    cwd: "front-end/less",
                    expand : true,
                    src : [ '**/*.less', '!_settings.less'],
                    dest : "front-end/_builds/css",
                    ext: ".css"
                }]
            },
        },

        sync : {
            target: {},
            css : {
                expand: true,
                flatten :true,
                verbose: true,
                cwd : "front-end/_builds/css/",
                src : "**/*.css",
                dest : "target/css/"
            },       
        },

        run : {
            deploy_less_files : {}
        }
    });


    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-sync');
    grunt.loadNpmTasks('grunt-run');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-newer');
       
   

    grunt.registerTask('default', ['watch']);

    grunt.event.on('watch', function(action, filepath, target) {
        if (target == "less") {
            grunt.config.set('run.deploy_less_files.exec','curl -u ' + config.credentials.user + ':' + config.credentials.pw + ' -T  ' + filepath + ' http://localhost:8080/assets/less/');
            grunt.task.run("run:deploy_less_files");
        }
    });
}

这是我要按顺序执行的操作：

观看 /front-end/less
如果文件发生变化，将其编译为css并放置在front-end/_builds/css目录中
将 front-end/_builds/css 的内容与我的 target/css 目录同步。
通过 curl 将文件上传到我的本地主机。

理想情况下，我只想从我的目标或 _builds 目录中获取 css 文件并将其上传到我的本地主机，但如果我能让这部分工作，我可以解决这个问题。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

在 grunt-contrib-watch github 存储库中查看此 comment。摘录如下：

"Don't use grunt.event.on('watch') to run your tasks."

和...

"The watch event is not intended for running tasks."

但是，您可以利用 grunt.event.on('watch', ...) 侦听器来配置 exec 属性。

以下要点显示了如何满足您的要求：

Gruntfile.js

module.exports = function(grunt) {

  var config = require('./config.json');

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    watch: {              
      less : {
        files : ['front-end/less/**/*.less'],
        tasks : ['newer:less','sync:css'/*,'run:deploy_less_files'*/]
      },

      // 1. Added new target to watch the directory in which the resultant
      //    .css files are saved. Set the `task` to `run:deploy_css_files`.
      //    The `nospawn` option must be set to true.
      generatedCss : {
        files : ['target/css/**/*'],
        tasks : ['run:deploy_css_files'],
        options: {
          nospawn: true
        }
      }
    },

    less: {
      development: {
        options: {
          paths: ['front-end/_builds/css'],
          sourceMap : true,                    
        },
        files: [{                
          cwd: "front-end/less",
          expand : true,
          src : [ '**/*.less', '!_settings.less'],
          dest : "front-end/_builds/css",
          ext: ".css"
        }]
      },
    },

    sync : {
      target: {},
      css : {
        expand: true,
        flatten :true,
        verbose: true,
        cwd : "front-end/_builds/css/",
        src : "**/*.css",
        dest : "target/css/"
      },       
    },

    run : {
      deploy_css_files : {// 2. Renamed target and added `exec` key. The
        exec: ''          //    `exec` value is intentionally empty and will
      }                   //    be configured via the `watch` event listener.
    }
  });


  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-sync');
  grunt.loadNpmTasks('grunt-run');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-newer');


  // 3. 'less' and 'sync' targets are aliased before the `watch`
  //    task to ensure the path defined in the `files` property of the
  //    `watch:generatedCss` task exists before `watch`ing.
  grunt.registerTask('default', ['less', 'sync', 'watch']);

  // 4. Listen for changes via the `watch:generatedCss` target only.
  //    Configures the `exec` property of the `run:deploy_css_files`
  //    target to `curl` the most recently created `.css` file.
  grunt.event.on('watch', function(action, filepath, target) {

    if (target === 'generatedCss') {
      var cmd = 'curl -u ' + config.credentials.user + ':' +
          config.credentials.pw + ' -T  ' + filepath +
          ' http://localhost:8080/assets/less/';

      grunt.config('run.deploy_css_files.exec', cmd);
    }

  });
}

进一步说明

首先，在上面的 Gruntfile.js 中，您会注意到 run:deploy_less_files 别名已从原始 watch.less.tasks 数组中省略。然后进行了以下更改：

添加了一个新的 target named generatedCss to the watch Task. Its files value specifies the path to the directory in which the resultant .css files are saved. The value in the task property array is set to run:deploy_css_files. The nospawn 选项设置为 true。

注意正如您在问题中提到的：

"Ideally, I'd like to just grab the css file from either my target or the _builds directory and upload it to my localhost,.."

我选择将目标命名为 generatedCss 并将任务重命名为运行 deploy_css_files（而不是 deploy_less_files），因为这样可以更好地反映实际意图。

最终通过 curl 上传到本地主机的文件将来自 target/css/ 目录，因为这是我们正在观察变化的目录。
将原来的 run 任务替换为以下内容：
```
run : {
  deploy_css_files : {
    exec: ''
  }
}
```
注意目标已重命名并添加了 exec 属性。它的值是有意为空的，因为这将通过 watch 事件侦听器进行配置。
less 和 sync 目标在 default 注册任务的 watch 任务之前是别名。这可确保（当最初通过 CLI 运行ning grunt 时），watch:generatedCss 任务的 files 属性中定义的路径存在于 watching 开始。
最后，在 grunt.event.on('watch', ...) 侦听器中，我们仅通过 watch:generatedCss 目标侦听更改，并配置 exec 属性 run:deploy_css_files 定位到 curl 最近创建的 .css 文件。

运行

当通过 CLI 运行执行 grunt 命令时，对 .less 文件（即位于 /front-end/less 目录中的文件）所做的任何更改都将触发任务顺序正确（根据您列出的第 1-4 点）。

警告：我实际上并没有测试运行ning curl 命令，但是最近生成的 .css 文件的文件路径被分配给grunt.event.on('watch', ...) 监听器中的 filepath 变量，因此在配置 run.deploy_css_files.exec task/target.

时可以引用它

注意：您需要确保服务器支持 POST 请求才能使您的 curl 命令成功（即它不是 SimpleHTTPServer 之类的东西）。

G运行t 运行仅对已更改的文件进行卷曲

Grunt run curl on changed file only

javascript

gruntjs

G运行t 运行 仅对已更改的文件进行卷曲

Grunt run curl on changed file only

javascript

gruntjs

G运行t 运行仅对已更改的文件进行卷曲