Grunt 仅在更改的文件上运行 curl

Question

我正在尝试使用 grunt-run 和 curl 将文件上传到更改时的服务器。如果我将文件名硬编码到实际任务中，我可以让它工作，但我试图根据更改的文件运行它......到目前为止，这是我的 grunt 文件（精简到与此相关的部分问题）。

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");
        }
    });
}

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

1. 查看 /front-end/less 中的所有 LESS 文件
2. 如果文件发生变化，编译成css并放在front-end/_builds/css目录下
3. 将 front-end/_builds/css 的内容与我的 target/css 目录同步。
4. 通过 curl 将文件上传到我的本地主机。

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

任何帮助将不胜感激。谢谢。

Answer 1

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

“不要使用grunt.event.on('watch') 来运行你的任务。”

还有……

“监视事件不适用于运行任务。”

但是，您可以利用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 数组中省略。然后进行了以下更改：

1. 向watch 任务添加了一个名为generatedCss 的新target。它的files 值指定了保存结果.css 文件的目录的路径。 task 属性数组中的值设置为run:deploy_css_files。 nospawn 选项设置为 true。

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

   “理想情况下，我只想从我的目标或 _builds 目录中获取 css 文件并将其上传到我的本地主机，..”

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

   最终通过curl 上传到本地主机的文件将来自target/css/ 目录，因为这是我们正在监视更改的目录。

2. 将您原来的 run 任务替换为以下内容：

   run : {
     deploy_css_files : {
       exec: ''
     }
   }
   

   注意 目标已重命名并添加了exec 属性。它的值故意为空，因为这将通过watch 事件侦听器进行配置。

3. less 和 sync 目标在 default 注册任务的 watch 任务之前有别名。这可确保（最初通过 CLI 运行 grunt 时）watch:generatedCss 任务的 files 属性中定义的路径在 watching 开始之前存在。

1234563 .

---

跑步

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

警告：我实际上并没有测试运行curl 命令，但是最近生成的.css 文件的文件路径分配给grunt.event.on('watch', ...) 侦听器中的filepath 变量，因此配置run.deploy_css_files.exec任务/目标时可以参考。

注意：您需要确保服务器支持 POST 请求以使您的 curl 命令成功（即它与 SimpleHTTPServer 不同）。