Gulp 学习记录

对传统 HTML CSS JS 文件进行代码压缩处理

const {
  src,
  dest,
  series,
  symlink
} = require('gulp')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const cssmin = require('gulp-cssmin')
const htmlmin = require('gulp-htmlmin')

// 需要忽略的文件
const IgnoreFile = [
  './source/area.js',
  './source/septnetSDK.js',
  './source/article.html'
]

// 需要忽略的文件夹 (注: 只能忽略一级目录)
const IgnoreDic = [
  './source/pdfviewer',
  './source/assets',
  './source/groupon',
  './source/invite',
  './source/material',
  './source/newarticle',
  './source/report'
]

function getBuildFilePath(type) {
  // 统一管理待打包的目录地址, 过滤掉需要忽略的文件和文件夹
  var files = [('./source/**/*.' + type)]
  // 根据后缀名 忽略对应文件
  IgnoreFile.forEach(function(file, index) {
    if (file.indexOf('.' + type) !== 0) files.push('!' + file)
  })
  // 忽略文件夹
  IgnoreDic.forEach(function(file, index) {
    files.push('!' + file + '/**')
  })
  return files
}

function getOutPutPath() {
  // 统一管理输入目录
  return './result/'
}

function buildJS() {
  // 压缩JS代码
  return src(getBuildFilePath('js'))
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest(getOutPutPath()))
}

function buildIgnoreFileAndDic() {
  // 转移忽略的文件和文件夹
  return src(IgnoreFile.concat(IgnoreDic)).pipe(symlink(getOutPutPath()))
}

function buildCSS() {
  // 压缩CSS代码
  return src(getBuildFilePath('css'))
    .pipe(cssmin())
    .pipe(dest(getOutPutPath()))
}

function buildHTML() {
  // 压缩HTML代码
  return src(getBuildFilePath('html'))
    .pipe(htmlmin({
      collapseWhitespace: true
    }))
    .pipe(dest(getOutPutPath()))
}

function buildImage() {
  // 打包图片(并不压缩, 直接转移)
  return src(getBuildFilePath('{png,jpg,gif,ico,jpeg,avg}'))
    .pipe(dest(getOutPutPath()))
}


exports.default = series(buildJS, buildCSS, buildHTML, buildImage, buildIgnoreFileAndDic)