zoukankan      html  css  js  c++  java
  • Gruntjs: grunt-usemin使用心得

    grunt-usemin

    Replaces references to non-optimized scripts or stylesheets into a set of HTML files

    usemin exports 2 different tasks:

    • useminPrepare prepares the configuration to transform specific construction (blocks) in the scrutinized file into a single line, targeting an optimized version of the files 

    • usemin replaces the blocks by the file they reference, and replaces all references to assets by their revisioned version if it is found on the disk. This target modifies the files it is working on.

    Usually, useminPrepare is launched first, then the steps of the transformation flow (for example, concatuglify, and cssmin), and then, in the end usemin is launched.

    我的工作目录

    workspace/

      ——app/

        ——js/

        ——tpl/

    Gruntfile.js配置

     1 module.exports = function(grunt) {
     2 
     3     // Project configuration.
     4     grunt.initConfig({
     5 
     6         useminPrepare: {
     7             html: ['app/tpl/**/*.html'],
     8             options: {
     9                 // 测试发现这里指定的dest,是usemin引入资源的相对路径的开始
    10                 // 在usemin中设置assetsDirs,不是指定的相对路径
    11                 // List of directories where we should start to look for revved version of the assets referenced in the currently looked at file
    12                 dest: 'build/tpl'               // string type                 
    13             }
    14         },
    15         usemin: { 
    16             html: ['build/tpl/**/*.html'],      // 注意此处是build/
    17             options: {
    18                 assetsDirs: ['build/js']
    19             }
    20         },
    21         copy: {
    22             html: {
    23                 expand: true,                   // 需要该参数
    24                 cwd: 'app/',
    25                 src: ['tpl/**/*.html'],         // 会把tpl文件夹+文件复制过去
    26                 dest: 'build'
    27             }
    28         } 
    29 
    30     });
    31 
    32   grunt.loadNpmTasks('grunt-contrib-uglify');
    33   grunt.loadNpmTasks('grunt-contrib-copy');
    34   grunt.loadNpmTasks('grunt-contrib-concat');
    35   grunt.loadNpmTasks('grunt-usemin');
    36 
    37   // 最后就是顺序了,没错concat,uglify在这里哦!
    38   grunt.registerTask('default', [
    39       'copy:html',
    40       'useminPrepare',
    41       'concat:generated',
    42       'uglify:generated',
    43       'usemin'
    44   ]);
    45 
    46 };

    源html结构

    <body>
        <p>this is a grunt usemin</p>
    
        <script src="../js/globle.js"></script>
        
        <!-- build:js ../js/page.js -->
        <script src="../js/libs.js"></script>
        <script src="../js/page.js"></script>
        <!-- endbuild -->
    </body>

    打包后的html

    <body>
        <p>this is a grunt usemin</p>
    
        <script src="../js/globle.js"></script>
        
        <script src="../js/page.js"></script>
    </body>

    感谢gruntjs,yeoman

    https://github.com/yeoman/grunt-usemin

  • 相关阅读:
    [Bzoj2243][SDOI2011]染色(线段树&&树剖||LCT)
    [poj3074]Sudoku(舞蹈链)
    [Bzoj1047][HAOI2007]理想的正方形(ST表)
    [Bzoj1030][JSOI2007]文本生成器(AC自动机&dp)
    [Bzoj2431][HAOI2009]逆序对数列(前缀和优化dp)
    [Bzoj1072][SCOI2007]排列perm(状压dp)
    [Bzoj1195][HNOI2006]最短母串(AC自动机)
    Ajax解决IE浏览器兼容问题
    运行eclipse弹出“Failed to load the JNI shared”解决方法
    Java表单类双击提交
  • 原文地址:https://www.cnblogs.com/mackxu/p/grunt-usemin.html
Copyright © 2011-2022 走看看