位置: 编程技术 - 正文

Grunt针对静态文件的压缩,版本控制打包的实例讲解(静态文件格式有哪些)

编辑:rootadmin

推荐整理分享Grunt针对静态文件的压缩,版本控制打包的实例讲解(静态文件格式有哪些),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:静态文件格式有哪些,静态语言用什么方式执行,静态对象存储在哪里,gfortran静态编译,静态文件包含,gfortran静态编译,gfortran静态编译,静态文件包含,内容如对您有帮助,希望把文章链接给更多的朋友!

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

1.安装Node

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

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

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

安装命令:

npm install cnpm -g -registry= install grunt -g

3.项目创建package.json

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

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

我们所需要的插件

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

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

回车后的界面

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

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

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

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

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

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

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

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

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

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

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

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

Grunt针对静态文件的压缩,版本控制打包的实例讲解(静态文件格式有哪些)

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

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

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

我们创建文件路径

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我们注册任务别

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

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

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

这里补充说明几点:

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

这里补充说明几点:

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

这种写法是文件数组格式

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

Nodejs+angularjs结合multiparty实现多图片上传的示例代码 这次我们说一下nodejs+angularjs多图片上传的问题此前也在网站看了很多篇文章,有关的内容说多不多,说少也不少,但我一一试过以后有成功的,也有没

实现一个完整的Node.js RESTful API的示例 前言这篇文章算是对BuildingAPIswithNode.js这本书的一个总结。用Node.js写接口对我来说是很有用的,比如在项目初始阶段,可以快速的模拟网络请求。正因

详解用Node.js实现Restful风格webservice Restful风格的WebService正在渐渐取代传统的SOAP,Java也有很多Restful的框架,很方便简洁,Jersey,restlet,甚至SpringMVC也可以,不得不说Rest让人从Web转型到WebSer

标签: 静态文件格式有哪些

本文链接地址:https://www.jiuchutong.com/biancheng/379541.html 转载请保留说明!

上一篇:Node.js学习之地址解析模块URL的使用详解(node.js入门)

下一篇:Nodejs+angularjs结合multiparty实现多图片上传的示例代码

  • 企业所得税广告费30%扣除
  • 白酒消费税税率多少钱一吨
  • 接受捐赠的增值税处理
  • 一般纳税人可以开1%的发票吗
  • 怎么理解财务会计与管理会计
  • 无偿调入固定资产计提折旧吗
  • 房地产预缴增值税是含税还是不含税
  • 个人所得税累计收入
  • 煤炭企业会计制度
  • 呆账的处理
  • 私营企业实行固定税率
  • 公司注销应付款太多
  • 银行小额贷款是怎么还款的
  • 建筑工程公司涉及的会计科目
  • 代扣代缴城建税可以享受六税两费
  • 两个单位同一个法人
  • 按工人工资比例结转制造费用的科目
  • 支付平台使用费怎么算
  • 跨年发票作废时间有限制吗
  • 承租承包经营个人所得税
  • 月末计算各种税费表格模版
  • 支出没有发票怎么做账
  • 增值税专用发票开错了咋办
  • 不能抵扣的进项税额转出会计分录
  • 本月应该确认收入,但是一般下月才开票该怎么处理?
  • 医疗收费票据可以补打吗
  • 固定资产金额小于5000元,可以不一次性税前扣除吗
  • 工程物资期末余额的填列方法
  • 公司如何确定总股本
  • 垃圾费随水费征收
  • 公司估值一般不超过市值多少
  • 事业单位项目前景怎么样
  • deepin如何设置网络
  • 笔记本电脑连无线网老是掉线怎么回事
  • php数组函数题目
  • 微信小程序隐藏航班
  • php 代码
  • 企业提取盈余公积会引起所有者权益变动吗
  • 企业以物易物如何确认收入
  • 增值税不允许抵扣计入什么科目
  • php制作验证码
  • 怎样安装∪sb
  • thinkphp 分页
  • runas命令详解
  • 股票收益缴纳个人所得税吗
  • 申报完成后怎么处理
  • 递延所得税的会计应用
  • 律师事务所的日记怎么写
  • 坏账准备的账务处理例题视频讲解
  • 外贸da付款方式的流程图
  • sql随机抽取
  • 小规模教育培训怎样纳税
  • 我们公司投资新公司做账
  • 汇算清缴银行手续费扣除比例是多少
  • 企业稳岗返还使用情况明细表
  • 待处理财产损溢借方是增还是减
  • 内账的表格怎么做
  • 转让专利权的使用权
  • 增资扩股对原股东的影响
  • 出售无形资产取得的收入计入什么科目
  • 安全生产费的使用包括
  • 民办非企业单位什么意思
  • 有没有确认
  • 供应商质量考核单
  • 应付账款暂估会计分录怎么写
  • sql中的递归
  • win7右下角提示测试模式
  • u 盘装wⅰn10系统
  • gnaupdaemon.exe是什么
  • windows使用svn命令
  • centos7搜索
  • windowsxp优化教程
  • oodag.exe - oodag是什么进程 有什么作用
  • windows 10微软
  • 错误日志项数
  • unicode类型 python
  • npm镜像是什么意思
  • js中的类是什么
  • 税务总局官网投诉
  • 财税库银后端商户为什么扣钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设