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. java验证码组件kaptcha使用方法

    使用方法: 项目中导入kaptcha-2.3.jar包在web.xml里面新增: <!-- 登陆验证码Kaptcha -->    <servlet>        <s ...

  2. MonoDevelop几个常用的快捷键

    MonoDevelop几个常用的快捷键 CTRL+K  删除光标所在行的该行后面的代码 CTRL + ALT +C  注释/不注释该行 CTRL+ DOWN  像鼠标滚轮一样向下拖 CTRL + UP ...

  3. Photo Shop 设置

    1. 编辑 > 首选项 > 单位与标尺 2. 面板 在『窗口』 菜单下开启: 工具 选项 信息(F8) 图层(F7) 历史记录 可以将设置好的面板保存下来,这样下次别人弄乱了你的面板后,你 ...

  4. 你知道哪些linux命令，能把文件上传到远程linux服务器

    多数情况下 企业的服务基本都是部署在linux服务器 那对于测试同学,必须掌握基本的linux命令   至少要知道怎么部署整体环境   部署过程中,经常需要的操作,是向服务器上传部署包   你一般都是 ...

  5. Highcharts使用简例 + 异步动态读取数据

    第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src= ...

  6. Linux计时器

    Linux中, 系统为每个系统都维护了三种计时器,分别为: 真实计数器, 虚拟计时器以及实用计时器, 一般情况下都使用真实计时器 getitimer()/setitimer() //读取/设置内部计时 ...

  7. 自定义SeekBar的使用

    一.seekbar是进度条,可以使用系统的,也可以自己定义,下面我们将自己定义一个seekbar. 1.自定义滑条,包括对背景,第一进度,第二进度的设置,通过一个xml来实现,在drawable下创建 ...

  8. 不错的flash,动漫，小插件小集

    (来源:http://abowman.com/google-modules/) embed code <object width="220" height="166 ...

  9. URL编码知识摘抄备忘

    网页工具 http://www.107000.com/T-UrlEncode/ 参考: 维基百科http://zh.wikipedia.org/zh/%E7%99%BE%E5%88%86%E5%8F% ...

  10. AI (Adobe Illustrator)详细用法（二）

    本文主要是介绍形状的创建与编辑. 一.系列形状工具 1.矩形工具 矩形的作用很大,比如输入框,按钮,图片的大小,比如相片应用中每一个照片占的比例是多大. 初步的UI图的话,会画矩形和圆角矩形就够了. ...