Gulp压缩jscssimghtml提高页面打开速度

Posted 2021-04-08 Web刘教主

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

压缩 js、css、img、html 代码可降低文件大小，提高页面打开速度。在不利用 gulp 时我们需要通过各种工具手动完成压缩工作。但如果js、css、html文件比较多时候，手动就比较麻烦，gulp这时候就可以派上用场了。

1. 全局安装 gulp：

    npm install gulp -g

gulp是基于nodejs，理所当然需要先安装nodejs

全局安装是为了能够在cmd命令行中的任意目录中使用

（npm安装插件是从国外服务器下载，受网络影响大，可能出现异常

淘宝团队为我们分享了国内镜像，命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org；  注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开）

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

2.作为项目的开发依赖（devDependencies）安装：

    npm install gulp --save-dev

在本地项目中局部安装gulp 在本地项目中使用需要gulp插件

在本地项目中安装如下：

使用gulp -v可以查看gulp的版本号

3.新建一个package.json

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件

注意：json文件内是不能写注释的

这就是json文件

前三项是必填

name: 项目名

version：项目的版本号

descrption：项目描述

其他可以不填

当然这个文件我们可以让它自动生成

使用  npm init  
前三项必填 后面直接回车跳过

最后is this OK？输入 y 回车

此时项目的根目录会自动新建一个package.json文件

4.新建gulpfile.js 文件（必须这个名字）

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）

我们先来压缩项目中所有的js文件

在 gulpfile.js 中写入以下代码

在项目根目录 shift + 右键

在命令行输入  gulp script 

不出意外会报错  是说压缩js的模块 gulp-uglify 找不到

// 获取 uglify 模块（用于压缩 JS）

var uglify = require('gulp-uglify')

虽然我们加载了模块但是本地中没有该模块 需要下载

使用 命令 npm install gulp-uglify  下载模块

下载完成

然后在 运行 gulp script 

OVER！！！

此时项目根目录中会多个dist文件夹 里面有个 js 文件夹 存放了 所有压缩过的js文件

然后我们压缩 css文件

在 gulpfile.js 中先加载 压缩 css 的 gulp-minify-css 模块

// 获取 minify-css 模块（用于压缩 CSS） 
var minifyCSS = require('gulp-minify-css')

// 压缩 css 文件

// 在命令行使用 gulp css 启动此任务

gulp.task('css', function () {

    // 1. 找到文件

    gulp.src('css/*.css')

    // 2. 压缩文件

        .pipe(minifyCSS())

    // 3. 另存为压缩文件

        .pipe(gulp.dest('dist/css'))

})

在cmd命令行输入 gulp css 

如果报错 就 npm install gulp-minify-css 安装模块

在执行  gulp css 

然后我们继续压缩html文件

npm install gulp-minify-html 下载 压缩html的模块

// 压缩html插件

var minifyHTML = require('gulp-minify-html');

// 压缩html文件

// 在命令行使用 gulp htmlpage 启动此任务

gulp.task('htmlpage', function() {

  gulp.src('./*.html')

    .pipe(minifyHTML())

    .pipe(gulp.dest('./dist'));

});

执行 gulp htmlpage

最后压缩图片

// 压缩图片插件

var image = require('gulp-imagemin');

// 压缩图片文件

// 在命令行输入 gulp image 启动此任务

gulp.task('images', function() {

  gulp.src('./images/*')

    // 压缩

    .pipe(image())

    // 保存

    .pipe(gulp.dest('./dist/images'));

});

所有文件压缩完后 存在一个问题 就是

在前面的那些任务当中，当你只修改其中一个文件的话，其实所有的文件都会被重新编译一次。当编译的文件比较多的时候，所需要的时间就会大大增加。这时候，我们就要用到一个新的插件 gulp-changed.

npm install --save-dev gulp-changed

需要在 gulpfile.js 中加载

// 检测更新单个文件插件

var changed = require('gulp-changed');

这里以压缩js为例 其他按照更改即可

最后一个问题就是每次改完源文件 都需要 手动去 执行 压缩文件

gulp script

gulp css

gulp htmlpage

gulp images

任务太多 手动执行命令效率太低

我们可以让 gulp 自动监听 并压缩所更改的文件

把这些任务都监听后，我们要做的就是输入命令运行：

gulp

这样我们文件有修改，就会自动运行