码迷,mamicode.com
首页 > 其他好文 > 详细

gulp教程之静态资源压缩

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

标签:简单的   pre   rip   package   技术   任务   创建   合并   src   

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教程之静态资源压缩

标签:简单的   pre   rip   package   技术   任务   创建   合并   src   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!