项目代码 github 链接

css、js 压缩介绍

css、js 的压缩实际上主要是两点,一是去掉多余的空格、注释等,二是将多字母变量尽可能的缩短。通过这种方式来尽可能将 css 和 js 文件所占的空间减少,提高网站的效率。示例代码如下:
压缩前 js 代码

压缩后代码

安装插件

首先要确保 pc 上装有 gulp,如未安装 gulp,请参考:

在项目中安装需要的 gulp 插件

这里共用到了四个插件等会会详细介绍

压缩 js、css 文件

在项目根目录下新建 gulpfile.js,

项目目录

再 require 需要的 module。

压缩 css

压缩 js 文件

默认任务
在 cmd 中输入 gulp 后,执行的 minifycss、minifyjs 命令

将上述代码合并,码在 gulpfile.js 中

在 cmd 中执行命令

gulp

在 minified 文件夹下得到如下结果,main 文件是合并后的文件 main.min 文件是压缩后的文件
minified

感想

通过用 gulp 来压缩 css 和 js 文件,我了解了 gulp 的基本用法和强大的作用,以后应该少不了去用 gulp ,还要多多学习。

发表评论

电子邮件地址不会被公开。 必填项已用*标注