- 相关插件
Plugins | gulp.js
GitHub - nfroidure/gulp-minify-css: A Gulp plugin that minifies css with clean-css:
gulp-htmlmin - npm
gulp-imagemin - npm - Gulp 插件实质上是 Node 转换流(Transform Streams),它封装了通过管道(pipeline)转换文件的常见功能,通常是使用
.pipe()
方法并放在src()
和dest()
之间。他们可以更改经过流(stream)的每个文件的文件名、元数据或文件内容。 - 安装
# 压缩CSS文件 npm install --save-dev gulp-minify-css # 压缩HTML文件 npm install --save-dev gulp-htmlmin #图片压缩 npm install --save-dev gulp-imagemin
- 创建压缩Css文件目录dist/css,编写关于压缩css文件的gulpfile.js文件内容
var cssUglify = require("gulp-minify-css"); // 压缩CSS任务 gulp.task("cssuglify",function(cb){ gulp.src("src/css/init.css") .pipe(cssUglify()) .pipe(gulp.dest("dist/css")) cb() })
- 编写关于压缩html文件的gulpfile.js文件内容
var htmlUglify = require("gulp-htmlmin") // 压缩HTML任务 gulp.task("htmlUglify",function(cb){ gulp.src("src/index.html") .pipe(htmlUglify({ collapseWhitespace: true })) .pipe(gulp.dest("dist")) cb() })
- 创建压缩images文件目录dist/images,编写关于压缩css文件的gulpfile.js文件内容
const imageUglify = import('gulp-imagemin'); const imageminOptipng = require( 'imagemin-optipng'); const imageminSvgo = import( 'imagemin-svgo'); const imageminMozjpeg = import( 'imagemin-mozjpeg'); // 压缩image任务 gulp.task("imageUglify",function(cb){ gulp.src("src/images/!*") .pipe(imageUglify([ imageminOptipng({ optimizationLevel: 5 }), imageminSvgo({ plugins: [ { removeViewBox: true }, { cleanupIDs: false } ] }), imageminMozjpeg({ quality: 75, progressive: false }) ])) .pipe(gulp.dest("dist/images")) cb() });
- 执行gulp任务jsuglify,后台生成压缩文件,ending
构建工具 | Gulp压缩css、html、image文件
最新推荐文章于 2024-06-06 09:54:52 发布