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. js 静态私有变量

    特权方法:有权访问私有变量和私有函数的公有方法.在私有作用域中定义私有变量或函数,可以创建特权方法,如下: 示例1 (function(){ //私有变量和私有函数 var privateVariab ...

  2. IT软件开发常用英语词汇

    Aabstract 抽象的abstract base class (ABC)抽象基类abstract class 抽象类abstraction 抽象.抽象物.抽象性access 存取.访问access ...

  3. db2+python+sqlchemy环境的搭建

    记录了通过sqlalchemy 管理db2数据库的环境搭建 1.db2数据库安装配置 利用winscp复制iso文件到/mnt/IBM_db2 目录下 IBM_db2为自己创建 重命名 mv IBM\ ...

  4. jQuery中find和filter的区别

    本文来自:http://blog.csdn.net/woshixuye/article/details/7255260 这是jQuery里常用的2个方法. 他们2者功能是完全不同的,而初学者往往会被误 ...

  5. mysql substring_index substring left right方法

    函数简介: SUBSTRING(str,pos) , SUBSTRING(str FROM pos) SUBSTRING(str,pos,len) , SUBSTRING(str FROM pos F ...

  6. Linux SendMail发送邮件失败诊断案例(三)

    一Linux服务器突然发送不出邮件,检查了很多地方都没有发现异常,检查/var/log/maillog发现如下具体信息: Apr 12 00:36:04 mylinux sendmail[4685]: ...

  7. MySQL入门（一）

    最近一直都在搞新员工的培训材料,MySQL的培训PPT我居然写了100多页,我都佩服我自己的毅力了.不如现在把这些总结一下,慢慢写到博客里,供入门者参考. 一 关系型数据库 关系型数据库的理论提出于上 ...

  8. Swift方法实现回调的一种方式

    记录一下: 封装了一个类,暴露出的一个方法,在外部引用时,给出回调blcok 封装类: //MARK:登录 public func loginWithToken(token:String,loginS ...

  9. Android之drawable state各个属性详解

    android:drawable 放一个drawable资源android:state_pressed 是否按下,如一个按钮触摸或者点击.android:state_focused 是否取得焦点,比如 ...

  10. high三个晚上这样好么-JSON&PHP

    hi 昨晚上吃火锅去了,对,你没猜错,我就是在成都 今晚有师兄请客,明天有基友请吃火锅,本来该忙忙哒的这一周要连续high三个晚上么(单身研究生狗就是这么容易满足).所以只好不务正业写写写了(写不动了 ...