关键词：
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自动化打包合并前端静态资源（cssjs文件压缩添加版本号）
...时间，所以决定使用gulp来代替手工完成这项工作。前端静态资源在发版更新时会面临客户端浏览器缓存的问题（可参考这篇文章），解决这个问题可以采用两类方法：覆盖方法（引用资源时加版本号，不修改资源文件名）、非... 查看详情
前端构建之--gulp(代码片段)
...空文件2、browser-sync用于自动刷新浏览器3、gulp-htmlmin用于压缩html4、gulp-clean-css压缩css5、gulp-uglify压缩js6、gulp-replace替换路径7、gulp-base64将小图背景图转换为base64的形式，可以自己设置最大多少尺寸转为base648、gulp-imagemin压缩图片... 查看详情
gulp静态资源构建压缩版本号添加
公司移动端商城使用前后分离方案，前台nginx静态文件，js使用requirejs模式，使用gulp压缩添加版本号时发现问题，问题1、在公共的js配置中，引用的路径是写死的，缓存会一直存在。解决方案是添加urlArgs构建时用shell脚本替换‘t... 查看详情
gulp教程之自动添加版本号(代码片段)
1创建项目安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件，项目目录如下：2自动更改版本号插件简介gulp-rev为css文件中引入的图片或字体等添加hash编码gulp-asset-rev为js/css文件生成hash编码并生成rev-manifest.json文件... 查看详情
如何使用gulp？(代码片段)
...远不止这些。如果你够疯狂，你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大，但你必须学会驾驭它。这是这篇文章的主要目的。帮助你了解Gulp的基础用法，助你早日完成一统天 查看详情
前端页面加载速度优化---ngnix之gzip压缩(代码片段)
gzipon;#开启Gzipgzip_staticon;#是否开启gzip静态资源#nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后，nginx首先检查是否存在请求静态文件的gz结尾的... 查看详情
gulp优化hexo方法(代码片段)
gulp通过对站点使用的静态资源进行压缩，来优化网站的访问速度。 首先安装gulp以及所需要的模块：npminstallgulp-g npminstallgulp-htmlcleangulp-htmlmingulp-minify-cssgulp-uglifygulp-imagemin--save 然后在博客的根目录下创建gulpfile.js文件... 查看详情
gulp和yarn的二分钟包会教程(代码片段)
1.什么是gulp？基于node的自动化构建工具 扩展：开发的时候分为2个节点一个是开发阶段 另一个是部署阶段 开发阶段：源文件不会被压缩 部署阶段：所有文件需要压缩2.gulp... 查看详情
gulp的使用以及gulp新手入门教程
Gulp新手入门教程原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/Gulp是一个自动化工具，前端开发者可以使用它来处理常见任务：搭建web服务器文件保存时自动重载浏览器使用预处理器如Sass、LESS优化资源，比如压缩CSS、JavaScript... 查看详情
nginx配置静态资源压缩(代码片段)
sendfileon;#让nginx在传输文件时直接在磁盘和tcpsocket之间传输数据location~.*\.(txt|xml)$gzipon;#开启压缩gzip_http_version1.1;#协议版本配置gzip_comp_level1;#压缩等级gzip_typestext/plainapplication/xml;#需要压缩的MIME类型 查看详情
gulp简单安装和入门(适用刚接触gulp的同学)(代码片段)
...高前端开发效率。 2、主要对js/sass/less/html/image/css等静态资源文件进行合并、压缩、格式化、浏览器自动刷新、部署文件生成、转换等操作。二、安装流程 1、安装nodejs(gulp是基于nodejs),直接打开nodejs官网,直接下载一个nodej... 查看详情
gulp(代码片段)
...的维护成本，最终需要将这些预处理器编译成css文件；对静态资源（css、js、html、images）压缩合并可以提升网页打开速度，提高性能；以上任务完如果完全靠手动来完成是非常耗时耗力的且容易出错，实际开发通常借助构建工具... 查看详情
gulp常用插件之gulp-useref使用(代码片段)
...览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来，对区块内的所有文件进行合并。注意：它只负责合并，不负责压缩！,如果需要做其他操作，可以配合gulp-if插件使用.更多使用文档请点击访问gulp-useref... 查看详情
vite打包配置(静态资源合并打包/清除log/gzip压缩/env配置等)(代码片段)
...-------------本来准备接在之前的文章vite+vue3+elementplus教程https://mp.csdn.net/mp_blog/creation/editor/122127233里面继续写的,但是看了下文章内容有点太多了,图多代码长的看的怪累的,所以就在这里另开一篇记录了,都是一些比较基础的配... 查看详情
经验之谈——gulp使用教程
gulp的最实用教程使用gulp编译less、sass、压缩js等常用功能讲解 gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确... 查看详情
用gulp构建你的前端项目
...异，随着模块化、组件化的提出，前端变得越来越复杂，静态资源越来越多，那么对静态资源的处理，如压缩，合并，去掉调试信息..如果还是人工去处理，效率非常之低且还容易出错，于是自动化的处理工具也就必然出现了。... 查看详情
gulp(代码片段)
1.压缩每个文件vargulp=require(‘gulp‘),//gulp基础库minifycss=require(‘gulp-minify-css‘),//css压缩concat=require(‘gulp-concat‘),//合并文件uglify=require(‘gulp-uglify‘),//js压缩rename=require(‘gulp-rename‘),//文件重命名jshint 查看详情
前端性能优化之gzip(代码片段)
...前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。压缩压缩方式前端压缩的方式很多，依赖java的有ant工具，前端自己打包压缩的有grunt，gulp，... 查看详情