前端优化是尽量减少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. [转]Java 内存溢出（java.lang.OutOfMemoryError）的常见情况和处理方式总结

    原文地址: http://outofmemory.cn/c/java-outOfMemoryError java.lang.OutOfMemoryError这个错误我相信大部分开发人员都有遇到过,产生 ...

  2. js 平均分割

    let alllist=res.data; var result = []; for (var i = 0; i < alllist.length; i += 3) { result.push( ...

  3. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. MUI 滚动插件使用

    在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...

  5. Ubuntu16.04安装视觉SLAM环境（ceres-solver）

    1.先在github上下载ceres-solver git clone https://github.com/ceres-solver/ceres-solver.git 2.安装ceres-solve ...

  6. 验证客户端的链接合法性和socketserver模块实现并发

    本节内容: 1.验证客户端的链接合法性 2.socketserver模块实现并发 一.验证客户端的链接合法性 首先,我们来探讨一下,什么叫验证合法性, 举个例子:有一天,我开了一个socket服务端, ...

  7. springMvc 中返回字符串 乱码解决

    /** * produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8" 乱码解决 * @param callback * ...

  8. Python——内部参数对外部实参的影响

    无论函数传递的参数的可变还是不可变,只要针对参数使用赋值语句,会在函数内部修改局部变量的引用,不会影响到外部变量的引用,而如果传递的参数是可变类型,在函数内部使用方法修改了数据的内容,同样会影响到外部 ...

  9. HTTP请求的常用方法有哪些

    HTTP请求的常用方法有:GET方法.POST方法.HEAD方法.PUT方法.DELETE方法.CONNECT方法.OPTIONS方法.TRACE方法.下面本篇文章就给大家介绍具体介绍一下HTTP请求 ...

  10. 2016424王启元 Exp2 后门原理与实践

    一.实验准备 1.在实验前关闭或退出了防火墙.360杀毒软件.电脑卫士等所有的电脑保护软件,避免在实验过程中攻击时被拒绝.       2.使用Windows获linux shell (1)在Wind ...