gulp 构建html、编译sass、混淆js、压缩图片

gulpfile.js

const gulp = require('gulp')
const sass = require('gulp-sass')
const cssnano = require('gulp-cssnano')
const rename = require('gulp-rename')
const connect = require('gulp-connect')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify-es').default
const imagemin = require('gulp-imagemin')

gulp.task('convertCSS', function () {
  return gulp.src(['src/index.scss'])
    .pipe(sass().on('error', sass.logError))
    .pipe(cssnano({
      autoprefixer: {
        browsers: ['> 1%', 'last 11 versions', 'Firefox >= 20'],
        add: true
      }
    }))
    .pipe(rename(function(path){
        path.extname = '.css'
    }))
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload())
})
gulp.task('convertHTML', () =>  gulp.src(['src/*.html']).pipe(gulp.dest('dist')).pipe(connect.reload()))
// 压缩图片
gulp.task('miniImages', () => gulp.src(['src/images/*']).pipe(imagemin({progressive: true})).pipe(gulp.dest('dist/images')).pipe(connect.reload()))

gulp.task('convertJS', () => {
  return gulp.src(['src/*.js'])
    .pipe(babel({
      presets: [
        ["env", {
          "targets": {
            "browsers": ["> 1%", "last 11 versions", "not ie <= 8"]
          }
        }]
      ]
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload())
})

gulp.task('connect', () => {
  connect.server({
    root: 'dist',
    port: 8081,
    livereload: true
  })
})

gulp.task('auto', function () {
  gulp.watch(['src/*.scss'], ['convertCSS'])
  gulp.watch(['src/*.html'], ['convertHTML'])
  gulp.watch('src/*.js', ['convertJS'])
  gulp.watch('src/images/*.*', ['miniImages'])
})

gulp.task('default', ['convertCSS', 'convertHTML', 'auto', 'connect', 'convertJS', 'miniImages'])