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. javaScript基础语法（下）

    4.逻辑控制语句 4.1条件结构 条件结构分为if结构和switch结构. 通常在写代码时,您总是需要为不同的决定来执行不同的动作.您可以在代码中使用条件语句来完成该任务. 在 JavaScript ...

  2. 混合使用TFVC和GIT配置库的优化方案

    如果要选出最近几年在软件工程领域最热的技术,那毋庸置疑就是git了.作为分布式源代码管理(DVCS)的代表,git以其超快的操作,便捷的分支合并模型和P2P模式的代码分享模式让软件开发团队的很多复杂协 ...

  3. get set 中 快捷键生成的get方法中 renturn 没有 this.对象 中的this 解决方法

    选EDIT  进行修改

  4. Asp.net MVC Razor模板引擎技巧分享

    Razor是Asp.net MVC中新的默认模板类型, 语法简单易用.这篇文章不涉及Razor的语法,主要介绍Razor的一些在MVC项目中的使用技巧,以及脱离MVC环境下,如何使用Razor. 阅读 ...

  5. sql server 小记——分区表（上）

    我们知道很多事情都存在一个分治的思想,同样的道理我们也可以用到数据表上,当一个表很大很大的时候,我们就会想到将表拆 分成很多小表,查询的时候就到各个小表去查,最后进行汇总返回给调用方来加速我们的查询速 ...

  6. 京东MySQL监控之Zabbix优化、自动化

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://wangwei007.blog.51cto.com/68019/1833332 随 ...

  7. web会话管理

    http协议是无状态的协议,也就是说服务器不知道这个http连接是那个浏览器发过来的. 要标识会话的唯一,有两种方法:1 Cookie  2 会话级cookie(开关浏览器算一次会话) 和 持久化的c ...

  8. 按Enter键后Form表单自动提交的问题

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  9. Ajax请求利用jsonp实现跨域

    跨域: js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢, 举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资 ...

  10. 【Linux】Linux 目录结构

    博客已转移,请借一步说话 .http://www.weixuehao.com/archives/492 初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用 ...