如何使用gulp启动node服务器
利用gulp启动一个服务器
-
gulp是基于node环境的工具
-
node是可以做服务器的语言
-
gulp可以启动一个基于node的服务器
启动服务器,用哪个目录当做服务器
-
dist目录,是我们的结果目录
-
如果你使用src目录当做根目录,sass文件怎么办
-
启动服务器的时候,启动dist目录里面对应的html文件
启动服务的插件:gulp-webserver
-
作用:启动一个基于node书写的服务器
-
下载: npm i gulp-webserver -D
-
在gulpfile.js中导入: const webserver = require('gulp-webserver')
-
导入以后得到一个处理流文件的函数
-
我们在管道函数内调用就可以,需要传递参数
服务器配置代码如下:
// 书写gulp配置文件
// 0. 导入第三方
// 0-1.导入gulp
const gulp = require('gulp')
// 0-2.导入gulp-cssmin
const cssmin = require('gulp-cssmin')
// 0-3.导入gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 0-4.导入gulp-sass
const sass = require ( 'gulp-sass' ) ( require ( 'sass' ) )
// 0-5.导入gulp-uglify
const uglify = require('gulp-uglify')
// 0-6.导入es6转es5的插件gulp-babel
const babel = require('gulp-babel')
// 0-7.导入gulp-htmlmin
const htmlmin = require('gulp-htmlmin')
// 0-8.导入del
const del = require('del')
// 0-9.导入gulp-webserver
const webserver = require('gulp-webserver')
// 1.创建任务
// 1-1.创建爱你一个打包css的任务
const cssHandler = function () {
return gulp
.src('./src/css/*.css') //1.找到内容
.pipe(autoPrefixer()) // 2.自动添加前缀
.pipe(cssmin()) // 3.压缩
.pipe(gulp.dest('./dist/css/')) //4.放到指定目录
}
// 1-2 创建一个打包sass文件的任务
const sassHandler = async function () {
return await gulp
.src('./src/sass/*.scss') //1.找到内容
.pipe(sass()) // 2.转换scss
.pipe(autoPrefixer()) // 3.自动添加前缀
.pipe(cssmin()) // 4.压缩
.pipe(gulp.dest('./dist/sass/')) //5.放到指定目录
}
// 1-3 创建一个js打包任务
const jsHandler = function () {
return gulp
.src('./src/js/*.js') //找到内容
.pipe(babel({
// gulp-babel@7写法:presets:['es2015]
presets:['@babel/env']
})) // es6转es5
.pipe(uglify()) // 压缩
.pipe(gulp.dest('./dist/js/')) //放到指定目录
}
// 1-4创建一个html打包任务
const htmlHandler = function () {
return gulp
.src('./src/pages/*.html')
.pipe(htmlmin({ // 通过配置的参数进行压缩
collapseWhitespace:true, //移出空格
removeEmptyAttributes:true, //表示移出空的属性(仅限于原生属性)
collapseBooleanAttributes:true, // 移出布尔值属性
removeAttributeQuotes:true, // 移出属性上的双引号
minifyCSS:true, //压缩内嵌式css代码(只能基本压缩,不能添加前缀)
minifyJS:true, // 压缩内嵌式js代码(只能基本压缩,不能进行转码)
removeStyleLinkTypeAttributes:true,//移出style和link标签上的type属性
removeScriptTypeAttributes:true, // 移出script标签上默认的type属性
}))
.pipe(gulp.dest('./dist/pages/'))
}
// 1-5.创建一个image打包任务
const imageHandler = function () {
return gulp
.src('./src/images/**') // 找到images下所有文件
.pipe(gulp.dest('./dist/images/')) //放到指定目录
}
// 1-6.创建一个videos打包任务
const videoHandler = function () {
return gulp
.src('./src/videos/**') // 找到videos下所有文件
.pipe(gulp.dest('./dist/videos')) //放到指定目录
}
// 1-7.创建一个audios打包任务
const audiosHandler = function () {
return gulp
.src('./src/audios/**') // 找到audios下所有文件
.pipe(gulp.dest('./dist/audios/')) //放到指定目录
}
// 1-8.创建一个lib打包任务
const libHandler = function () {
return gulp
.src('./src/lib/**/*') //找到lib目录下所有子目录里面的所有文件
.pipe(gulp.dest('./dist/lib/')) //放到指定目录
}
// 1-9.创建一个fonts打包任务
const fontsHandler = function () {
return gulp
.src('./src/fonts/**/*') //找到fonts目录下所有子目录里面的所有文件
.pipe(gulp.dest('./dist/fonts/')) //放到指定目录
}
// 1-10.创建一个删除dist目录的任务
const delHandler = function () {
// del直接执行就可以了,不需要流
// 参数以数组的形式传入你要删除的文件夹
return del(['./dist/'])
}
// 1-11.创建一个启动服务器的任务
const webHandler = function () {
return gulp
.src('./dist')
.pipe(webserver({
// host:'localhost', //域名(可以配置自定义域名)
host:'www.lj.com', // 自定义域名
port: '8080', //端口号
liverload:true, //当文件修改的时候,是否自动刷新页面
open: './pages/login.html', //默认打开哪一个文件(从dist目录以后的目录开始)
}))
}
// 2.导出任务
// 2-1.导出打包的css的任务
module.exports.cssHandler = cssHandler
// 2-2.导出打包的sass任务
module.exports.sassHandler = sassHandler
// 2-3.导出打包的js任务
module.exports.jsHandler = jsHandler
// 2-4.导出打包的html任务
module.exports.htmlHandler = htmlHandler
// 2-5.导出打包的image任务
module.exports.imageHandler = imageHandler
// 2-6.导出打包的videos任务
module.exports.videoHandler = videoHandler
// 2-7.导出打包的audios任务
module.exports.audiosHandler = audiosHandler
// 2-8.导出打包lib任务
module.exports.libHandler = libHandler
// 2-9.导出打包fonts任务
module.exports.fontsHandler = fontsHandler
// 2-10.导出删除dist目录的任务
module.exports.delHandler = delHandler
// 创建一个默认任务
// module.exports.default = gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, videoHandler, audiosHandler, libHandler,fontsHandler)
// 添加删除dist目录的任务,修改default任务
// module.exports.default = gulp.series(
// delHandler,
// gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, videoHandler, audiosHandler, libHandler,fontsHandler)
// )
// 添加完毕服务器任务以后,修改default任务
module.exports.default = gulp.series(
delHandler,
gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, videoHandler, audiosHandler, libHandler,fontsHandler),
webHandler
)
注意:在管道函数中调用webserver()函数时需要传递参数,具体的参数说明如下:
// 导入gulp-webserver
const webserver = require('gulp-webserver')
/ 创建一个启动服务器的任务
const webHandler = function () {
return gulp
.src('./dist')
.pipe(webserver({
// host:'localhost', //域名(可以配置自定义域名)
host:'www.lj.com', // 自定义域名
port: '8080', //端口号
liverload:true, //当文件修改的时候,是否自动刷新页面
open: './pages/login.html', //默认打开哪一个文件(从dist目录以后的目录开始)
}))
}
补充说明:
在src目录下修改文件内容之后自动刷新为什么起作用
-
因为你启动的服务器是dist目录
-
你修改的是src目录下得内容
-
你还需要一个任务,当src目录下的内容修改的时候,自动重新打包一遍该文件
-
导致dist目录下的文件修改,dist目录下得文件修改就会自动刷新页面
如何配置自定义域名:
-
1.webserver位置的host字段书写一个自己定义好的域名(如:www.lj.com)
-
2.找到电脑的hosts文件
c:/windows/system32/dirvers/etc/hosts
添加一行内容127.0.0.1 www.lj.com
重新执行gulp命令即可