Yeoman/Grunt 和 Grunticon 工作流程

【问题标题】：Yeoman/Grunt and Grunticon workflowYeoman/Grunt 和 Grunticon 工作流程
【发布时间】：2026-01-21 07:45:02
【问题描述】：

我已经开始与 Yeoman 合作。我已经在使用 GruntIcon。我正在尝试合并工作流程，但只能想到一个非常复杂的解决方案。

问题来了：我已经设置了 Grunticon，以便它只将我在构建任务中的 svg 文件转换为 dist 文件夹。但是，我还想在“应用”或“开发”环境中使用我的 svg 文件。

我只能想到一种方法： - 为 Grunticon 制作一个单独的工作流程，并手动将其放入我的应用文件夹中，然后将其复制到我的构建任务中。

有人有一个流畅的 grunticon 工作流程吗？

【问题讨论】：

标签： javascript svg gruntjs yeoman

【解决方案1】：

“yo-webapp + grunticon” 的工作流程如下所示：

grunt serve

Gruntfile.js

svgmin: {
  dist: {
    ...
  },
  server: {
    files: [{
      expand: true,
      cwd: '<%= config.app %>/images/svgs',
      src: '{,*/}*.svg',
      dest: '<%= config.app %>/images/svg-src'
    }]
  }
},

grunticon: {
  dist: {
    ...  
  },
  server: {
      files: [{
          expand: true,
          cwd: '<%= config.app %>/images/svg-src',
          src: '{,*/}*.svg',
          dest: '<%= config.app %>/images/svg-dist'
       }],

  }
},

在grunt.registerTask('serve',.... 中你必须添加grunticon:server:

grunt.task.run([
'clean:server',
'wiredep',
'concurrent:server',
'autoprefixer',
'grunticon:server',
'connect:livereload',
'watch'
]);

您可以像这样将“grunticon”添加到“watch”任务中：

  grunticon: {
    files: ['<%= config.app %>/images/svgs/*.svg'],
    tasks: ['svgmin:server', 'grunticon:server']
  },

【讨论】：