如何界定usemin prepare单个流在HTML文件中每个块？ [英] How to define individual flows in useminPrepare for each block in html file?

问题描述

我们已经在我们的index.html定义2个街区 - 一个用于第三方库，一个是我们的应用程序文件。由于第三方库已缩小的，我们只是想将它们连接起来，而不是丑化。我怎样才能做到这一点与 usemin prepare ？

＆LT; - 编译：JS JS / lib.js - ＆GT;
＆所述; SCRIPT SRC =LIB /角度/ angular.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =LIB /角饼干/角cookies.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =LIB /角路由/角route.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ - endbuild - ＆GT; ！＆LT; - 编译：JS JS / app.js - ＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS /控制器/ LanguageCtrl.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ - endbuild - ＆GT;


gruntfile.js：

  usemin prepare：{
        HTML：'＆LT;％= yeoman.app％GT; /index.html'，
        选项​​：{
            DEST：'＆LT;％= yeoman.dist％GT;，
            流： {
                HTML：{
                    脚步： {
                        // TODO为libs.js阻止我不想丑化！
                        JS：['CONCAT'，'uglifyjs']，
                        CSS：['cssmin']
                    }，
                    岗位：{}
                }
            }
        }
    }
 

解决方案

看来你需要定义您的自定义模块。将显示在例子 - 创建自定义块myjs，只有CONCAT

Gruntfile.js

  usemin prepare：{
  HTML：'＆LT;％= config.app％GT; /index.html'，
  选项​​：{
    DEST：'＆LT;％= config.dist％GT;，
    流： {
      //我使用这个配置对所有目标，不仅是HTML
      脚步： {
        //在这里定义的流程为您定制模块 - 只有CONCAT
        myjs：['CONCAT']，
        //请注意，您需要重新定义默认块流...
        //下面这些是默认流。
        JS：['CONCAT'，'uglifyjs']，
        CSS：['CONCAT'，'cssmin']
      }，
      //还必须定义后字段不为空的东西
      岗位：{}
    }
  }，
}，
 

您还需要定义您的自定义块块更换。这些块应的相同的js。

Gruntfile.js：

  usemin：{
  选项​​：{
    assetsDirs：['＆下;％= config.dist％GT;'，'＆下;％= config.dist％GT /图像']，
    blockReplacements：{
      //我们的替换块
      myjs：功能（块）{
        回归'＆LT;脚本的src =+ block.dest +'＆GT;＆LT; / SCRIPT＆GT;';
      }
      //无需重新定义默认块
    }
  }，
  HTML：['＆LT;％= config.dist％GT; / {* /} * HTML']，
  CSS：['＆LT;％= config.dist％GT; /风格/ {* /} * CSS']
}，
 

所以，现在您可以使用新的自定义模块在您的index.html：

 ＆LT;  - 编译：myjs JS / lib.js  - ＆GT;
  ＆所述; SCRIPT SRC =LIB /角度/ angular.min.js＆GT;＆下; /脚本＆GT;
  ＆LT;脚本SRC =LIB /角饼干/角cookies.min.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本SRC =LIB /角路由/角route.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ -  endbuild  - ＆GT;！＆LT;  - 编译：JS JS / app.js  - ＆GT;
  ＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本SRC =JS /控制器/ LanguageCtrl.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;！ -  endbuild  - ＆GT;
 

现在它应该工作，只要你想。我没有测试此code，但我有非常相似的配置在我的应用程序，它就像一个魅力。我也有一些问题界定替换块 - 这是非常令人沮丧的。

希望它帮助！

We have 2 blocks defined in our index.html - one for 3rd party libs and one for our application files. Since 3rd party libs are already minified, we just want to concatenate them, but not uglify. How can I do this with useminPrepare?

<!-- build:js js/lib.js -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<!-- endbuild -->

 <!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/LanguageCtrl.js"></script>
<!-- endbuild -->

gruntfile.js:

useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
            dest: '<%= yeoman.dist %>',
            flow: {
                html: {
                    steps: {
                        // TODO for libs.js block I don't want uglify!
                        js: ['concat', 'uglifyjs'], 
                        css: ['cssmin']
                    },
                    post: {}
                }
            }
        }
    }

解决方案

Seems that You need to define your custom block. Will show on example - creating custom block "myjs" with concat only.

Gruntfile.js

useminPrepare: {
  html: '<%= config.app %>/index.html',
  options: {
    dest: '<%= config.dist %>',
    flow: {
      // i'm using this config for all targets, not only 'html'
      steps: {
        // Here you define your flow for your custom block - only concat
        myjs: ['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: {}
    }
  },
},

You also need to define block replacement for your custom block. These block should be the same as for js.

Gruntfile.js:

usemin: {
  options: {
    assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images'],
    blockReplacements: {
      // our 'replacement block'
      myjs: function (block) {
        return '<script src="' + block.dest + '"></script>';
      }
      // no need to redefine default blocks
    }
  },
  html: ['<%= config.dist %>/{,*/}*.html'],
  css: ['<%= config.dist %>/styles/{,*/}*.css']
},

So, now You can use your new custom block in your index.html:

<!-- build:myjs js/lib.js -->
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular-cookies/angular-cookies.min.js"></script>
  <script src="lib/angular-route/angular-route.min.js"></script>
<!-- endbuild -->

<!-- build:js js/app.js -->
  <script src="js/app.js"></script>
  <script src="js/controllers/LanguageCtrl.js"></script>
<!-- endbuild -->

Now it should work as You want. I haven't tested this code, but i have very similar config in my app and it works like a charm. I also had some problems with defining replacement blocks - it was very frustrating.

Hope it helps!

这篇关于如何界定usemin prepare单个流在HTML文件中每个块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！