GruntJS如何監視所有文件，但僅處理那些更改的文件？

我有一個web應用程序，其目錄結構如下：GruntJS如何監視所有文件，但僅處理那些更改的文件？

src/ 
- styles/ 
    - a.css 
    - b.css 
    - c.scss 
    - d.scss 
- media/ 
    - d.jpg 
    - e.png 
    - f.mpf 
dest/ 
- css/ 
- media/ 
package.json 
Gruntfile.js

我想用Gruntfile觀看文件的更改。當他們改變，處理或複製它們。我不希望文件被不正當地複製或處理。我試圖弄清楚如何用Gruntfile來做到這一點，並發現它非常棘手。

我來自C++和makefiles的世界。它們非常棒，因爲對於每個派生文件，您可以指定要派生它的命令以及派生直接依賴的文件。如果任何依賴項文件比目標文件更新，則會運行您的命令。如果任何依賴文件都不存在，那麼它將基於這個相同的遞歸邏輯生成。

如何在Grunt中實現同樣的功能？指定手錶可讓您觀看多個文件以進行更改。但是，您運行的命令通常不是特定於更改的文件。

我的Gruntfile是here。請告訴我，我怎麼可以修改它來實現以下3個原則：

當任何文件的src /風格/ .scss變化，薩斯編譯它，並將結果在dest/CSS/的.css。然後將它縮小到dest/css/*。min.css
當任何文件src/styles/.css更改時，將其複製到dest/css/ .css。然後縮小它什特/ CSS/*。min.css
當任何文件的src /媒體/ *的變化，將其複製到dest /媒體/ *

我希望這些規則是通用的。 IE：我不想爲b.scss和d.scss編寫單獨的規則。爲每個文件明確指定類似的規則似乎很愚蠢。

來源

2016-11-26 Saqib Ali

'watch：{/ * ... * /}'對象下的所有值都是配置對象，它們都將在'grunt watch'上運行，並且它們指定一組要運行的任務F iles變化。 –

是的威廉。但是我怎麼能告訴它：*當文件c.scss改變時，只在c.scss上運行sass，然後把生成的.css文件放到dest/css/c.css中。那麼minfiy dest/css/c.css只能進入dest/css/c.min.css *？ –

在'files'屬性中指定c.scss –

您需要添加一個模塊grunt-concurrent運行的手錶多發實例：

concurrent: { 
dev: { 
    tasks: [ 
    'watch:sass:12340', 
    'watch:copy_css:12350', 
    ], 
    options: { 
    logConcurrentOutput: true 
    } 
    } 
} 
grunt.loadNpmTasks('grunt-concurrent');

，我想我會以這種方式編輯錶款：

watch: { 
    sass: { 
     files: ['src/css/*.scss'], 
     tasks: ['sass:all','cssmin'], 
     options: { 
      spawn: false 
     } 
    }, 
    copy_css: { 
     files: 'src/css/*.css', 
     tasks: ['copy:all','cssmin'], 
     options: { 
      spawn: false 
     } 
    }, 
    copy_media: { 
    files: 'src/media/**', 
    tasks: ['copy'] 
    } 
}

不是運行grunt concurrent:dev

來源

2017-03-02 15:07:03

GruntJS如何監視所有文件，但僅處理那些更改的文件？

回答

相關問題