繁重针对静态文件的压缩,版本控制打包的实例讲解 - 行业资讯

在讲之前先谈谈大致步骤:<>强安装nodejs→全局安装繁重→项目创建包。json——比;项目安装繁重以及繁重插件→配置Gruntfile。js→运行任务

我们开始之前需要安装Nodejs,如果没有安装的<强>

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

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

安装命令:

　　<强> npm安装cnpm - g注册表=https://registry.npm.taobao.org

安装命令:

cnpm安装繁重- g

<强> <强>

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

我们所需要的插件

　　　　　　　　<>强插件名称　　<>强说明　　<强> 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 　　文件内容散列(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 　　　　　　　　

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

回车后的界面

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

<强> cnpm安装繁重grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks——save-dev

<强>

。重要的事情说三遍。)

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

　　　　　　模块。出口=function () { 　　要求(“load-grunt-tasks”)(繁重);={var路径　　src:“测试”, 　　桌子:“距离”, 　　} 　　　　grunt.initConfig ({ 　　路径:路径, 　　清洁:{//清空生产文件夹　　beforebuild: { 　　文件:[{ 　　src: [' & lt; %=path.dest %祝辞/') 　　} 　　] 　　} 　　}, 　　filerev:{//对css和js文件重命名　　构建:{ 　　文件:[{ 　　src (' & lt; %=path.dest %祝辞/* *’, 　　”! & lt; %=path.dest %祝辞/页面/* . html的,//html文件不加版本号　　”! & lt; %=path.dest %祝辞/* */*。{jpg, png jpeg} ']//图片不需要加版本号　　} 　　] 　　} 　　}, 　　useminPrepare:{//声明concat、cssmin,糟蹋　　构建:{ 　　文件:[{ 　　src:“& lt; %=路径。%在src/页面/* . html” 　　} 　　), 　　　　} 　　}, 　　usemin:{//修改html中的css和javascript引用　　html: { 　　文件:[{ 　　src:“& lt; %=path.dest %祝辞/页面/* . html” 　　} 　　] 　　} 　　}, 　　复制:{//复制文件　　构建:{ 　　文件:[{ 　　扩展:真的,//为真的启用慢性消耗病,src,桌子选项　　鹿:“& lt; %=路径。%在src/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) 　　src:(* */*。*’),//相对慢性消耗病于路径的匹配模式。意思就是src/* */* . *,匹配src下面所有文件　　桌子:“& lt; %=path.dest %祝辞/'//目标文件路径前缀。　　} 　　] 　　} 　　}, 　　cssmin: { 　　构建:{ 　　文件:[{ 　　扩展:真的,//为真的启用慢性消耗病,src,桌子选项　　鹿:“& lt; %=路径。%在src/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) 　　src: [' css/*。css ']//相对慢性消耗病于路径的匹配模式。意思就是src/* */* . css,匹配src下面所有css文件　　桌子:“& lt; %=path.dest %祝辞/'//目标文件路径前缀。　　} 　　] 　　} 　　}, 　　糟蹋:{ 　　构建:{ 　　文件:[{ 　　扩展:真的,//为真的启用慢性消耗病,src,桌子选项　　鹿:“& lt; %=路径。%在src/',//所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) 　　src: [' js/*。js ']//相对慢性消耗病于路径的匹配模式。意思就是src/* */* . js,匹配src下面所有js文件　　桌子:“& lt; %=path.dest %祝辞/'//目标文件路径前缀。　　} 　　] 　　} 　　}, 　　}); 　　咕哝。registerTask(“违约”,“清洁:beforebuild”、“复制”、“cssmin”,“糟蹋”,“filerev”, ' usemin ']); 　　