Node.js / Grunt Usemin 插件

3

我正在使用Yeoman和Grunt来构建我的项目,并使用grunt-css插件来使用与grunt.js内置的“css”不同的'cssmin'。

index.html

<!-- build:css styles/styles.css -->
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->

<!-- build:js scripts/scripts.js -->
<script src="scripts/vendor/jquery.min.js"></script>
<script src="scripts/vendor/handlebars-1.0.0.beta.6.js"></script>
<script src="scripts/vendor/ember-1.0.pre.min.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/routes/app-router.js"></script>
<script src="scripts/store.js"></script>
<script src="scripts/controllers/application-controller.js"></script>
<script src="scripts/models/application-model.js"></script>
<script src="scripts/views/application-view.js"></script>
<!-- endbuild -->

Gruntfile.js

rev: {
      js: 'dist/scripts/**/*.js', // scripts/**/*.js
      css: 'dist/styles/**/*.css', // styles/**/*.css
      img: 'dist/images/**' // images/**
},
'usemin-handler': {
      html: 'index.html'
},
usemin: {
      html: ['dist/**/*.html'], // **/*.html
      css: ['dist/**/*.css'] // **/*.css
},
rjs: {
      // no minification, is done by the min task
      optimize: 'none',
      baseUrl: './scripts',
      wrap: true
},
cssmin: {
      dist: {
        src: [
          'app/styles/**/*.css'
        ],
        dest: 'dist/styles/styles.css'
      }
},
concat: {
      dist: {
        src: [
          'app/scripts/**/*.js'
        ],
        dest: 'dist/scripts/scripts.js',
        separator: '/**********/\n'
      }
},
min: {
      dist: {
        src: [
          'dist/scripts/scripts.js'
        ],
        dest: 'dist/scripts/scripts.js',
        separator: '/**********/\n'
      }
}

接下来是项目的构建结构:

dist/
|__scripts/
|____04216377.scripts.js
|__styles/
|____d41d8cd9.styles.css
|__index.html

然后输出 index.html 文件

<link rel="stylesheet" href="styles/styles.css"/?>

<script src="scripts/04216377.scripts.js"></script>

除了在index.html中重新命名修订后的样式表时出现了问题,其他都进行得很好。新名称应为'styles/d41d8cd9.styles.css'。有人知道原因吗?该行中的问号'?'是否正常?


注意:如需更多信息,请查看我的控制台输出(没有错误): 运行“rev:js”(rev)任务 dist/scripts/scripts.js --- 04216377.scripts.js

运行“rev:css”(rev)任务 dist/styles/styles.css --- d41d8cd9.styles.css

运行“rev:img”(rev)任务

运行“usemin:html”(usemin)任务

usemin:html - dist/index.html scripts/scripts.js

was <script src="scripts/scripts.js"></script>
now <script src="scripts/04216377.scripts.js"></script>

运行"usemin:css"(usemin)任务

usemin:css - dist/styles/d41d8cd9.styles.css

没有进行重命名!非常感谢大家!


有关此问题的更多信息,请参阅 GitHub 上的 Node 和 Yeoman 项目: https://github.com/h5bp/node-build-script/issues/42 和 https://github.com/yeoman/yeoman/issues/623 - adriagil
1个回答

5
我已经找到了问题所在。 我的Yeoman版本是0.94,需要修复usemin任务。 在<link>标签中的?字符是一个正则表达式错误。 你应该重新编写这个表达式,因为css重命名失败了。 在https://github.com/yeoman/yeoman/issues/586上找到了正确的解决方法。
content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"\/?>');

使用

content.replace(block, indent + '<link rel="stylesheet" href="' + target + '"/>');

如果应用更改,该问题将得到解决。 注意:在OSX上将补丁应用于/usr/local/lib/node_modules/yeoman/tasks中的usemin.js

太好了,你找到解决方法了!如果问题已经解决,请将自己的答案标记为已接受 :) - Dmitry Pashkevich

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接