首页 > 其他 > 详细

gulp教程之静态资源压缩

时间:2020-04-14 00:22:07      阅读:93      评论:0      收藏:0      [点我收藏+]

1 创建项目

安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件,项目目录如下:

技术分享图片

2 压缩插件简介

gulp-useref 合并html里面的js/css
gulp-concat用于合并文件,把也就是多个文件合并到一个文件中,以节省存储空间
gulp.spritesmith 图片合并成雪碧图

3 本地安装插件

安装gulp-useref

npm install gulp-useref --save-dev  

安装gulp-concat

npm install gulp-concat --save-dev  

安装gulp.spritesmith

npm install gulp.spritesmith --save-dev  

4 配置gulpfile.js

技术分享图片

5 执行任务

命令提示符执行:

gulp 

执行后压缩后的文件目录如下:

技术分享图片

6 插件其他参数

6.1 gulp-html-minify

技术分享图片

6.2 gulp-clean-css

技术分享图片

6.3 gulp-uglify

技术分享图片

6.4 gulp-imagemin

技术分享图片

7 总结

本文简单的介绍如何压缩静态资源及使用到的对于插件,下一篇介绍使用gulp如何让文件自动添加版本号。

gulp教程之静态资源压缩

原文:https://www.cnblogs.com/huiguo/p/12694932.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!