gulp搭建项目小试

gulp最新版

const {src, dest, watch, series, parallel} = require('gulp')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const del = require('delete')
const less = require('gulp-less')
const imagemin = require('gulp-imagemin')
const htmlmin = require('gulp-htmlmin')

function clean (cb) {
  del(['dist/'], cb)
}

function html () {
  return src('src/*.html')
  .pipe(htmlmin({
    collapseWhitespace: true, //压缩HTML
    collapseBooleanAttributes: true, //省略布尔属性的值
    removeComments: true, //清除html注释
    removeEmptyAttributes: true, //删除所有空格做属性的值
    removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
    minifyJS: true,   //压缩页面JS
    minifyCSS: true    //压缩页面CSS
  }))
  .pipe(dest('dist/'))
}

function css () {
  return src('src/css/*.less')
  .pipe(less())
  .pipe(dest('dist/css/'))
}

function javascript () {
  return src('src/js/*.js')
  .pipe(babel({ presets: ['@babel/env'] })) // ES6转ES5
  .pipe(uglify())
  .pipe(rename({ extname: '.min.js' })) // 改变文件拓展名
  .pipe(dest('dist/js/'))
}

function image () {
  return src('src/image/**.*')
  .pipe(imagemin())
  .pipe(dest('dist/image/'))
}

watch('src/*.html', html)
watch('src/**/*.less', css)
// 监听除了src/js/index.js的其他src下所有js文件，如果有变化就执行javascript函数
watch(['src/**/*.js', '!src/js/index.js'], javascript)

// series(a, b)  表示队列执行函数，a函数先执行，b函数后执行，排队执行
// parallel(a, b) 表示同步执行，a,b函数一起执行
exports.default = series(clean, parallel(html, css, javascript, image))