使用 gulp 压缩文件

gulp 是基于 node 的自动化构建工具,采用的是管道传输机制(一个输出源,一个管道,一个输入源)
输入源: gulp.src('path')
path 即为项目代码路径
管道传输:.pipe()
输出源(即压缩以后文件的存放位置):gulp.dist('path')

说明:
gulp.task('XXX,function(){})中的 XXX 是自己定义的,用来在小黑屏中执行命令,定义什么,执行什么

1、全局安装gulp:

注:gulp安装到C盘,下面的其他安装都是再项目目录下

2、初始化文件夹(以下安装的插件项目目录中执行)

初始化完成以后,自动生成 package.json 文件,之后安装的一系列插件都在这个文件中可以看到

3、局部安装 npm

--save 是把配置信息保存到 package.json 文件中,-dev 是保存到 package.json 的 devDendencies 对象中
--save-dev 可简介为 -D
成功以后会自动创建一个 node_modules 文件夹

前面都是压缩文件的准备工作,下面正式开始压缩文件

4、新建一个 gulpfil.js 文件,进行配置

小黑屏中运行 gulp 可以看到成功结果

5、压缩 html 文件
1)先安装依赖

2)再在 gulpfile.js 中进行配置

3)小黑屏执行 gulp htmlmin,将会自动压缩(没有 error 即为成功,图片中是成功)

6、编译 sass 文件(如果是 css 文件则直接压缩,我的就是css 文件)
1)安装依赖

2)配置 gulpfile.js 文件

3)小黑屏执行 gulp sassmin,将会自动压缩

7、压缩 css 文件
1)安装依赖

2)配置 gulpfile.js 文件

3)小黑屏执行 gulp cssmin,将会自动压缩

8、压缩 image 文件
图片还能压缩?压缩完以后忘了查看文件大小
1)安装依赖

2)配置 gulpfile.js 文件

3)小黑屏执行 gulp imgmin,将会自动压缩
9、压缩 js 文件
1)安装依赖

2)配置 gulpfile.js 文件

3)小黑屏执行 gulp jsmin,将会自动压缩

现在就已经完成了文件压缩,目前我是直接替换压缩过的文件的

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复