gulpfile配置文件 | 易学教程

//新版gulp都是异步每个任务都要return
//gulp可以定义一个默认任务。涉及导出暴露任务（任务包括两大类私有和公有）
//执行任务两种方式 series串行任务 parallel并行任务可以嵌入需要导入

//commonjs dest目标 series串行任务 parallel并行任务 watch 监听事件（这边改，那边就改）
// commonjs
const path = require(‘path’) //引入path node自带方法不用安装
const { src, watch, dest, series, parallel } = require(‘gulp’)//解构赋值把要用的方法解构出来单独使用安装gulp / npm i gulp
const connect = require(‘gulp-connect’)//引入方法安装gulp-connect / npm i gulp-connect --save-dev /gulp插件运行web服务器
const sass = require(‘gulp-sass’)//引入方法安装gulp-sass node-sass /npm i gulp-sass node-sass --save-dev /编译sass
const webpack = require(‘webpack-stream’)//引入方法安装webpack-stream /npm i webpack-stream --save-dev /打包？？？？？？？？

// copyhtml
function copyhtml() {
return src(’./src/*.html’)//被复制的文件路径
.pipe(dest(’./dev/’))//复制文件到，dev文件夹没有会自动创建
.pipe(connect.reload())//重新连接服务器理解为实时刷新
}

//copylibs
function copylibs() {
return src(’./src/libs/**/*’)//被复制的文件路径
.pipe(dest(’./dev/libs’))//复制文件到，文件夹没有会自动创建
// .pipe(connect.reload())
}

//copyassets
function copylibs() {
return src(’./src/assets/**/*’)//被复制的文件路径
.pipe(dest(’./dev/assets’))//复制文件到，文件夹没有会自动创建
// .pipe(connect.reload())
}

// 编译sass
function packSCSS() {
return src(’./src/styles/**/*.scss’)//被复制的文件路径
.pipe(sass().on(‘error’, sass.logError))//
.pipe(dest(’./dev/styles/’))//复制文件到，文件夹没有会自动创建
.pipe(connect.reload())//重新连接服务器理解为实时刷新
}

//js模块化
function packJS() {
return src(’./src/scripts/app.js’)//
.pipe(webpack({
mode: ‘development’,//
entry: ‘./src/scripts/app.js’,//入口，写死，只有这一个
output: {//出口
path: path.resolve(__dirname, ‘./dev’),//在node环境里代表所在物理路径这句是解析的作用绝对路径 __dirname解析目录
filename: ‘app.js’//文件名
},
module: {//模块组成
rules: [//规则
{
test: /.html $KaTeX parse error: Expected 'EOF', got '}' at position 49: …r'//载入程序：字符串载入 }̲, { test: /\.ar…$ /,//.art文件
loader: ‘art-template-loader’//载入程序：模板载入
}

]
}
}))
.pipe(dest(’./dev/scripts’))//复制文件到，文件夹没有会自动创建
.pipe(connect.reload())//重新连接服务器理解为实时刷新
}

// 启动server
function gulpServer() {
return connect.server({
name: ‘Dist App’,
root: ‘./dev’,
port: 8000, //端口号
livereload: true
})
}

//watch
function watchFiles() {
watch(’./src/.html’, series(copyhtml))//监听所有.html文件变化，触发copyhtml任务
watch(’./src/**/’, series(packJS))//监听所有.js文件变化，触发copyJS任务
watch(’./src/**/.scss’, series(packSCSS))//监听所有.scss文件变化，触发copySCSS任务
watch(’./src/libs/’, series(copylibs))//监听libs所有文件变化，触发copylibs任务
}

exports.default = series(parallel(copyhtml, copylibs, packSCSS, packJS), parallel(gulpServer, watchFiles))//执行

来源：CSDN

作者：Seanibo

链接：https://blog.csdn.net/xz_xysq/article/details/104468464

标签

gulp

dev