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

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

1.安装Node

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

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

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

安装命令:

npm install cnpm -g -registry=https://registry.npm.taobao.org

2.安装全局Grunt

安装命令:

cnpm install grunt -g

3.项目创建package.json

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

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

我们所需要的插件

插件名称 说明 Github地址
grunt-contrib-clean 清空文件和文件夹 https://github.com/gruntjs/grunt-contrib-clean
grunt-contrib-copy 复制文件和文件夹 https://github.com/gruntjs/grunt-contrib-copy
grunt-contrib-concat 连接、合并文件(没用到) https://github.com/gruntjs/grunt-contrib-concat
grunt-contrib-cssmin (CSS文件)压缩 https://github.com/gruntjs/grunt-contrib-cssmin
grunt-contrib-uglify (JS文件)压缩 https://github.com/gruntjs/grunt-contrib-uglify
grunt-filerev 文件内容hash(MD5)(版本号控制) https://github.com/yeoman/grunt-filerev
grunt-usemin 文件进行引用修改 https://github.com/yeoman/grunt-usemin
load-grunt-tasks oad-grunt-tasks https://github.com/sindresorhus/load-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 (这是重点,重点,重点。重要的事情说三遍。)

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

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入门 了解到插件如何使用,这是官网的例子。

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文件夹中

