Grunt针对静态文件的压缩,版本控制打包的实例讲解


Posted in Javascript onSeptember 29, 2017

在讲之前先谈谈大致步骤:安装nodejs -> 全局安装grunt -> 项目创建package.json --> 项目安装grunt以及grunt插件 -> 配置Gruntfile.js -> 运行任务

1.安装Node

我们开始之前需要安装Nodejs,如果没有安装的 传送门

安装好了之后,查看是否安装成功,正常是这样的提示

Grunt针对静态文件的压缩,版本控制打包的实例讲解

这里建议npm换成淘宝的cnpm,速度杠杠的。

安装命令:

npm install cnpm -g -registry=Grunt针对静态文件的压缩,版本控制打包的实例讲解

2.安装全局Grunt

安装命令:

cnpm install grunt -g

Grunt针对静态文件的压缩,版本控制打包的实例讲解

3.项目创建package.json

在项目根目录下创建package.json文件,文件内容如下

Grunt针对静态文件的压缩,版本控制打包的实例讲解

4.项目安装grunt以及grunt插件

我们所需要的插件

插件名称 说明 Github地址
grunt-contrib-clean 清空文件和文件夹 /resources/imgs/img_not_found.png//github.com/gruntjs/grunt-contrib-clean
grunt-contrib-copy 复制文件和文件夹 /resources/imgs/img_not_found.png//github.com/gruntjs/grunt-contrib-copy
grunt-contrib-concat 连接、合并文件(没用到) /resources/imgs/img_not_found.png//github.com/gruntjs/grunt-contrib-concat
grunt-contrib-cssmin (CSS文件)压缩 /resources/imgs/img_not_found.png//github.com/gruntjs/grunt-contrib-cssmin
grunt-contrib-uglify (JS文件)压缩 /resources/imgs/img_not_found.png//github.com/gruntjs/grunt-contrib-uglify
grunt-filerev 文件内容hash(MD5)(版本号控制) /resources/imgs/img_not_found.png//github.com/yeoman/grunt-filerev
grunt-usemin 文件进行引用修改 /resources/imgs/img_not_found.png//github.com/yeoman/grunt-usemin
load-grunt-tasks oad-grunt-tasks /resources/imgs/img_not_found.png//github.com/sindresorhus/load-grunt-tasks

我们打开我们的项目文件夹,在路径栏中输入cmd然后回车

Grunt针对静态文件的压缩,版本控制打包的实例讲解

回车后的界面

Grunt针对静态文件的压缩,版本控制打包的实例讲解

打开命令行窗口之后,我们输入安装命令:

cnpm install grunt grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks --save-dev

Grunt针对静态文件的压缩,版本控制打包的实例讲解

5.配置Gruntfile.js (这是重点,重点,重点。重要的事情说三遍。)

先贴一下我的配置,后面慢慢说明

module.exports = function (grunt) {
 require('load-grunt-tasks')(grunt);

 var path = {
  src : 'test',
  dest : 'dist',
 }

 grunt.initConfig({
  path : path,
  clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : ['<%= path.dest %>/']
     }
    ]
   }
  },
  filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : ['<%= path.dest %>/**', 
      '!<%= path.dest %>/page/*.html',//html文件不加版本号
      '!<%= path.dest %>/**/*.{png,jpg,jpeg}']//图片 不需要加版本号
     }
    ]
   }
  },
  useminPrepare : {//声明concat、cssmin、uglify
   build : {
    files : [{     
      src : '<%= path.src %>/page/*.html'
     }
    ],
    
   }
  },
  usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   }
  },
  copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : ['**/*.*'],//相对于cwd路径的匹配模式。意思就是 src/**/*.*,匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },
  cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : ['css/*.css'],//相对于cwd路径的匹配模式。意思就是 src/**/*.css,匹配src下面所有css文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },
  uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : ['js/*.js'],//相对于cwd路径的匹配模式。意思就是 src/**/*.js,匹配src下面所有js文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },
 });
 grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);
};

我们前面一直都在安装这个安装那个,但是安装的这些东西怎么用起来了?

首先我们通过学习 grunt入门 了解到插件如何使用,这是官网的例子。

Grunt针对静态文件的压缩,版本控制打包的实例讲解

pkg是通过读取package.json生成的json对象。

uglify是 grunt-contrib-uglify 指定的任务名,每个插件都有对应的任务名可以在对应的github里面查看

