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, concat, uglify, and cssmin), and then, in the end usemin is launched.

我的工作目录

workspace/

　　——app/

　　　　——js/

　　　　——tpl/

Gruntfile.js配置

 module.exports = function(grunt) {

     // Project configuration.

     grunt.initConfig({

         useminPrepare: {

             html: ['app/tpl/**/*.html'],

             options: {

                 // 测试发现这里指定的dest，是usemin引入资源的相对路径的开始

                 // 在usemin中设置assetsDirs，不是指定的相对路径

                 // List of directories where we should start to look for revved version of the assets referenced in the currently looked at file

                 dest: 'build/tpl'               // string type

             }

         },

         usemin: {

             html: ['build/tpl/**/*.html'],      // 注意此处是build/

             options: {

                 assetsDirs: ['build/js']

             }

         },

         copy: {

             html: {

                 expand: true,                   // 需要该参数

                 cwd: 'app/',

                 src: ['tpl/**/*.html'],         // 会把tpl文件夹+文件复制过去

                 dest: 'build'

             }

         } 

     });

   grunt.loadNpmTasks('grunt-contrib-uglify');

   grunt.loadNpmTasks('grunt-contrib-copy');

   grunt.loadNpmTasks('grunt-contrib-concat');

   grunt.loadNpmTasks('grunt-usemin');

   // 最后就是顺序了，没错concat,uglify在这里哦！

   grunt.registerTask('default', [

       'copy:html',

       'useminPrepare',

       'concat:generated',

       'uglify:generated',

       'usemin'

   ]);

 };

源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

Gruntjs: grunt-usemin使用心得的更多相关文章

  1. Grunt usemin

    yeoman/grunt-usemin 用来将 HTML 文件中(或者 templates/views)中没有优化的 script 和 stylesheets 替换为优化过的版本. usemin 暴露 ...

  2. Grunt usemin前端自动化打包流程

    前端优化是尽量减少http请求,所以我们需要尽量合并压缩文件,然后调用压缩后的文件,比如多个css文件压缩成一个,多个js文件合并压缩等,usemin能够自动在html中使用压缩后的文件,达到上面的目 ...

  3. Grunt Part 2

    Objectives and Outcomes In this exercise, you will continue to learn to use Grunt, the task runner. ...

  4. windows下安装node环境，以及grunt试水笔记

    grunt,当下前端界知名度最高的工作流处理工具. 在一线的互联网公司,它早已经被用烂了,而我真正接触,是在去年年底... 期间还因为内心太杂分心玩乐而荒废学途,以致到最近才重拾学业,在这里BS一下自 ...

  5. 前端资料QQ群交流

    转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...

  6. JavaScript资源分享

    一. 资源教程: 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 ...

  7. 终极教程【zhong】

    just for a better future! 资源教程               aiim                   综合类 前端知识体系 前端知识结构 Web前端开发大系概览 We ...

  8. Top JavaScript Frameworks, Libraries & Tools and When to Use Them

    It seems almost every other week there is a new JavaScript library taking the web community by storm ...

  9. js 框架及uI框架

    转载自:http://www.techweb.com.cn/network/system/2015-12-23/2245809.shtml 这篇文章主要描述现今流行的一些 Javascript web ...

随机推荐

  1. Sql server profiler抓出的语句不可信

      Sql profiler抓出的语句不可信      

  2. 学习 OAuth2.0

    基于浏览器 访问后跳到登录页面,登录成功后跳转到授权页面,授权成功后跳转到redirect_uri指定的地址. 1.请求授权. http://localhost:8080/oauth/authoriz ...

  3. Asp.net Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则 （多级路由） 如：Admin/Test/Index

    http://blog.csdn.net/buhuan123/article/details/26387427 目录(?)[-] 1那么我们再来看我们需要的访问方式如下图 razor视图的地址写成通配 ...

  4. Chrome浏览器二维码生成插件

      猛击就可以使用啦->>>猛击使用   源码如下: 源码打包   源码: jquery-2.1.3.min.js jquery.qrcode.min.js https://gith ...

  5. java 的常用设计模式--大话设计模式

    设计模式:一个程序员对设计模式的理解:“不懂”为什么要把很简单的东西搞得那么复杂.后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“简单”就是一把钥匙开一把 ...

  6. jQuery简单入门(四)

    4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...

  7. Caused by: java.lang.NoClassDefFoundError: org/objectweb/asm/Type

    使用 proxy-target-class="true" 强制配置了 cglib 代理,于是包上面的错误,加入了 asm.jar 报也一样报错. 错误原因是,lib 中有两个cgl ...

  8. HBase应用开发回顾与总结系列之一：概述HBase设计规范

      概述 笔者本人接触研究HBase也有半年之久了,虽说不上深入和系统,但至少算是比较沉迷.作为部门里大数据技术的探路者,笔者还要承担起技术传播的职责,所以在摸索研究的过程中总是不断地进行总结和测试, ...

  9. Hadoop2.6 datanode配置在线更新

    datanode 的配置可以在线更新了,http://blog.cloudera.com/blog/2015/05/new-in-cdh-5-4-how-swapping-of-hdfs-datano ...

  10. 景瑞地产商业智能BI整体实施过程

    1.1行业背景 1.1.1景瑞地产 景瑞地产成立于1993年,专注于房地产开发,并一直秉持“永远诚信.恪守专业.锐意进取.共赢未来”的核心价值观和“舒适之道”的企业使命. 景瑞地产,源自上海.通过多年 ...