利用gulp工具对常规web项目进行压缩打包

前言

对于一个常规的web项目,如下项目目录

|- imgs
|	- img1.png
|	- img2.png
|- js
|	- user.js
|	- utils.js
|- css
|	- index.css
|	- user.css
|- html
|	- user.html
|- index.html

可以使用各种构建工具(如webpack、gulp、grunt等)来打包这个项目,这些工具可以对html、css、js文件进行压缩,以及优化图片等。

下面介绍用gulp工具来进行项目打包,它算是比较简单实用的一种工具,容易上手。

一、 项目初始化

首先,在项目根目录,初始化项目,生成一个package.json文件

bash 复制代码
npm init

二、安装gulp

全局安装gulp,通过它执行gulp任务

bash 复制代码
npm install -g gulp

本地安装gulp,用于调用gulp插件的功能

bash 复制代码
npm install --save-dev gulp

查看gulp版本

三、安装gulp插件

gulp-htmlmin:html压缩
gulp-clean-css:css压缩
gulp-uglify:js压缩
gulp-imagemin:图片压缩

bash 复制代码
npm install --save-dev gulp-htmlmin gulp-clean-css gulp-uglify gulp-imagemin

安装成功后可以在 package.json 中看到各插件的版本

四、配置gulp任务

在项目根目录新建 gulpfile.js 文件,在此文件中配置压缩打包的任务,具体配置如下:

js 复制代码
// ES6语法引入各插件
import gulp from 'gulp'
import uglify from 'gulp-uglify'
import cleanCSS from 'gulp-clean-css'
import htmlmin from 'gulp-htmlmin'
import imagemin from 'gulp-imagemin'

// 配置js文件压缩任务
gulp.task('minify-js', function () {
  return gulp.src('js/*.js') // 文件匹配路径语法可参考:https://marco-hui.github.io/JavaScript-outline/expand/skill/gulp.html#globs%E8%AF%AD%E6%B3%95
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

// 配置css文件压缩任务
gulp.task('minify-css', function () {
  return gulp.src('css/*.css')
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(gulp.dest('dist/css'))
})

// 配置html文件压缩任务
gulp.task('minify-index-html', function () {
  return gulp.src('index.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'))
})
gulp.task('minify-html', function () {
  return gulp.src('html/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist/html'))
})

// 配置图片压缩任务
gulp.task('minify-images', function () {
  return gulp.src('imgs/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/imgs'))
})

// 将以上任务组合成一个总任务,执行时只需要执行总任务即可
gulp.task('default', gulp.series('minify-js', 'minify-css', 'minify-index-html', 'minify-html', 'minify-images'))

有关 gulp 的语法和工作流程可参考此处

五、执行任务及报错处理

最后待代码开发完毕后,在项目根目录打开命令窗口执行

bash 复制代码
 gulp <任务名>

即可执行相应任务,若没有指定任务名,会默认执行 'default' 任务,上面我们已经配置了总任务'default',所以直接执行 gulp 即可。

这里我们在package.json中配置一个打包指令,如下所示:

javascript 复制代码
// package.json
{
  ...
  "scripts": {
    "build": "gulp"
  },
}

配置后,执行 npm run build 进行打包。

但此时执行应该会报错:

报错原因是不能在模块外使用 import 语句。gulpfile.js中我们用到 import 引入所有依赖,但在 node.js 环境中默认使用的是 CommonJS 规范,import 是 ES6 中的模块化写法,CommonJS 模块与 ES6 模块不兼容,所以需要使用 require 语句进行导入。

下面介绍两种方法解决这个问题:

方法1:依旧使用 import 引入

若依旧想要使用 import ,可以在 package.json 中配置 "type": "module", 则会将gulpfile.js 以ES模块进行处理。

javascript 复制代码
// package.json
{
  ...
  "type": "module"
}

配置后,就可以正常打包了。

打包成功后,会在你的项目根目录自动生成一个dist目录,里面存放的就是压缩后的各个文件,对比查看压缩效果如下图所示

方法2:改用 require 引入

如果使用 import 语法依然有问题,那就改用 require 语法引入各插件

js 复制代码
// gulpfile.js
// CommonJS语法引入各插件
var gulp = require('gulp')
var uglify = require('gulp-uglify')
var cleanCSS = require('gulp-clean-css')
var htmlmin = require('gulp-htmlmin')
var imagemin = require('gulp-imagemin')

相应的 package.json 中也不需要配置 "type": "module" 了,删掉此行。

此时运行打包,可能会报以下错误:

这里的报错是说 gulp-imagemin 这个插件是ES模块,不支持使用 require 语法引用。

npm 官网查看此插件可知,gulp-imagemin 从v8.0.0版本开始使用 import 语法引入,如果要用 require,那就要把插件降级到此版本之前。

因此,把gulp-imagemin 卸载并重新安装指定版本 gulp-imagemin@7.1.0

bash 复制代码
// 卸载gulp-imagemin
npm uninstall gulp-imagemin
bash 复制代码
// 安装gulp-imagemin@7.1.0
npm i --save-dev gulp-imagemin@7.1.0

降级完成后,执行 npm run build 打包,也可以正常的对项目文件进行压缩打包了。

相关推荐
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端李易安13 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
Ztiddler1 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
前端青山1 天前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
老攀呀1 天前
安装多个nodejs版本(nvm)
node.js
佚名程序员1 天前
【Node.js】全面解析 Node.js 安全最佳实践:保护您的应用
安全·node.js
zxg_神说要有光2 天前
快速入门 AI:调用 AI 接口生成 React 组件
前端·javascript·node.js
佚名程序员2 天前
【Node.js】深入理解 V8 JavaScript 引擎
前端·javascript·node.js
赵闪闪1682 天前
Node.js 安装与开发环境配置全指南
node.js
前端与小赵2 天前
什么是Webpack,有什么特点
前端·webpack·node.js