gulpfile.js(gulp 4.0.2)

const gulp = require('gulp')

const cssmin = require('gulp-cssmin')

const autoPrefixer = require('gulp-autoprefixer')

const sass = require('gulp-sass')

const uglify = require('gulp-uglify')

const htmlmin = require('gulp-htmlmin')

const tinypngFree = require('gulp-tinypng-free');

const del = require('del')

const webserver = require('gulp-webserver')

const fileinclude = require('gulp-file-include');

const cssHandler = function() {
  return gulp
    .src('./src/css/*.css')
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css/'))
}

const scssHandler = function() {
  return gulp
    .src('./src/css/*.scss')
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(cssmin())
    .pipe(gulp.dest('./dist/css/'))
}

const jsHandler = function() {
  return gulp
    .src('./src/js/test.js')
    .pipe(uglify({mangle:{toplevel:true}}))
    .pipe(gulp.dest('./dist/js/'))
}

const htmlHandler = function() {
  return gulp
    .src('./src/*.html')
    .pipe(fileinclude({
      prefix: '@@'
    }))
    .pipe(htmlmin({
      removeAttributeQuotes: true
    }))
    .pipe(gulp.dest('./dist/'))
}

const imgHandler = function() {
  return gulp
    .src('./src/imgs/*.?(png|jpg|jpeg|gif)')
    // .src('./src/imgs/*.png')
    .pipe(tinypngFree({}))
    .pipe(gulp.dest('./dist/imgs/'))
}

const imgCopyHandler = function() {
  return gulp
    .src('./src/imgs/*.?(png|jpg|jpeg|gif)')
    .pipe(gulp.dest('./dist/imgs/'))
}

const delHandler = function() {
  return del(['./dist/'])
}

const webHandler = function() {
  return gulp
    .src('./dist')
    .pipe(webserver({
      host: '127.0.0.1',
      port: 8080,
      livereload: true,
      open: './index.html'
    }))
}

const watchHandler = function() {
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/css/*.scss', scssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/imgs/*.?(png|jpg|jpeg|gif)', imgCopyHandler)
  gulp.watch('./src/*.html', htmlHandler)
}

module.exports.cssHandler = cssHandler
module.exports.scssHandler = scssHandler
module.exports.jsHandler = jsHandler
module.exports.htmlHandler = htmlHandler
module.exports.imgHandler = imgHandler
module.exports.delHandler = delHandler

const devOperation = gulp.parallel(cssHandler, scssHandler, jsHandler, htmlHandler, imgCopyHandler)
const buildOperation = gulp.parallel(cssHandler, scssHandler, jsHandler, htmlHandler, imgHandler)

module.exports.dev = gulp.series(
  devOperation,
  webHandler,
  watchHandler
)

module.exports.build = gulp.series(
  delHandler,
  buildOperation
)

package.json

{
  "name": "demo01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-file-include": "^2.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-sass": "^4.1.0",
    "gulp-tinypng-free": "^1.0.13",
    "gulp-uglify": "^3.0.2",
    "gulp-webserver": "^0.9.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "gulp dev",
    "build": "gulp build"
  },
  "browserslist": {
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "author": "",
  "license": "ISC"
}