grunt.loadNpmTasks('grunt-contrib-uglify'); 从字面上就可以看出来/,加载能够提供"uglify"任务的插件。

grunt.registerTask('default', ['uglify']); 注册别名任务,这个别名任务对应的是一个任务列表

当通过 grunt 别名时,实际是执行列表里的任务,并按顺序执行

这些基本的信息都可以通过官网查看。

我们来说说我们需求,我们需要对静态文件打包压缩,并且需要对静态文件加入版本号而且所有引用静态文件的html或css都得修改文件名,我们的需求明确后来来看看我们怎么做。

第一步:我们需要重新打包,那就需要复制文件,所以我们需要grunt-contrib-copy插件。

在copy之前我们先要确定源文件和目标文件,我这里源文件都放在test文件夹中,目标文件都放在dist文件夹中

Grunt针对静态文件的压缩,版本控制打包的实例讲解

我们创建文件路径

var path = {
  src : 'test',
  dest : 'dist',
 }

文件路径创建好了,我们来看copy

copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : ['**/*.*'],//相对于cwd路径的匹配模式。意思就是 src/**/*.*,匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },

从代码的注释就可以看出一二了。这里说下cwd,src,dest 。

其实这里的源路径是 cwd + src。这才是真正的源路径。dest是目标路径前缀。

我这里的意思是src下面所有的文件,意思就是把 src文件夹 里面的文件复制到 dest文件夹 里。这里可以指定需要复制的具体文件夹或者文件类型

第二步:进行文件压缩,我这里只是针对js和css压缩,对img的压缩可以查看对应的插件,思路都一样。

css压缩需要用到 grunt-contrib-cssmin 插件,该插件对应的任务名为 cssmin

cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : ['css/*.css'],//相对于cwd路径的匹配模式。意思就是 src/**/*.css,匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },

js 压缩需要用到 grunt-contrib-uglify 插件,该插件对应的任务名为 uglify

uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径)
      src : ['js/*.js'],//相对于cwd路径的匹配模式。意思就是 src/**/*.js,匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },

第三步:静态文件重命名,我们这里的版本控制是通过对静态文件重命名来现实的。

重命名需要用到 grunt-filerev 插件,该插件对应的任务名为 filerev

filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : ['<%= path.dest %>/**', 
      '!<%= path.dest %>/page/*.html',//html文件不加版本号
      '!<%= path.dest %>/**/*.{png,jpg,jpeg}']//图片 不需要加版本号
     }
    ]
   }
  },

这里只有一个src参数,传的是个数组,我们这里是只想给css和js重命名,其他文件不需要。所以数组第一个参数 src/** 匹配src文件夹中所有文件,后面两个 ! xx,是排除的意思,

第四步:修改html中css和js的引用

修改文件引用需要用到 grunt-usemin 插件,该插件对应的任务名为 usemin

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   }
  },

这里也只有一个src参数,给出的是html的地址,如果你还有css 可以这样写

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   },
   css :{
    files : [{
      src : '<%= path.dest %>/css/*.css'
     }
    ]
   }
  },

第五步:我们从 复制,压缩,重命名,修改引用都说了一遍,这里还少一个东西,就是我们每次复制之前需要把目标文件夹里面的文件删除掉。

修改文件引用需要用到 grunt-contrib-clean 插件,该插件对应的任务名为 clean

clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : ['<%= path.dest %>/']
     }
    ]
   }
  },

这里也只有一个src参数,给出目标文件夹的地址。

所有任务到这里就结算了。

我们注册任务别

grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);

可以看到,我们这里只是注册了任务,并没有应用插件。我们添加插件是听过 load-grunt-tasks 插件完成的

require('load-grunt-tasks')(grunt);

这里指令相当于我们一个个写

grunt.loadNpmTasks('xxx');

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点:

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点

这种写法是动态构建文件对象

Grunt针对静态文件的压缩,版本控制打包的实例讲解

这种写法是文件数组格式 

Grunt针对静态文件的压缩,版本控制打包的实例讲解

以上这篇Grunt针对静态文件的压缩,版本控制打包的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
微信禁止下拉查看URL的处理方法
Sep 28 #Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 #Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 #Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 #Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 #Javascript
You might like
用php来检测proxy
2006/10/09 PHP
php设计模式小结
2013/02/15 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python实现telnet客户端的方法
2015/04/15 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
毕业生自荐材料范文
2014/12/30 职场文书
2015年营业员工作总结
2015/04/23 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers