使用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, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: false, //删除<style>和<link>的type="text/css"
            minifyJS: true, //压缩页面JS
            minifyCSS: true //压缩页面CSS
        }))
        .pipe(gulp.dest('./dist'));
})

// 压缩图片
gulp.task('minimg', function () {
    return gulp.src('./assets/img/*.{jpg,png}')
        .pipe(smushit())
        .pipe(gulp.dest('./dist/assets/img'));
});

// 批量复制文件
gulp.task('copy', async function() {
    gulp.src('./assets/fonts/*.*').pipe(gulp.dest('./dist/assets/fonts'));
    gulp.src('./assets/json/*.json').pipe(gulp.dest('./dist/assets/json'));
    gulp.src('./*.{png,ico}').pipe(gulp.dest('./dist'));
})

// 明确指定默认构建操作包含的任务，如果不指定默认构建任务，则需要以参数形式指定任务，如：gulp minscript mincss minhtml copy
module.exports.default = gulp.series(gulp.parallel('minscript','mincss','minhtml','minimg','copy'))

然后在项目根目录下执行：gulp即可完成打包动作，将相应资源打包到项目根目录下的dist目录中。

【参考】

https://blog.csdn.net/qq_43817164/article/details/118107169 Gulp入门

https://zhuanlan.zhihu.com/p/354233622 Gulp 使用gulp压缩JS

https://blog.csdn.net/weixin_45195200/article/details/115323006 Gulp 使用gulp压缩CSS

https://blog.csdn.net/weixin_45195200/article/details/115459128 Gulp 使用gulp压缩图片

https://blog.csdn.net/zhongguohaoshaonian/article/details/53213657 gulp教程之gulp-imagemin压缩图片

https://www.cnblogs.com/zlf1914/p/13144381.html gulp压缩html，css，js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

https://www.jianshu.com/p/657143a3de37 前端工程化-自动化构建工具 Gulp 案例演示

https://blog.csdn.net/Mayflyingdancing/article/details/109215874 gulp-imagemin: Couldn‘t load default plugin