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

上图是完整打包后的文件目录，原始目录是assets,打包发布的文件是dist.

gruntfile.js文件内容：

module.exports = function(grunt) {

    grunt.config.init({

      clean:{

          src:"dist/"

      },

      useminPrepare: {

          html: 'index.html',

          options: {

            dest: 'dist'

          }

      },

        usemin: {

            html: ['dist/index.html']

        },

        uglify: {

            'dist/js/app.min.js': ['assets/js/*.js']

        },

        copy: {

            html: {

                src: './index.html',

                dest: 'dist/index.html'

            }

        },

        cssmin:{

                'dist/css/app.min.css': ['assets/css/*.css']

        }

    });

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

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

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

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

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

    grunt.loadNpmTasks('grunt-usemin');

    grunt.registerTask('default',[

        'clean',

        'copy:html',

        'useminPrepare',

        'uglify',

        'cssmin',

        'usemin'

    ]);

}

原始的index.html

<!DOCTYPE html>

<html>

  <head>

    <title>Usemin test</title>

    <!-- build:css dist/css/app.min.css -->

      <link rel="stylesheet" type="text/css" href="./assets/css/style.css" media="screen" />

    <!-- endbuild -->

  </head>

  <body>

  </body>

  <!-- build:js dist/js/app.min.js -->

    <script src="./assets/js/foo.js"></script>

    <script src="./assets/js/bar.js"></script>

  <!-- endbuild -->

</html>

打包后的index.html

<!DOCTYPE html>

<html>

  <head>

    <title>Usemin test</title>

    <link rel="stylesheet" href="dist/css/app.min.css" media="screen"/>

  </head>

  <body>

  </body>

  <script src="dist/js/app.min.js"></script>

</html>

Grunt usemin前端自动化打包流程的更多相关文章

  1. 使用jenkins实现前端自动化打包部署（Linux版本）

    我们这边好多小组觉得每次测试人员叫我们开发打包部署到某某个测试环境人工操作比较麻烦,因为他们想做到只专注于开发,不管这些琐碎的事.于是有个组长问我前端能不能用Jenkins去执行这一个固定的流程,因为 ...

  2. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  3. grunt搭建前端自动化实践

    grunt是什么? grunt是一个前端构建工具, 每种应用开发, 都有一套构建工具, 例如linux c程序开发, 构建工具是make, java程序的构建工具为maven,web前端经过十多年的发 ...

  4. grunt构建前端自动化

    一.grunt是基于nodejs的,所以首先我们需要安装node 二.全局安装grunt 可以参考 http://www.gruntjs.net/docs/getting-started/ 进行安装. ...

  5. grunt构建前端自动化的开发环境

    废话不多说.直奔主题. 1.安装node. 别问为什么.如果你不知道,说了你还是不知道. 别问怎么安装,自己去百度. 2.安装grunt_CLI. 安装完node,并且安装成功了,后.下载grunt_ ...

  6. Grunt打造前端自动化工作流

    HTML去掉注析.换行符 - HtmlMin CSS文件压缩合并 – CssMinify JS代码风格检查 – JsHint JS代码压缩 – Uglyfy image压缩 - imagemin ht ...

  7. 前端自动化构建工具webpack （一）之webpack安装 和 设置webpack.confi.js

    目的:  模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...

  8. gulp自动化打包及静态文件自动添加版本号

    前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...

  9. Jenkins 持续集成实现 Android 自动化打包

    打 debug 包流程: git pull 分支最新代码 Android Studio:Build - Generate Signed APK 从 IDE 里可以看到,实际上该操作是执行了 assem ...

随机推荐

  1. [译文]casperjs 的API-casper模块

    Casper class: 可以通过这个模块的create()方法来获取这个模块的一个实例,这是最容易的: var casper = require('casper').create(); 我们也可以 ...

  2. spring quartz 的定时器cronExpression表达式写法（转载）

    转载来源:https://zhidao.baidu.com/question/240797777248343764.html====================================== ...

  3. NOIP模拟题汇总（加厚版）

    \(NOIP\)模拟题汇总(加厚版) T1 string 描述 有一个仅由 '0' 和 '1' 组成的字符串 \(A\),可以对其执行下列两个操作: 删除 \(A\)中的第一个字符: 若 \(A\)中 ...

  4. SQL语句之用户管理

    SQL语句系列 1.SQL语句之行操作 2.SQL语句之表操作 3.SQL语句之数据库操作 4.SQL语句之用户管理 占坑,待写……

  5. python学习，day3：集合的学习

    集合天生去重,另外集合非常便于两组数字的取交集,并集等计算 # coding=utf-8 # Author: RyAn Bi list_1 =[1,2,3,4,5,6,7] list_1 =set(l ...

  6. struts2后台向前台传值为空

    今天遇到了一个bug,在后台定义了一个list,然后在前台展示,结果前台接手到的一直是个空,然后找了半天最后才知道是名字名字的问题,这个变量是第一个字母小写,然后第二个字母大写了,然后自动生成的get ...

  7. linux 安装谷歌浏览器

    1. 下载 rpm 包https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm2. 安装依赖包yum ins ...

  8. C/C++中创建(带头结点、不带头结点的)单链表

    1.带头结点的单链表(推荐使用带头结点的单链表)(采用尾插法) 了解单链表中节点的构成 从上图可知,节点包含数据域和指针域,因此,在对节点进行定义时,我们可以如下简单形式地定义: /* 定义链表 */ ...

  9. ios 得到每周的星期一开始和星期天结束的日期

    得到每周 星期一零点(即本周的开始) 和星期天 24 点(即本周的结束和下一周的开始)的时间 NSDate *now = [NSDate date]; NSCalendar *calendar = [ ...

  10. eclipspe导入hibernate的源代码

    看图: