gulp项目实战

项目目录结构

image.png

项目功能有:压缩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();

image.png image.png image.png image.png image.png image.png image.png

源代码
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)
  })