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文件
var gulp = require('gulp');
var yasuo=require("gulp-uglify")
var cssUglify=require("gulp-minify-css")
var htmlts=require("gulp-minify-html")
var imgts=require("gulp-imagemin")
//创建压缩js任务
gulp.task('yasuotest',function(cb){
gulp.src("./src/js/*.js")
.pipe(yasuo())
.pipe(gulp.dest("./dist/js"))
cb();
})
//压缩css任务
gulp.task("cssys",function(cb){
gulp.src("./src/css/init.css")
.pipe(cssUglify())
.pipe(gulp.dest("./dist/css"))
cb();
})
//压缩html文件
gulp.task("htmlys",function(cb){
gulp.src("./index.html")
.pipe(htmlts())
.pipe(gulp.dest("./dist"))
cb();
})
//压缩图片
gulp.task("imgys",function(cb){
gulp.src("./src/imgs/*.{png,jpg,gif,ico,jpeg,svg}")
.pipe(imgts({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest("./dist/imgs"))
cb();
})
//压缩默认任务(即gulp直接执行)
gulp.task('default', function(cb) {
// 将你的默认的任务代码放在这
gulp.start(["yasuotest","cssys","htmlys"])
cb();
});