利用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文件

npm init

利用gulp工具对常规web项目进行压缩打包_第1张图片

二、安装gulp

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

npm install -g gulp

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

npm install --save-dev gulp

查看gulp版本
查看gulp版本

三、安装gulp插件

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

npm install --save-dev gulp-htmlmin gulp-clean-css gulp-uglify gulp-imagemin

安装成功后可以在 package.json 中看到各插件的版本
利用gulp工具对常规web项目进行压缩打包_第2张图片

四、配置gulp任务

在项目根目录新建 gulpfile.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 的语法和工作流程可参考此处

五、执行任务及报错处理

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

 gulp <任务名>

即可执行相应任务,若没有指定任务名,会默认执行 ‘default’ 任务,上面我们已经配置了总任务‘default’,所以直接执行 gulp 即可。
这里我们在package.json中配置一个打包指令,如下所示:

// package.json
{
  ...
  "scripts": {
    "build": "gulp"
  },
}

配置后,执行 npm run build 进行打包。
但此时执行应该会报错:
利用gulp工具对常规web项目进行压缩打包_第3张图片
报错原因是不能在模块外使用 import 语句。gulpfile.js中我们用到 import 引入所有依赖,但在 node.js 环境中默认使用的是 CommonJS 规范,import 是 ES6 中的模块化写法,CommonJS 模块与 ES6 模块不兼容,所以需要使用 require 语句进行导入。

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

方法1:依旧使用 import 引入

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

// package.json
{
  ...
  "type": "module"
}

配置后,就可以正常打包了。
利用gulp工具对常规web项目进行压缩打包_第4张图片
打包成功后,会在你的项目根目录自动生成一个dist目录,里面存放的就是压缩后的各个文件,对比查看压缩效果如下图所示
利用gulp工具对常规web项目进行压缩打包_第5张图片

方法2:改用 require 引入

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

// 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引入错误
这里的报错是说 gulp-imagemin 这个插件是ES模块,不支持使用 require 语法引用。
从 npm 官网查看此插件可知,gulp-imagemin 从v8.0.0版本开始使用 import 语法引入,如果要用 require,那就要把插件降级到此版本之前。

利用gulp工具对常规web项目进行压缩打包_第6张图片
因此,把gulp-imagemin 卸载并重新安装指定版本 [email protected]

// 卸载gulp-imagemin
npm uninstall gulp-imagemin
// 安装[email protected]
npm i --save-dev [email protected]

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

你可能感兴趣的:(开发工具使用技巧,前端框架使用技巧,gulp,node.js,前端项目打包)