一个完整的gulp例子（含注释）亲测可用

Posted 2020-10-08

// 1.引入gulp 获取 gulp
const gulp = require(‘gulp‘)

// 2.引入gulp需要用的各个类型插件
const less = require(‘gulp-less‘)
const csso = require(‘gulp-csso‘) //这个插件作用是压缩css的
const uglify = require(‘gulp-uglify‘)
const htmlmin = require(‘gulp-htmlmin‘)
const imagemin = require(‘gulp-imagemin‘)
const sass =require(‘gulp-sass‘)

// 3.定义任务

//3.0 没有less sass 处理css
gulp.task(‘style‘, function(){
gulp.src([‘./css/*.*‘]) // 匹配到指定的css文件*代表所有
.pipe(csso()) //把转化的css压缩 不写不压缩
.pipe(gulp.dest(‘./dist/css‘)) //把这些操作过的文件放到哪个文件夹

})

// 3.1 处理less
//gulp.task(‘style‘, function(){
//gulp.src([‘./less/*.*‘]) // 匹配到指定的less文件*代表所有
// .pipe(less()) // 将less转换为css
// .pipe(csso()) //把转化的css压缩 不写不压缩
//.pipe(gulp.dest(‘./dist/css‘)) //把这些操作过的文件放到哪个文件夹

// })

// 3.1处理sass
//gulp.task(‘sass‘, function(){
// gulp.src([‘./sass/*.*‘]) // 匹配到指定的less文件*代表所有
// .pipe(sass()) // 将sasss转换为css
// .pipe(csso()) //把转化的css压缩 不写不压缩
// .pipe(gulp.dest(‘./dist/css‘)) //把这些操作过的文件放到哪个文件夹

// })

// 3.2 处理js
gulp.task(‘script‘, function(){
gulp.src([‘./js/*.js‘]) // 匹配到指定的less文件 *代表所有
.pipe(uglify()) //压缩 获取到的js 不写不压缩
.pipe(gulp.dest(‘./dist/js‘)) //把这些操作过的文件放到哪个文件夹
})

// 3.3 处理html 因为html文件内可能有js可能有css所以需要条件
gulp.task(‘html‘, function(){
//html可能不都是在一个目录用数组就可以写多个路径
gulp.src([‘./*.html‘])
.pipe(htmlmin({ //压缩 获取到的html
collapseWhitespace:true, // 如下
minifyCSS: true, // 如下
minifyJS: true // 如下
}))
.pipe(gulp.dest(‘./dist‘)) //输出到哪个文件夹
})

//3.4 处理图片
gulp.task(‘images‘, function () {
// 1. 找到图片
gulp.src([‘./images/*.*‘])
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest(‘./dist/images‘))
});

// 如果这个任务名不是`default`,则执行该任务时，需要在cmd中输入:
//`gulp +你定义的名字` 或者你要是嫌麻烦干脆把名字像下边是的就写default

gulp.task(‘default‘, function(){
// watch是用来监视文件的变化，然后当文件变化时，执行指定的任务
// 第一个参数是要监视的文件
// **/*.* 表示 任意目录下的任意文件 **表示任意文件夹
// 第二个参数是要执行的任务
gulp.watch(‘./**/*.*‘,[‘html‘,‘script‘,‘style‘,‘images‘])
})

// html压缩常用方法：

//collapseWhitespace: true, //压缩html
// collapseBooleanAttributes: true, //省略布尔属性的值
// removeComments: true, //清除html注释
// removeEmptyAttributes: true, //删除所有空格作为属性值
// removeScriptTypeAttributes: true, //删除type=text/javascript
// removeStyleLinkTypeAttributes: true, //删除type=text/css
// minifyJS:true, //压缩页面js
// minifyCSS:true //压缩页面css