angularjs - 如何使用 ngmin 对 angularjs 文件进行注释并使用 min 生成一个 dist 文件

Question

我正在使用运行 AngularJS 应用程序的 yeoman Web 应用程序模板。usemin很好，但 AngularJS 文件必须用 ngmin 预处理在被 usemin 丑化和缩小之前进行注释.

我可以使用 ngmin 生成带注释的 AngularJS Controller 、指令、服务等的单个串联文件。 .

 ngmin: {
     build: {
         src: ['<%= yeoman.app %>/js/one.js','<%= yeoman.app %>/js/two.js'],
         dest: '<%= yeoman.dist %>/ng/annotated.js' 
     }
 }  

基本上我运行了一个成功创建的构建 annotated.js .

我要的是声明 annotated.js文件在 index.html通知 usemin将该文件仅用于 分销 ，不是我在 中提到的那些发展 .

  <!-- build:js js/app.min.js -->  //annotated.js only must be processed instead of those 2 files.
  <script src="js/one.js" type="text/javascript"></script>
  <script src="js/two.js" type="text/javascript"></script>
  <!-- endbuild -->  

作为引用，我的 usemin 配置:

  useminPrepare: {
        options: {
            dest: '<%= yeoman.dist %>'
        },
        html: '<%= yeoman.app %>/index.html'
    },
    usemin: {
        options: {
            dirs: ['<%= yeoman.dist %>']
        },
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/css/{,*/}*.css']
    }

作为引用，我的构建任务:

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concat',
    'cssmin',
    'ngmin',
    'uglify',
    'copy:dist',
    'rev',
    'usemin'
]);  

我怎样才能实现它？

Answer 1

所以，你使用了 yo webapp生成一个应用程序，然后将 Angular 插入其中？对于您创建的 future Angular 应用程序(或者如果现在还为时不晚)，有一个生成器可以做到这一点! https://github.com/yeoman/generator-angular

这是一个链接和一些代码，显示了 ngmin任务预先配置了 Angular 生成器:

https://github.com/yeoman/generator-angular/blob/v0.4.0/templates/common/Gruntfile.js#L326-335

ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '<%= yeoman.dist %>/scripts',
      src: '*.js',
      dest: '<%= yeoman.dist %>/scripts'
    }]
  }
}

将其插入，根据需要进行调整，然后让我知道它是否有效!