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 相关文章推荐
javascript String 对象
Apr 25 Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JavaScript包装对象使用介绍
Aug 29 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
JS实现购物车基本功能
Nov 08 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 Javascript
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定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php验证手机号码
2015/11/11 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
phpinfo的知识点总结
2019/10/10 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
python的Template使用指南
2014/09/11 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python实现文件的分割与合并
2019/08/29 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
党员入党表决心的话
2014/03/11 职场文书
3分钟演讲稿
2014/04/30 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
golang 实现Location跳转方式
2021/05/02 Golang