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

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

1.安装Node

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

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

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

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

安装命令:

npm install cnpm -g -registry=

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

https://registry.npm.taobao.org

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

2.安装全局Grunt

安装命令:

cnpm install grunt -g

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

3.项目创建package.json

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

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

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然后回车

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 别名时,实际是执行列表里的任务,并按顺序执行

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzzdy.html