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如何监视所有文件，但仅处理那些更改的文件？

回答

相关问题