用於監視的文件

Question

運行任務考慮以下Gruntfile.js

module.exports = function(grunt) { 
    var 
     stylusFiles = [ 
      { 
       expand: true, 
       cwd: 'radio/static/css/', 
       src: ['*.styl'], 
       ext: ['.css'] 
      }, 
      { 
       expand: true, 
       cwd: 'radio/static/polymer/radio-light/', 
       src: ['**/*.styl'], 
       ext: ['.css'] 
      }, 
      { 
       expand: true, 
       cwd: 'radio/static/themes/', 
       src: ['**/*.styl'], 
       ext: ['.css'] 
      } 
     ]; 

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

     stylus: { 
      all: { 
       files: stylusFiles, 
      }, 
     }, 

     watch: { 
      files: [ 
       'radio/static/css/*.styl', 
       'radio/static/themes/**/*.styl', 
       'radio/static/polymer/radio-light/**/*.styl', 
      ], 
      tasks: ['stylus:all'], 
     } 
     }); 


    // Other stuff 
}; 

手寫任務編譯指定文件夾中找到的每個.styl文件。 現在觀看導致重新編譯所有.styl文件的任務，並且我只想重新編譯僅監視的文件。
我已閱讀了一些關於watch.event的內容，但我無法理解如何使用監視的路徑名運行默認任務（例如stylus:single）。
換句話說，有沒有一種方法來實現手寫筆子任務，它可以通過grunt.task.run()與自定義文件選項運行？

已更新：解決方案在我自己的答案中。

Answer 1

在這種特殊情況下的解決方案如下：

• 創建監視任務，不運行任何任務的所有目標文件和產卵設置爲false：

  grunt.initConfig({ 
      // ... 
      watch: { 
       stylus: { 
        files: ['whatever/*.styl'], 
        options: { 
         spawn: false, 
        }, 
       }, 
      }, 
      // .. 
  }) 
  

  • 傾聽觀看事件：
    grunt.event.on('watch', function (action, filepath) { /* ... */ });

  • 檢查動作類型：如果文件沒有被重新編譯它刪除，刪除otherway相應的CSS文件

完整的代碼示例：

grunt.initConfig({ 
    // ... 
    stylus: { 
     compile: { 
      files: [ 
       { 
        expand: true, 
        cwd: 'whatever/', 
        src: ['/stylus/*.styl'], 
        dest: 'css/', 
        ext: '.css', 
        // Compile all files from 'whatever/stylus' and put results 
        // in 'whatever/css/<proper name>.css' 
       }, 
      ], 
     }, 
    }, 
    watch: { 
     stylus: { 
      files: ['whatever/*.styl'], 
      options: { 
       spawn: false, 
      }, 
     }, 
    }, 
    // .. 
}); 

grunt.event.on('watch', function (action, filepath) { 
    var 
     dst, ext, files; 
    dst = filepath.split('.'); 
    ext = dst.slice(-1); 
    if (ext == 'styl') { 
     // prepare destination file name, 
     // e.g. <dir>/stylus/<name>.styl -> <dir>/css/<name>.css 
     dst.splice(-1,1,'css'); 
     dst = dst.join('.').split('/'); 
     dst.splice(-2,1,'css'); 
     dst = dst.join('/'); 

     if (action != 'deleted') { 
      // replace stylus task dynamic patter 
      files = {}; 
      files[dst] = filepath; 
      grunt.config('stylus.compile.files', files); 
      grunt.task.run('stylus:compile'); 
     } else { 
      // delete obsolete css file 
      grunt.file.delete(dst); 
      grunt.log.writeln('File "' + dst + '" deleted.'); 
     } 

    } 
}); 

幫助鏈接：

• grunt-contrib-watch README
• Grunt FAQ: How can I share parameters across multiple tasks?
• Grunt FAQ: Globals and configs

希望，這將幫助別人。

Answer 2

我明白的方式是，您可以創建多個json對象並分配給變量。那麼在你的stylus中創建如下的多個子任務。因此，您也可以對watch使用相同的子任務。

ex。

var stylusStaticFiles = [ { 
     expand : true, 
     cwd : 'radio/static/css/', 
     src : [ '*.styl' ], 
     ext : [ '.css' ] 
    } ]; 

    var stylusRadioLightFiles = [ { 
     expand : true, 
     cwd : 'radio/static/polymer/radio-light/', 
     src : [ '**/*.styl' ], 
     ext : [ '.css' ] 
    } ]; 

    var stylusthemesFiles = [ { 
     expand : true, 
     cwd : 'radio/static/themes/', 
     src : [ '**/*.styl' ], 
     ext : [ '.css' ] 
    } ]; 

在手寫筆

  stylus: { 
     stylusStaticFiles: { 
        files: stylusStaticFiles, 
       }, 
       stylusRadioLightFiles: { 
        files: stylusRadioLightFiles, 
       }, 
       stylusthemesFiles: { 
        files: stylusthemesFiles, 
       } 
    } 

在鐘錶

watch: { 
      stylusStaticFiles: { 
       files: ['radio/static/css/*.styl'], 
       tasks: ['stylus:stylusStaticFiles'] 
      }, 

      stylusRadioLightFiles: { 
       files: ['radio/static/themes/**/*.styl'], 
       tasks: ['stylus:stylusRadioLightFiles'] 
      }, 
      stylusthemesFiles: { 
       files: ['radio/static/polymer/radio-light/**/*.styl'], 
       tasks: ['stylus:stylusthemesFiles'] 
      } 
    } 

讓我知道這對你的作品。