项目目录结构
项目功能有:压缩js,css,html,图片,监听和同步到浏览器
const gulp = require('gulp');
const pump = require('pump');
const sequence = require('run-sequence');
const clean = require('gulp-clean')
const rename = require('gulp-rename')
const changed = require('gulp-changed')
const sourcemaps = require('gulp-sourcemaps')
const uglify = require('gulp-uglify')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const minifyCss = require('gulp-clean-css')
const less = require('gulp-less')
const htmlmin = require('gulp-htmlmin')
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const browserSync = require('browser-sync').create();
源代码
const gulp = require('gulp');
const pump = require('pump');
const sequence = require('run-sequence');
const clean = require('gulp-clean')
const rename = require('gulp-rename')
const changed = require('gulp-changed')
const sourcemaps = require('gulp-sourcemaps')
const uglify = require('gulp-uglify')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const minifyCss = require('gulp-clean-css')
const less = require('gulp-less')
const htmlmin = require('gulp-htmlmin')
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const browserSync = require('browser-sync').create();
/*
- 清理目标目录
- */
gulp.task('clean',(cb)=>{
return pump([
gulp.src('./build'),
clean()
],cb)
})
/*
- 执行js压缩
-
/
gulp.task('minify_js',[],(cb)=>{
return pump([
// 获取原目录下所有的js文件
gulp.src('src/js//.js'),
// 执行更改名操作
rename({suffix:'.min'}),
// 每次打包时，只打包内容发生改变的文件
changed('./build/js',{extension:'.js'}),
// 生成sourcemap，需要配合后面的sourcemaps.write()
sourcemaps.init(),
// 执行js压缩
uglify(),
// 生成sourcemap
sourcemaps.write(),
// 输出至目标目录
gulp.dest('./build/js')
],cb)
})
/*
- 执行css压缩
-
/
gulp.task('minify_css',[],(cb)=>{
return pump([
// 或者原目录下所有的less文件
gulp.src('src//.less'),
// 执行更名操作
rename({suffix:'.min'}),
// 每次打包时，只打包内容发生改变的文件
changed('./build/less', { extension:'.css' }),
// 生成sourcemap，需要配合后面的sourcemaps.write()
sourcemaps.init(),
// 执行less编译
less(),
// 针对浏览器生成不同的CSS前缀
postcss([autoprefixer({
browsers:['last 2 versions'],
cascade:true // 是否美化属性值
})]),
// 执行css压缩
minifyCss({
keepSpecialComments:'*'
}),
// 生成sourcemap
sourcemaps.write('.'),
// 输出至目标目录
gulp.dest('build/css')
])
})
/*
- 执行html压缩
-
/
gulp.task('minifyhtml',[],()=>{
return pump([
// 获取原目录下所有的html文件
gulp.src('./src//.html'),
// 每次打包时，只打包内容发生改变的文件
changed('./build/html',{extension:'.html'}),
// 执行html压缩
htmlmin({
removeComments: true, // 清除HTML注释
collapseWhitespace: true, // 压缩空格
collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> => <input checked>
removeEmptyAttributes: true, // 删除所有空格作属性值 <input id=""> => <input>
removeScriptTypeAttributes: true, // 删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,// 删除<style>和<link>的type="text/css"
minifyJS: true, // 压缩页面JS
minifyCSS: true // 压缩页面CSS
}),
gulp.dest('build/html')
])
})
/*
- 执行压缩图片
- 压缩图片还有一个插件gulp-smushit，压缩效果比gulp-imagemin好，但是只能压缩jpg和png格式，建议使用
-
/
gulp.task('minnify_image',[],()=>{
return pump([
// 获取原目录下所有的图片文件
gulp.src('./src/images/.{png,jpg,gif,ico,jpeg}'),
imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
svgoPlugins: [{removeViewBox: false}], //不要移除svg的viewbox属性
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}),
gulp.dest('./build/images')
])
})
/*
- 项目整体自动化打包并同步浏览器
-
/
gulp.task('browserSync',[],()=>{
browserSync.init([
'src//.*'
],{
server:{
baseDir:'./build'
}
})
})
/*
- 监听文件变改，及时调用任务执行增量打包
-
/
gulp.task('watch',['browserSync'],(cb)=>{
gulp.watch('./src/js/.js',['minify_js'])
gulp.watch('./src/less/.less',['minify_css'])
gulp.watch('./src/html/.html',['minifyhtml'])
gulp.watch('./src/images/*.{png,jpg,gif,ico,jpeg}',['minnify_image'])
})
/*
- 安排执行顺序
- */
gulp.task('default',(cb)=>{
sequence('clean',['minifyhtml','minify_css','minify_js','minnify_image'],'watch',cb)
})
