Grunt 运行任务取决于文件修改，有可能吗？答案

【问题标题】：Grunt run task depending of file modified, it's possible?Grunt 运行任务取决于文件修改，有可能吗？
【发布时间】：2019-01-13 10:54:41
【问题描述】：

你能帮我解决这个问题吗？

我需要根据修改的文件运行特定任务，例如：

修改： _header.scss
运行： sass:header 任务

修改： _footer.scss
运行： sass:footer task

修改： _banners.scss
运行： sass:banners 任务

我一直在尝试在保存时获取文件名以将其用作参数，但我不知道如何做到这一点。

我的项目允许更多人同时工作，但定义项目的哪个组件将导出到 CSS 的工作是手动的，所以我试图将每个模块的最终 CSS 编译过程自动化。

我的问题是如何识别修改文件的名称，而不是文件的类型。

非常感谢！

【问题讨论】：

是的，grunt 将帮助您解决问题。您可以在 grunt watch (gruntfile.js) 中指定不同的文件和任务。以下是如何安装它的快速指南：gruntjs.com/getting-started
感谢您的回答，但我知道如何使用 grunt 编译文件和制作任务，但我的问题是如何识别修改文件的名称以根据文件名更改我的任务。
为每个文件定义一个watch任务（即_header.scss、_footer.scss等）。然后watch 任务的每个目标都可以调用适当的任务。例如;对于_header.scss 和_footer.scss 你的watch 任务将是这样的：watch: { header: { files: 'path/to/_header.scss', tasks: ['sass:header'] }, footer: { files: 'path/to/_footer.scss', tasks: ['sass:footer'] }, }, 然后通过你的CLI 运行grunt watch 并且每次_header.scss 和/或_footer.scss 被修改正确的sass:... 任务被调用。

标签： css sass gruntjs task watch

【解决方案1】：

它应该看起来像这样。当 sass 文件被更改时，grunt 会生成 css 文件并仅将更改的文件复制（到 dist 目录）。就你所见，连接和观察任务实现实时重新加载。

connect: {
  options: {
    port: ...
    livereload: 35729,
    hostname: '127.0.0.1'
  },
  livereload: {
    options: {
      base: [
        'some dist'
      ]
    }
  }
},
// check that files are changed
watch: {
  livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      'your dist/*.css'
    ]
  },
  // when sass file is changed, tasks will run
  // newer:copy means that we have to do task copy with changed files only
  sass: {
    files: ['your dir/*.sass'],
    tasks: ['sass', ...some other tasks like cssmin..., 'newer:copy']
  }
},
sass: {
  dist: {
    files: [
       ...sass to css
    ]
  }
},
copy: {
  css: {
    ....
  }
}

您也可以对grunt-changed 之类的任务感兴趣。该任务将另一个任务配置为使用已更改的src 文件运行。更多信息请查看页面grunt-changed

【讨论】：