Gulp压缩js、css、img、html提高页面打开速度

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

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

1. 全局安装 gulp:

npm install gulp -g

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

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

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

淘宝团队为我们分享了国内镜像,命令提示符执行; 注意:安装完后最好查看其版本号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)

varminifyCSS = 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

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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180507G1VAC800?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券