Gruntjs 如何摆脱grunt processhtml“”标记

我正在尝试从Javascript动态加载一些css文件

片段：

  if (theme === 'testtheme' || theme === 'testtheme/') {
    css =
      <!-- build:css({.tmp,app}) styles/main_testtheme.css -->
      '<link rel="stylesheet" href="styles/css/main_testtheme.css" type="text/css" />'
      <!-- endbuild -->
    ;
  } else {
    css =
      <!-- build:css({.tmp,app}) styles/main.css -->
      '<link rel="stylesheet" href="styles/css/main.css" type="text/css" />'
      <!-- endbuild -->
    ;
  }

这将允许测试未统一的未构建版本和缩小版本。Grunt构建对我来说大约需要5分钟，所以我在开发时尽量避免这种情况

编辑：

---

我可能可以覆盖css的默认blockReplacement，请参见，但这会让任何后来尝试并找出其样式表未正确嵌入的原因的人感到痛苦。

我仍然无法找到一个可接受的解决方案，但现在有一个可行的解决方案：

GrunFile.js代码段：

useminPrepare: {
  html: ['<%= yeoman.app %>/index.html', '<%= yeoman.app %>/includes.html'],
  options: {
    dest: '<%= yeoman.dist %>',
    flow: {
      // i'm using this config for all targets, not only 'html'
      steps: {
        // Here you define your flow for your custom block
        cssQuoted: ['concat', 'cssmin'],
        // use the option below where you have minified files that you just want to concatenate
        concatjs: ['concat'],
        // Note that you NEED to redefine flow for default blocks...
        // These below is default flow.
        js: ['concat', 'uglifyjs'],
        css: ['concat', 'cssmin']
      },
      // also you MUST define 'post' field to something not null
      post: {}
    }
  }
},
usemin: {
  //css_name: ['<%= yeoman.dist %>/{,*/}*.html'],
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    //patterns: {
    //  html: [
    //    [ /cssHrefString\s+=\s+['"]([^"']+)["']/gm, 'Update the HTML to reference our revved/min CSS and add quotes' ]
    //  ]
    //},
    blockReplacements: {
      cssQuoted: function(block){
        return '\'<link rel="stylesheet" href="' + block.dest + '">\'';
      },
      concatjs: function (block) {
        return '<script src="' + block.dest + '"></script>';
      }
    }
  }
},

var theme = getUrlParameter('theme');
var cssHrefString;
// we need fully qualified css tags below otherwise grunt build will not be able to pick them up
if (theme === 'testtheme' || theme === 'testtheme/') {
  cssHrefString =
    <!-- build:cssQuoted({.tmp,app}) styles/main_testtheme.css -->
    '<link rel="stylesheet" href="styles/css/main_testtheme.css">'
    <!-- endbuild -->
  ;
} else {
  cssHrefString =
    <!-- build:cssQuoted({.tmp,app}) styles/main.css -->
    '<link rel="stylesheet" href="styles/css/main.css">'
    <!-- endbuild -->
  ;
}
$('head').append(cssHrefString);

script.js代码段：

useminPrepare: {
  html: ['<%= yeoman.app %>/index.html', '<%= yeoman.app %>/includes.html'],
  options: {
    dest: '<%= yeoman.dist %>',
    flow: {
      // i'm using this config for all targets, not only 'html'
      steps: {
        // Here you define your flow for your custom block
        cssQuoted: ['concat', 'cssmin'],
        // use the option below where you have minified files that you just want to concatenate
        concatjs: ['concat'],
        // Note that you NEED to redefine flow for default blocks...
        // These below is default flow.
        js: ['concat', 'uglifyjs'],
        css: ['concat', 'cssmin']
      },
      // also you MUST define 'post' field to something not null
      post: {}
    }
  }
},
usemin: {
  //css_name: ['<%= yeoman.dist %>/{,*/}*.html'],
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    //patterns: {
    //  html: [
    //    [ /cssHrefString\s+=\s+['"]([^"']+)["']/gm, 'Update the HTML to reference our revved/min CSS and add quotes' ]
    //  ]
    //},
    blockReplacements: {
      cssQuoted: function(block){
        return '\'<link rel="stylesheet" href="' + block.dest + '">\'';
      },
      concatjs: function (block) {
        return '<script src="' + block.dest + '"></script>';
      }
    }
  }
},

var theme = getUrlParameter('theme');
var cssHrefString;
// we need fully qualified css tags below otherwise grunt build will not be able to pick them up
if (theme === 'testtheme' || theme === 'testtheme/') {
  cssHrefString =
    <!-- build:cssQuoted({.tmp,app}) styles/main_testtheme.css -->
    '<link rel="stylesheet" href="styles/css/main_testtheme.css">'
    <!-- endbuild -->
  ;
} else {
  cssHrefString =
    <!-- build:cssQuoted({.tmp,app}) styles/main.css -->
    '<link rel="stylesheet" href="styles/css/main.css">'
    <!-- endbuild -->
  ;
}
$('head').append(cssHrefString);

grunt配置文件为concatjs添加了一个定义-一个任务，它只连接缩小的文件，而不在这些文件上运行uglifier。cssQuoted，它获取块之间的字符串，并将其替换为带引号的链接rel=。。。标签

确保你的grunt usemin插件版本是最新的-我在试用旧版本~0.1.3的选项时浪费了几个小时。上面的代码适用于3.0.0

var theme = getUrlParameter('theme');
var cssHrefString;
// we need fully qualified css tags below otherwise grunt build will not be able to pick them up
if (theme === 'testtheme' || theme === 'testtheme/') {
  cssHrefString =
    <!-- build:cssQuoted({.tmp,app}) styles/main_testtheme.css -->
    '<link rel="stylesheet" href="styles/css/main_testtheme.css">'
    <!-- endbuild -->
  ;
} else {
  cssHrefString =
    <!-- build:cssQuoted({.tmp,app}) styles/main.css -->
    '<link rel="stylesheet" href="styles/css/main.css">'
    <!-- endbuild -->
  ;
}
$('head').append(cssHrefString);