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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue如何清除浏览器历史栈
May 25 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 数组实例说明
2008/08/18 PHP
PHP答题类应用接口实例
2015/02/09 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
js下弹出窗口的变通
2007/04/18 Javascript
js DOM的学习笔记
2011/12/22 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
详解Python绘图Turtle库
2019/10/12 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
优秀团员事迹材料
2014/12/25 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS