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, // 省略布尔属性的值 =>
  removeEmptyAttributes: true, // 删除所有空格作属性值 =>
  removeScriptTypeAttributes: true, // 删除