专栏首页web开发Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩、图片转base64、css和js的压缩以及合并,文件的md5重命名 ……。本人之前也是在项目中没具体使用过,闲来无事,查查资料,自己写了一个用gulp工具的小demo,有很多不足之处,欢迎指点。

第一步:安装node和npm

不用说,要用gulp,得先安装node和npm(安装完node后,自带有npm)

Node官网下载地址:https://nodejs.org/en/download/(具体怎么安装请自行查资料)

第二步:安装需要的插件

使用npm安装需要的插件(命令后面加 -g 表示全局安装,加 --save-dev 只安装到当前项目)

由于当前项目要使用,所以这些插件必须得安装到本项目中

安装命令如下:

npm init     //- 会生成一个package.json文件
npm install gulp --save-dev     //- gulp插件的核心
npm install gulp-minify-css --save-dev     //- 压缩CSS文件
npm install gulp-rev --save-dev         //- 对css、js文件名加MD5后缀
npm install gulp-rev-collector --save-dev   //- 路径替换
npm install gulp-clean --save-dev            //- 用于删除文件
npm install gulp-uglify --save-dev            //- 压缩js代码
npm install gulp-imagemin --save-dev      //- 压缩图片
npm install gulp-base64 --save-dev        //- 把小图片转成base64字符串

安装完毕之后,会在项目中生成一个node_moudles目录,所有的插件全部在该目录下。

第三步:构建项目目录结构以及编写项目代码

本例代码只用做测试而已,目录结构以及代码是我随意写的

我的目录结构,如下图:(目录没有全部展开)

目前index.html文件中的css和js的引用路径是这样的,如下图:

其他目录下的html文件也是这样的,都引用的是未压缩和md5命名的css和js文件。

第四步:创建一个gulpfile.js文件,该文件和node_modules文件夹平级

gulpfile.js文件内容如下:

gulpfile.js:

var gulp = require('gulp');
var concat = require('gulp-concat');                //- 多个文件合并为一个;
var minifyCss = require('gulp-minify-css');         //- 压缩CSS文件;
var rev = require('gulp-rev');                      //- 对css、js文件名加MD5后缀
var revCollector = require('gulp-rev-collector');   //- 路径替换
var clean = require('gulp-clean');                  //- 用于删除文件
var uglify = require('gulp-uglify');                //- 压缩js代码
var imagemin = require('gulp-imagemin');            //- 压缩图片
var base64 = require('gulp-base64');                //- 把小图片转成base64字符串
var q = require('q');                               //- 用于解决任务执行顺序的问题(一个任务执行完毕才执行另外一个任务)(暂时还没用到)

/*清理文件*/
gulp.task('clean',function () {                     //删除dist目录下的所有文件
    gulp.src('dist/*',{read:false})
        .pipe(clean());
});

/*压缩js文件,并生成md5后缀的js文件*/
gulp.task('compress-js',function (callback) {       //- 创建一个名为compress-js的task
    gulp.src(['webContent/js/**/*.js'])             //- 需要处理的js文件,放到一个字符串数组里
        .pipe(uglify())                             //- 压缩文件
        .pipe(rev())                                //- 文件名加MD5后缀
        .pipe(gulp.dest('dist/js'))                 //- 另存压缩后的文件
        .pipe(rev.manifest())                       //- 生成一个rev-manifest.json
        .pipe(gulp.dest('rev-js'))                  //- 将rev-manifest.json保存到 rev-js 目录内
        .on('end',function () {
            console.log('compress-js has been completed');
            callback();
        });
});

/*压缩css文件,并生成md5后缀的css文件*/
gulp.task('compress-css', function(callback) {      //- 创建一个名为compress-css的task
    gulp.src(['webContent/css/**/*.css'])           //- 需要处理的css文件,放到一个字符串数组里
        // .pipe(concat('css/wap.min.css'))         //- 合并后的文件名
        .pipe(minifyCss())                          //- 压缩处理成一行
        .pipe(rev())                                //- 文件名加MD5后缀
        .pipe(gulp.dest('dist/css'))                //- 输出文件到dist/css目录下
        .pipe(rev.manifest())                       //- 生成一个rev-manifest.json
        .pipe(gulp.dest('rev-css'))                 //- 将rev-manifest.json保存到rev-css目录内
        .on('end',function () {
            console.log('compress-css has been completed');
            callback();
        });
});

