前端优化是尽量减少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. C#-函数的传值与传址

    传值就是将实参的值传到所调用的函数里面,实参的值并没有发生变化,默认传值的有int型,浮点型,bool型,char字符型,结构体等等. 传址就是将地址传到所调用的函数里面操作,实参的值也会跟着变化,传 ...

  2. django中多个app放入同一文件apps

    新建一个apps文件夹 需要整理的app文件夹拖到同一个文件夹中,即apps.(弹出对话框,取消勾选Search for references) 在pycharm中,右键apps文件夹--选择mark ...

  3. 项目Alpha冲刺 6

    作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 介绍第6天冲刺的项目进展.问题困难和心得体会 1.团队信息 队名:火鸡堂 队 ...

  4. [转] Linux中的默认权限与隐藏权限（文件、目录）

    [From] https://blog.csdn.net/davidsky11/article/details/25424615 一个文件(或目录)拥有若干个属性,包括(r/w/x)等基本属性,以及是 ...

  5. 使用webbench工具测试网站访问压力

    介绍 Webbench是一个在Linux下使用的网站压测工具.它使用fork()模拟多个客户端 同时访问我们设定的URL,测试网站在压力下工作的性能, 最多可以模拟3万个并发连接去测试网站的负载能力. ...

  6. CSAPP阅读笔记-存储器层次结构-第六章-P400-P462

    6.1 存储技术 1.随机访问存储器(RAM),是易失性存储器,掉电存储信息会丢失,与之相对的是非易失性存储器(ROM),它掉电后存储信息不丢失,但前者访问速度较快,但容量有限,通常只有几百或几千兆字 ...

  7. PCB中的SOLD MASK和阻抗开窗

    应用场合:1 PCB中的贴片的焊盘是不过油的,需要暴露出来用于焊接:对于电机驱动需要大电流的走线需要将走线保留暴露出来不过油,然后在上面走一层锡,增大锡箔,铜箔厚度,增大过流和防过热能力. 方法:先在 ...

  8. revit 学习园地

    https://www.cnblogs.com/greatverve/category/286724.html

  9. (转)Http状态码301和302概念简单区别及企业应用案例

    Http状态码301和302的区别及企业应用案例 原文:http://blog.51cto.com/oldboy/1774260 1.什么是301重定向? 301重定向/跳转一般,表示本网页永久性转移 ...

  10. CentOS7 wget 安装Redis，开机启动配置

      安装 GCC yum install gcc yum install tcl 安装wget yum install wget 1. 下载Redis wget http://download.red ...