使用Gulp压缩静态资源

2022-07-16 23:31:43 阅读：143 来源： 互联网

如果希望对在静态页面中引入的相关资源进行压缩（比如：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://www.cnblogs.com/zlf1914/p/13144381.html gulp压缩html，css，js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

标签：pipe,gulp,静态,压缩,js,Gulp,css
来源： https://www.cnblogs.com/nuccch/p/16485602.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用Gulp压缩静态资源

Gulp是什么

如何使用Gulp

应用实践