/*修改html文件的link标签和script标签引用的css和js文件名,并把html文件输出到指定的位置*/
gulp.task('rev-html',['compress-css','compress-js'], function() {          //- compress-css和compress-js任务执行完毕再执行rev-index任务
    /*修改index.html文件的link标签和script标签引用的css和js文件名,并把html文件输出到指定的位置*/
    gulp.src(['rev-css/*.json','rev-js/*.json', 'webContent/index.html'])   //- 读取两个rev-manifest.json文件以及需要进行css和js名替换的html文件
        .pipe(revCollector())                                               //- 执行文件内css和js名的替换
        .pipe(gulp.dest('dist/'));                                          //- 替换后的html文件输出的目录

    /*修改其它html文件的link标签和script标签引用的css和js文件名,并把html文件输出到指定的位置*/
    gulp.src(['rev-css/*.json','rev-js/*.json', 'webContent/views/**/*.html'])     //- 读取两个rev-manifest.json文件以及需要进行css和js名替换的html文件
        .pipe(revCollector())                                                      //- 执行文件内css和js名的替换
        .pipe(gulp.dest('dist/views'));                                            //- 替换后的html文件输出的目录
});

/*压缩并复制图片*/
gulp.task('compress-img',function () {
    gulp.src('webContent/images/**/*.*')    //原图片的位置
        .pipe(imagemin())                   //执行图片压缩
        .pipe(gulp.dest('dist/images'));    //压缩后的图片输出的位置
});

/*最终执行的任务-css*/
gulp.task('rev',['rev-html','compress-img']);

//***********************************************************************************************

//命令行顺序: clean, rev

第五步:运行gulp命令

运行如下命令:gulp rev

运行完该命令后会生成以下三个目录:dist、rev-css、rev-js。其中dist目录下就是新的html文件、css文件、js文件和图片,目录和之前的webContent目录下的结构是一样的。

运行完命令后的项目整体结构如下:

WebContent目录的结构和dist目录的结构是一样的,如下:

所有的css和js文件都加了md5命名了,所有的图片体积也小了,但用肉眼看不出来图片质量有变化。

此时dist目录下所有的html文件引用的css和js的引用路径都变成带有md5命名的了。例如index.html,见下图

此时dist目录下的东西就是我们可以上线的文件了。(当然还有很多不完善的地方,还有很多缺陷,毕竟个人知识能力有限。)

第六步:代码的改动

如果后续代码有改动的话,执行一次gulp clean命令,再执行一次gulp rev 命令:

gulp clean命令就可以把dist目录下生成的所有文件全部删除,gulp rev命令会根据新的代码重新生成所有文件到dist目录下。

命令截图如下:

另外本来也想在本例中使用图片转成base64,可是一直没成功解决。如果哪位大神有知道的,还望能在评论区给个链接,让我也学习学习。

说明:由于本人知识有限,才接触gulp不久,只能实现这样一些功能,肯定还有很多不足的地方,还有很多需要不断完善优化的地方以及很多还不知道的功能,。或许在稍微大型一点的项目中也不知会不会出现问题。所有的这一切,包括其他工具的使用等等,都需要后续的继续努力学习。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack入门——webpack的安装与使用

    一、简介 1、什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/s...

    用户1174387
  • 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的u...

    用户1174387
  • gulp实现公共html代码复用

    在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的。我们不可能在每个html页面都写一遍...

    用户1174387
  • Gulp 定制专属提速“外挂”(下)

    友情提示:推荐阅读时间10分钟 + 练习时间10分钟 上一期给大家分享了Gulp插件的安装与使用,只要掌握了Gulp插件安装的流程与配置,对于其他Gulp插件的...

    HTML5学堂
  • 前端防止浏览器访问旧版 js 和 css 的优化思路

    楼主经过实际的项目情况反馈,总结以下两点切实可行的办法,分享给大家,希望对大家有帮助。

    编筐少年
  • python学习笔记(十)、文件操作

    在前面我们了解到了没得模块,其中有一个模块为fileinput,为文件操作模块,不知道小伙伴们是否还记得?

    py3study
  • 真心的说几句

    很多人说“我准备做一名前端开发工程师了,web前端”, 我不管你是专业的科班出身,还是出于兴趣,或者为了找工作什么的选择这个方向。 尽管都是写代码,开发前端页面...

    前朝楚水
  • 初识Redis的数据类型HyperLogLog

    未来一段时间开发的项目或者需求会大量使用到Redis,趁着这段时间业务并不太繁忙,抽点时间预习和复习Redis的相关内容。刚好看到博客下面的UV和PV统计,想到...

    Throwable
  • 初识Redis的数据类型HyperLogLog

    未来一段时间开发的项目或者需求会大量使用到Redis,趁着这段时间业务并不太繁忙,抽点时间预习和复习Redis的相关内容。刚好看到博客下面的UV和PV统计,想到...

    Throwable
  • 关于我博客中的猫是怎么设置的说明

    点击管理--设置--往下拉,会有一个申请js权限,你需要先申请js权限,注意好措辞呦,有人说申请权限挺艰难的。我当初申请时说的是我写了不少博客了,希望美化一下自...

    绝命生

扫码关注云+社区

领取腾讯云代金券