Gulp——文件压缩和文件指纹

最新推荐文章于 2023-07-08 16:30:15 发布

chenchao2016

最新推荐文章于 2023-07-08 16:30:15 发布

阅读量4.2k

点赞数

分类专栏：前端工程文章标签： gulp 发布压缩

本文链接：https://blog.csdn.net/u010486124/article/details/52078466

版权

本文介绍了如何使用Gulp进行文件压缩，特别是在发布项目时为JS和CSS添加文件指纹，以解决浏览器缓存问题。作者分享了三种不同的文件指纹添加方法，并讨论了它们在实际项目中的应用和优势。

摘要由CSDN通过智能技术生成

上周还倒腾了一件事，就是使用gulp给项目的JS和CSS添加版本，主要是控制新版本文件发布时浏览器缓存的问题，我看很多工具称这中做法叫做添加“文件指纹”，这里也这样叫好了，其中压缩是添加指纹前的一个步骤。

先看下文件指纹添加成功发布后的“成果”。

首先介绍下gulp的文件压缩（压缩css和js）

（下面介绍的代码移步这里）

我的文件目录如下：

（标红部分是生成的处理后的文件）

如何使用gulp，请移步这里（gulp详细入门）

Json里面放这些插件就够了：

{
  "name": "test",
  "version": "1.0.0",
  "description": "文件压缩、文件指纹",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "小工匠",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^1.5.4"
  }
}

gulpfile.js配置文件如下：

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')();

gulp.task('minifyCss',function() {
    return gulp.src('css/index.css')                    //输入
            .pipe(plugins.concat('style.min.css'))      //合并（输入的文件有多个时或合并成一个）
            .pipe(plugins.minifyCss())                  //压缩
            .pipe(gulp.dest('./'));                     //输出
})