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

以下是我要按顺序做的事情：

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

理想情况下，我想从我的目标或_builds目录中获取css文件并将其上传到我的localhost，但如果我能让这部分工作，我可以对其进行排序。

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

Answer 1

在grunt-contrib-watch github repo中查看此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别名。然后进行了以下更改：

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

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

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

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

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

<强>运行

当通过CLI运行.css命令时，对grunt文件（即驻留在.less目录中的文件）所做的任何更改都将以正确的顺序触发任务（根据您列出的要点1-4）。

警告：我实际上没有测试运行/front-end/less命令，但是最新生成的curl文件的文件路径被分配给.css变量filepath侦听器，因此在配置grunt.event.on('watch', ...)任务/目标时可以引用它。

注意：您需要确保服务器支持run.deploy_css_files.exec POST命令的curl请求（即不是SimpleHTTPServer）。

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

1 个答案: