前言
这篇文章没有什么参考性，仅仅是学习过程的记录，请移步至www.gulpjs.com.cn/docs/api/co…官网，对gulp进行学习。
流程图要点概括
配置js文件代码
// function defaultTask(cb) {
// // place code for your default task here
// cb();
// }
// exports.default = defaultTask
const gulp = require('gulp')
const cssmin = require('gulp-cssmin') //压缩css文件
const autoPrefixer = require('gulp-autoprefixer') //css样式自动加前缀
const uglify = require('gulp-uglify') //压缩js文件
const babel = require('gulp-babel') //es6转成es5
const htmlmin = require('gulp-htmlmin') //压缩html文件
const webserver = require(' ') //开启服务器
const cssHandler = () => {
return gulp.src('./src/*.css') //找到文件
.pipe(cssmin()) //把文件流通过pipe方法导入到gulp的插件中，并将经过插件处理后的流进行压缩
.pipe(autoPrefixer())
.pipe(gulp.dest('./dist/css'))//将压缩完毕的文件流输送到dist...生成文件
}
const jsHandler = () => {
return gulp.src('./src/*.js')
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
}
const htmlHandler = () => {
return gulp.src('./src/*.html')
.pipe(htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('./dist/html'))
}
const serverHandler = () => {
// 要把页面在服务器上打开
// 打开的是 dist 目录里面我已经压缩好的页面
return gulp.src('./dist') // 找到我要打开的页面的文件夹, 把这个文件夹当作网站根目录
.pipe(webserver({ // 需要一些配置项
host: 'localhost.sangfor.com.cn', // 域名, 这个域名可以自定义 C:\Windows\System32\drivers\etc 下的hosts文件中进行定义
port: 8080, // 端口号, 0 ~ 65535, 尽量不适用 0 ~ 1023
open: './html/index.html', // 你默认打开的首页, 从 dist 下面的目录开始书写
livereload: true, // 自动刷新浏览器 - 热重启
})) // 开启服务器
}
module.exports.css = cssHandler
module.exports.js = jsHandler
module.exports.html = htmlHandler
// module.exports.default = gulp.parallel(cssHandler, jsHandler, htmlHandler) //同时执行多个任务
// module.exports.default = gulp.series(cssHandler, jsHandler, htmlHandler) //逐步执行多个任务执行多个任务
module.exports.default = gulp.series(gulp.parallel(cssHandler, jsHandler, htmlHandler), serverHandler)
