前端优化是尽量减少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. Unity---解决重新调整游戏分辨率后，再运行游戏还是和之前分辨率一样的问题

    经历 上次在Unity做了个小游戏,发布的时候忘了取消默认全屏了. 于是在Unity重新发布了一下,可是出来后分辨率还是默认全屏. 当时百思不得其解 原因 主要是因为当用Unity发布一个新游戏的时候 ...

  2. Maven依赖的JAR包下载慢？赶紧看过来

    相信许多JAVA开发者在日常工作中时常会碰到这种情况,那就是编译Maven工程时,工程所依赖的jar包文件下载非常慢,甚至经常出现下载不成功的问题,今天,小编就给大家讲讲如何提升Maven依赖包的下载 ...

  3. vue培训记录

    在公司做了一次vue相关的培训,自己整理了一些大纲.供大家参考学习! ### 1. 项目构成及原理 [Vue](https://cn.vuejs.org/)###* 主流框架见解及差别 * react ...

  4. 利用腾讯云为你的域名申请并配置免费SSL一年

    我想,点进来的朋友,应该都知道SSL的重要性吧.这里就简单提一下,大型网站域名只有配置了SSL后,才会更加安全. 现在,微信小程序也开始要求后台必须是SSL配置后的域名了.说了这么多,估计有些人还是有 ...

  5. 安装ubuntu server时候的多网卡问题

    安装的时候看到多个网卡,eth0,eth1,到系统中后只看见eth0 1.输入 ifconfig -a,这个时候如果能够看到多网卡,则在/etc/network/.interfaces中配置一下网卡就 ...

  6. 4.1、支持向量机（SVM）

    1.二分类问题 在以前的博客中,我们介绍了用于处理二分类问题的Logistic Regression算法和用于处理多分类问题的Softmax Regression算法,典型的二分类问题,如图: 对于上 ...

  7. [转] AKKA简介

    [From] https://blog.csdn.net/linuxarmsummary/article/details/79399602 Akka in JAVA(一) AKKA简介 什么是AKKA ...

  8. docker安装mongo初体验

    1.docker安装在此不做介绍,请自行百度:个人环境是在windows下运行cmd执行docker命令2.打算在docker下安装使用mongo,顺带熟悉docker,拉开篇章3.docker下安装 ...

  9. vue笔记精华部分

    以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性.API 方法冲突.你可以使用例如 vm.$data._property 的方式访问这些属性. mixin的使 ...

  10. (转)【面试】【MySQL常见问题总结】【03】

    [常见面试问题总结目录>>>] [面试][MySQL常见问题总结][03] 2016-05-29 22:20 阅读(8244) 评论(2) [面试][MySQL常见问题总结][02] ...