我们创建文件路径

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针对静态文件的压缩,版本控制打包的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解使用grunt完成requirejs的合并压缩和js文件的版本控制

    最近有一个项目使用了 requirejs 来解决前端的模块化,但是随着页面和模块的越来越多,我发现我快要hold不住这些可爱的js文件了,具体表现在每个页面都要设置一堆 requirejs 的配置( baseUrl , paths 之类的). 不知谁说过,一些事重复做了三次,就该考虑一下自动化了,于是我小心翼翼的掏出了我的 grunt . 我们得使用 grunt-contrib-requirejs 这个插件来实现如上所说的自动化功能,这个就是根据 r.js 封装的 grunt 插件. 安装 gr

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

    在讲之前先谈谈大致步骤:安装nodejs -> 全局安装grunt -> 项目创建package.json --> 项目安装grunt以及grunt插件 -> 配置Gruntfile.js -> 运行任务 1.安装Node 我们开始之前需要安装Nodejs,如果没有安装的 传送门 安装好了之后,查看是否安装成功,正常是这样的提示 这里建议npm换成淘宝的cnpm,速度杠杠的. 安装命令: npm install cnpm -g -registry=https://regist

  • Django静态文件配置request对象方法ORM操作讲解

    目录 django框架请求流程 静态文件及相关配置 请求方法 request对象方法 pycharm链接MySQL Django链接MySQL Django ORM ORM语法 ORM外键关联 django框架请求流程 静态文件及相关配置 ORM:对象关系映射 python 映射   数据库类      表 对象     记录对象.属性     字段对应的值'ORM的存在可以使不会MySQL的程序员 使用python的语法操作数据库' 1.先去model.py中编写模型类(相当于是在建表) cl

  • python 读取.csv文件数据到数组(矩阵)的实例讲解

    利用numpy库 (缺点:有缺失值就无法读取) 读: import numpy my_matrix = numpy.loadtxt(open("1.csv","rb"),delimiter=",",skiprows=0) 写: numpy.savetxt('2.csv', my_matrix, delimiter = ',') 可能遇到的问题: SyntaxError: (unicode error) 'unicodeescape' codec

  • C#实现对图片文件的压缩、裁剪操作实例

    本文实例讲述了C#对图片文件的压缩.裁剪操作方法,在C#项目开发中非常有实用价值.分享给大家供大家参考.具体如下: 一般在做项目时,对图片的处理,以前都采用在上传时,限制其大小的方式,这样带来诸多不便.毕竟网站运维人员不一定会对图片做处理,经常超出大小限制,即使会使用图片处理软件的,也由于个人水平方面原因,处理效果差强人意. 于是采用C#为我们提供的图像编辑功能,实现一站式上传,通过程序生成所需大小.尺寸的目标图片. 具体步骤如下: 先说图片压缩: 第一步:需要读取一个图片文件,读取方法: //

  • Django框架静态文件使用/中间件/禁用ip功能实例详解

    本文实例讲述了Django框架静态文件使用/中间件/禁用ip功能.分享给大家供大家参考,具体如下: 静态文件 一.静态文件的使用 静态文件:网页中使用的css,js,图片 静态文件的使用: 在项目下创建静态目录,比如:static,导入静态文件(HTML.CSS.js) 在setting.py中配置静态目录 # 通过此url来引用静态文件,可以隐藏服务器的文件的实际保存目录 STATIC_URL = '/abc/' # 指定静态文件所在的物理目录 STATICFILES_DIRS = [os.p

  • php的文件上传入门教程(实例讲解)

    一.文件上传 为了让客户端的用户能够上传文件,我们必须在用户界面中提供一个表单用于提交上传文件的请求.由于上传的文件是一种特殊数据,不同于其它的post数据,所以我们必须给表单设置一个特殊的编码: 复制代码 代码如下: <form action="upload.php" method="POST" enctype="multipart/form-data"></form> 以上的enctype属性,你可能不太熟悉,因为这常

  • 浅析Python打包时包含静态文件处理方法

    使用场景 已搭建了PyPI私有库,上传公共库包含静态文件,如需要使用sql静态文件初始化数据库. 打包python包,给其他人使用,但项目中包含静态文件,如html. 解决步骤 解决静态文件读取问题 解决静态文件打包问题 环境 Python3.8 PyCharm 2020 demo项目为例 创建项目 展示静态文件读取问题 解决方案 展示静态文件打包问题 解决方案 1. 创建项目 创建一个demo项目(text-setup),目录如下 test-setup demo \_\_init\_\_.py

  • 解析如何利用一个ASP.NET Core应用来发布静态文件

    虽然ASP.NET Core是一款"动态"的Web服务端框架,但是在很多情况下都需要处理针对静态文件的请求,最为常见的就是这对JavaScript脚本文件.CSS样式文件和图片文件的请求.针对不同格式的静态文件请求的处理,ASP.NET Core为我们提供了三个中间件,它们将是本系列文章论述的重点.不过在针对对它们展开介绍之前,我们照理通过一些简单的实例来体验一下如何在一个ASP.NET Core应用中发布静态文件. 目录 一.以Web的形式读取文件 二.浏览目录内容 三.显示默认页面

  • ASP.NET Core中预压缩静态文件的方法步骤

    前言 Web应用程序的优化是非常重要,因为使用更少的CPU,占用更少的带宽可以减少项目的费用. 在ASP.NET Core中我们可以很容易的启用响应压缩,但是针对预压缩文件,就需要做一些额外的功能了. 这篇博客文章展示了如何在ASP.NET Core中预压缩静态文件. 下面话不多说了,来一起看看详细的介绍吧 为什么需要预压缩文件? 虽然在从服务器请求文件时, 我们可以动态压缩文件,但这意味这Web服务器需要做更多的额外工作. 其实只有在新的应用程序部署时才会更改要压缩的文件. 越好的压缩效果需要

  • PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)

    apache的强大终于超出了我的想象,仅仅蜻蜓点水般触及了一点php皮毛,这点皮毛就在我原有的知识库基础上爆炸开来,好像PN结的"雪崩击穿"一样,让我想到了多种技术结合无限的应用前景. 由于九州未来的服务器限制流量,那么减少流量负载也就能减少金钱支出. 如何减少流量,最方便的办法就是用Gzip压缩,这个apache的gzip压缩是靠一个叫做zlib的类库和gzip的模块(mod_gzip.c)完成的,这玩意专门有一帮牛人研究,因为gzip本身就大名鼎鼎的,并且具有高压缩率开源的压缩原理

随机推荐