【问题标题】:Grunt-usemin: Not generating my new index.html but it is concatenating and minifying my scriptsGrunt-usemin:没有生成我的新 index.html,但它正在连接和缩小我的脚本
【发布时间】:2014-09-26 18:36:35
【问题描述】:

我需要你的帮助:)

我正在尝试使用 usemin 来构建我的 Angular 应用程序。 基本上我想生成一个新的 index.html,它只引用一个正确缩小的 .js 文件。

app.js 文件正在正确生成,但我的新 index.html 不是。

我对 grunt 和 usemin 还很陌生,但这是我的 gruntfile:

grunt.initConfig({
    pkg: grunt.file.readJSON('bower.json'),

    useminPrepare: {
      html: 'public/index.html',
      options: {
        dest: 'dist'
      }    
    },

    concat: {
      generated: {
        files: [
          {
            dest: '.tmp/concat/js/app.js',
            src: ['public/**/*.js', '!public/bower_components/**']
          }
        ]
      }
    },

    uglify: {
      generated: {
        files: [
          {
            dest: 'dist/js/app.js',
            src: [ '.tmp/concat/js/app.js' ]
          }
        ]
      }
    }

  });

grunt.registerTask('build', [
'useminPrepare',
'concat:generated',
'uglify:generated',
'usemin'
]);

这是我的 index.html 的相关部分:

<!-- build:js js/app.js -->
<script src="app.js"></script>
<script src="domain/domain.js"></script>
<script src="domain/landingPage/landingPageController.js"></script>
...
<!-- endbuild -->

我的文件夹结构是:

+- public
|   +- index.html
|   +- domain
|       +- js files       
+- gruntfile

提前感谢您的帮助!

【问题讨论】:

  • 我使用了一个非常相似的过程,我和你的唯一主要区别是除了 useminPrepare 之外,我还有一个 usemin 选项区域。为简单起见,我将发布我的 gruntfile here。唯一的主要区别是我首先将所有相关文件复制到输出文件夹中,然后在那里处理它们,而不是一步完成。这当然与您的问题无关。
  • @KevinB,我以您的文件为例,并设法使我的方案工作。非常感谢您的输入!我很快就会在 github 上发布我的 gruntfile 来回答这个问题。干杯!

标签: angularjs gruntjs grunt-usemin


【解决方案1】:

我从@KevinB 那里得到了这个file,并创建了一个更简单的来满足我的需求。 仍有一些粗糙的边缘,但它确实回答了这个问题。

    grunt.initConfig({
    pkg: grunt.file.readJSON('bower.json'),

    clean: [ 'dist' ],

    copy: {
      build: {
        files: [
          {
            expand: true,
            cwd: 'public/',
            src: [ '**', '!**/**/*.js' ],
            dest: 'dist'
          }          
        ]
      }
    },

    processhtml: {
        dist: {
          files: {
            'dist/index.html': ['dist/index.html']
          }
        }
    },

    concat: {
      generated: {
        files: [
          {
            dest: 'dist/js/app.js',
            src: ['public/**/*.js', '!public/bower_components/**']
          }
        ]
      }
    },
    
    uglify: {
      generated: {
        files: [
          {
            dest: 'dist/js/app.js',
            src: [ 'dist/js/app.js' ]
          }
        ]
      }
    }    

  });
  
  grunt.registerTask('build', [
    'clean',
    'copy',
    'processhtml',   
    'concat:generated',
    'uglify:generated'
  ]);

【讨论】:

  • 注意,processhtml 方法当然是无关的,它所做的只是允许您对文件的特定部分进行更改,例如,在生产构建和开发构建之间更改&lt;base&gt; .
  • @rafael-audy-glanzner 您不需要覆盖 *:generated 任务。有useminPrepare使用构建注释配置配置。
  • 我的建议是将 html 和所有静态资源复制到 dist 目录,然后运行 ​​useminPrepare、*min tasks,然后运行 ​​usemin。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-09-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-11-19
相关资源
最近更新 更多