使用Gulp压缩静态资源

如果希望对在静态页面中引入的相关资源进行压缩（比如：CSS，JavaScript，图片等），可以使用Gulp实现。
当然，还可以使用其他打包工具，比如：Grunt，Webpack等等。

Gulp是什么

Gulp是一个用于对静态Web资源进行打包的工具，可以实现对静态资源的压缩，本质上是一个npm模块。
在正式使用Gulp之前，需要先安装并配置好Node.js环境。

# 查看node.js版本
node --version
v16.15.1

# 查看npm版本
npm --version
8.11.0

# 全局安装gulp和gulp-cli命令行工具
npm install --global gulp
npm install --global gulp-cli

# 查看gulp版本
gulp -version
CLI version: 2.3.0
Local version: 4.0.2

如何使用Gulp

Gulp是一个流式构建工具，具体要执行的任务可以在项目根目录下新建一个名叫“gulpfile.js”的文件，并在其中进行配置。

// 引入gulp模块
var gulp = require('gulp');

gulp.task('task1', function() {
  // 这里是任务代码
});

然后执行：gulp task1即可。

实际上，Gulp是一个插件化的工具，配置文件中的各个任务都是通过指定的插件实现的，当需要使用某个插件时需要先安装该插件。
可以在这里搜索指定的Gulp插件。

应用实践

如下示例将实现对静态网站中使用CSS，JavaScript和图片资源进行压缩，并最终打包到指定目录。

在项目根目录下安装对应插件：

# 使用gulp-uglify压缩js
npm install --save-dev gulp-uglify
# 使用gulp-clean-css压缩css
npm install --save-dev gulp-clean-css
# 使用gulp-smushit压缩图片
npm install --save-dev gulp-smushit
# 使用gulp-htmlmin压缩html
npm install --save-dev gulp-htmlmin

在项目根目录下编辑“gulpfile.js”配置文件：

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const cleancss = require('gulp-clean-css');
const smushit = require('gulp-smushit');
const htmlmin = require('gulp-htmlmin')

// 压缩js
gulp.task('minscript', function() {
    return gulp.src('./assets/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./dist/assets/js'));
})

// 压缩css
gulp.task('mincss', function() {
    return gulp.src('./assets/css/*.css')
        .pipe(cleancss())
        .pipe(gulp.dest('./dist/assets/css'));
})

// 压缩html
gulp.task('minhtml', function() {
    return gulp.src('./*.html')
        .pipe(htmlmin({
            removeComments: true, //清除HTML注释
            collapseWhitespace: true, //压缩HTML
            collapseBooleanAttributes: true, //省略布尔属性的值  ==> 
            removeEmptyAttributes: true, //删除所有空格作属性值  ==> 
            removeScriptTypeAttributes: false, //删除