gulp 压缩打包css、html和图片

你的名字 2021-07-24 23:30 619阅读 0赞

1、压缩打包css文件
    
    		(1)cnpm install -D gulp-minify-css
    
    		(2)在gulpfile.js文件中引入
    			var css自定义压缩名=require("gulp-minify-css")
    
    		(3)创建任务
    
    			gulp.task('自定义任务名',function(cb)
    			{
    				gulp.src("要压缩文件的路径")
    				.pipe(css自定义压缩插件名())
    				.pipe(gulp.dest("压缩文件的去处"))
    				cb();
    			})
    				压缩打包多个css文件，参考压缩js路径设置
    
    		(4)执行
    			gulp 自定义任务名
    			
    
    	2、压缩打包html文件
    
    		(1)cnpm install -D gulp-minify-html
    
    		(2)在gulpfile.js文件中引入
    			var html自定义压缩名=require("gulp-minify-html")
    
    		(3)创建任务
    
    			gulp.task('自定义任务名',function(cb)
    			{
    				gulp.src("要压缩文件的路径")
    				.pipe(html自定义压缩插件名())
    				.pipe(gulp.dest("压缩文件的去处"))
    				cb();
    			})
    				压缩打包多个html文件，参考压缩js路径设置
    
    		(4)执行
    			gulp 自定义任务名
    
    
    	3、图片的压缩打包
    
    		(1)cnpm install -D gulp-imagemin
    
    		(2)在gulpfile.js文件中引入
    			var img自定义压缩名=require("gulp-imagemin")
    
    		(3)创建任务
    
    			gulp.task('自定义任务名',function(cb)
    			{
    				gulp.src("要压缩图片的文件夹路径/*.{png,jpg,gif,ico,jpeg,svg}")
    				.pipe(img自定义压缩插件名({
    				
    						optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
    				        progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
    				        interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
    				        multipass: true       //类型：Boolean 默认：false 多次优化svg直到完全优化
    				}))
    				.pipe(gulp.dest("压缩文件的去处"))
    				cb();
    			})
    				压缩打包多个img文件，参考压缩js路径设置
    
    		(4)执行
    			gulp 自定义任务名

代码示例:

gulpfile.js文件