如何使用gulp压缩博客的html、css、image、js
安装gulp依赖
首先安装gulp,执行以下命令:
npm install gulp -g
安装完之后,怎么实现压缩我们的博客资源呢?
需要安装五个模块
gulp-htmlclean //清理html
gulp-htmlmin //压缩html
gulp-minify-css //压缩css
gulp-uglify-es //压缩js, -es 代表可以处理es6语法
gulp-imagemin //压缩图片
注意
因为 gulp-imagemin 被墙,无法下载,需要使用 cnpm 或者 代理 进行下载 (这是一个大坑)。
本文是通过cnpm进行安装的,不过也有如何给npm设置代理进行安装的说明,任选其一即可。
安装cnpm
-
执行命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
安装所需要我们压缩文件所需要的文件
cnpm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify-es gulp-imagemin --save-dev
-
在我们的博客目录下建一个名为:gulpfile.js,如图:
-
复制以下代码到gulpfile.js中
var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var uglify = require('gulp-uglify-es').default; var htmlmin = require('gulp-htmlmin'); var htmlclean = require('gulp-htmlclean'); var imagemin = require('gulp-imagemin'); gulp.task('minify-css', function() { return gulp.src('./public/**/*.css') .pipe(minifycss()) .pipe(gulp.dest('./public')); }); gulp.task('minify-html', function() { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true ,minifyJS: true ,minifyCSS: true ,minifyURLs: true })) .pipe(gulp.dest('./public')) }); gulp.task('minify-js', function() { return gulp.src('./public/**/*.js') .pipe(uglify()) .pipe(gulp.dest('./public')); }); gulp.task('images', function () { return gulp.src('./public/**/*.*') .pipe(imagemin()) .pipe(gulp.dest('./public')); }); // 执行 gulp 命令时执行的任务 gulp.task('default',gulp.series('minify-html', 'minify-css','minify-js','images', done => done()));
-
先生成博客文章,使用以下命令生成:
hexo g
-
在cmd中运行gulp进行压缩:
gulp
-
输出的结果,如图:
最后
部署到服务器即可
设置npm代理(可选)
首先看没有使用代理下载的情况
npm i --save-dev gulp-imagemin
经过漫长的等待后,出现的结果:
aaa@qq.com postinstall F:\privateWork\blog\node_modules\gifsicle
node lib/install.js‼ getaddrinfo ENOENT raw.githubusercontent.com
‼ gifsicle pre-build test failed
i compiling from source
× Error: Command failed: C:\Windows\system32\cmd.exe /s /c “autoreconf -ivf”
‘autoreconf’ �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���…
从 getaddrinfo ENOENT raw.githubusercontent.com 来看是获取不到这个域名的IP地址,属于DNS污染。于是有人就想我改一下DNS服务器地址,改成谷歌的8.8.8.8会不会成功呢?
让我们再来一下,首先移除这个安装失败的包
npm uninstall gulp-imagemin
改下DNS服务器
再运行下安装gulp-imagemin,出现的结果是
aaa@qq.com postinstall F:\privateWork\blog\node_modules\gifsicle
node lib/install.js
‼ read ECONNRESET
‼ gifsicle pre-build test failed
i compiling from source
× Error: Command failed: C:\Windows\system32\cmd.exe /s /c “autoreconf -ivf”…
read ECONNRESET,说明连接不上服务器,只能采用代理方式连接服务器
使用代理后,首先准备的:
- 本地代理地址,通过IE连接设置中的局域网设置查看
-
设置npm代理
npm config set proxy=http://127.0.0.1:14567
-
安装 gulp-imagemin
npm i --save-dev gulp-imagemin
-
安装完成后取消npm代理,因为不取消的话,就必须一直开着代理
npm config set proxy=null
推荐阅读
-
如何使用gulp压缩博客的html、css、image、js
-
如何使用php脚本给html中引用的js和css路径打上版本号
-
如何使用JS或css去掉a标签点击时、点击中、点击后的颜色_html/css_WEB-ITnose
-
如何还原压缩的CSS/HTML/JS文件_html/css_WEB-ITnose
-
如何使用php脚本给html中引用的js和css路径打上版本号,jscss
-
如何使用php脚本给html中引用的js和css路径打上版本号
-
如何使用php脚本给html中引用的js和css路径打上版本号_php实例
-
如何使用php脚本给html中引用的js和css路径打上版本号,jscss
-
如何使用php脚本给html中引用的js和css路径打上版本号,jscss_PHP教程
-
如何使用php脚本给html中引用的js和css路径打上版本号_PHP