Grunt usemin前端自动化打包流程

前端优化是尽量减少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>

转载于:https://www.cnblogs.com/hutuzhu/p/4609716.html

Grunt usemin前端自动化打包流程相关推荐

python 自动化框架打包_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
vuecli打包后的dist目录无法访问_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
前端自动化打包工具--webpack
前端自动化打包工具–webpack 背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的 ...
Android Jenkins + gradle 实现自动化打包流程并上传至蒲公英平台全过程
最近在windows上尝试了jenkins持续集成环境搭建,把自己的写的app进行了自动化打包上传的一套流程,下面把我的经验分享给大家. 本文大纲: 说明:本文以windows为例环境准备 jenk ...
jenkins实现前端自动化打包并部署到nginx服务器
前言本文为本人实际搭建前端自动化部署过程的详细记录,分享给大家的同时也是自己对知识的巩固,本文中可能存在部分前端平常不怎么接触到的知识点,但是不用怕,只要认真看基本不会有问题. 环境依赖首先需要在 ...
前端自动化打包部署服务器
ssh2-sftp-client前端部署工具 npm install ssh2-sftp-client 在项目目录中创建upload文件夹,action.js主要处理打包和上传打包好的文件操作.sou ...
Unity 基于Jenkins自动化打包流程
什么是Jenkins? Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件.Jenkins 支持各种运行方式,可通过系统包.Docker 或者通过一个独立 ...
Jenkins自动化打包iOS配置流程
前提条件:Mac系统,并且已经安装xcode,homedrew,Java,如果项目工程中集成了cocoapod,也需要安装cocoapod Jenkins打包方式分为两种,一种是xcode插件化配置打 ...
前端自动化开发工作流模板
作者:戴嘉华转载请注明出处,保留原文链接和作者信息 1. 前端自动化工作流简介每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成 ...
前端自动化开发工作流
1. 前端自动化工作流简介每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程.一个工作流的过程不是一开始就固定 ...

Grunt usemin前端自动化打包流程

Grunt usemin前端自动化打包流程相关推荐

最新文章

热门文章