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. css字体家族

    名词解释: 衬线指的是字体起始末端的细节装饰.

  2. WCF学习资料汇总

    微软官方讲解教程: 跟我一起从零开始学WCF系列课程 http://msdnwebcast.net/webcast/1/2692/ 构建WCF面向服务的应用程序系列课程 http://msdnwebc ...

  3. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  4. 8、需求分析师要阅读的书籍 - IT软件人员书籍系列文章

    需求分析是软件项目开始阶段重要的一步.而需求分析是项目经理或产品经理需要经历的一环,所以说需求分析是项目经理或产品经理需要具备的知识.但是,项目角色中却分离出了需求分析师这个角色,也就是说,在大型的或 ...

  5. Centos修改DNS重启或者重启network服务后丢失问题处理

    本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 阅读目录 介绍 起因 处理 GitHub 本文版 ...

  6. Keepalived+MySQL双主架构

    l  架构准备 Node1 192.168.15.3 Node2 192.168.15.4 VIP 192.168.15.254 l  软件 MySQL 5.6 Keepalive yum insta ...

  7. 烂泥：apache性能测试工具ab的应用

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 网站性能压力测试是服务器网站性能调优过程中必不可缺少的一环.只有让服务器处在高压情况下,才能真正体现出软件.硬件等各种设置不当所暴露出的问题. 性能测试 ...

  8. x01.Lab.StoreApp: XP 停服，微软变脸

    变脸,川剧的一种表演形式,除了哄哄小孩,似乎别无用处.而川剧变脸从业者何其多也,存在时间何其长也.以如此多的从业者,如此长的时间,来进行科研,其成果一定是斐然吧.推而广之,试问天下谁能敌! 微软变脸, ...

  9. getaddrinfo

    gethostbyname和gethostbyaddr这两个函数仅仅支持IPv4,getaddrinfo函数能够处理名字到地址以及服务到端口这两 种转换,返回的是一个sockaddr结构的链表而不是一 ...

  10. Android setTag()/getTag()-（转）

    (转自:http://www.cnblogs.com/topcoderliu/archive/2011/06/07/2074419.html) [自己经历:要getTag前提是要有setTag] se ...