一、Gulp路由介绍图
我们前面再demo案例中指定过路由，那么我们可能不太清楚路由的原理是什么？那么接下来呢，我们来详细说明一下。
二、Gulp路由详情解析
URL地址：http://localhost:3000指向dist目标目录
那么我们地址栏访问：http://localhost:3000/index.html，那么实际访问的是dist/index.html
访问http://localhost:3000/node_modules
未指定路由：那么访问的是：dist/node_modules
已指定路由：'/node_modules'：'node_modules'，访问的是项目目录下的node_modules目录。
通过如上图我们看到，再dist目录下，并没有node_modules目录，肯定是访问不到这个目录的，所以我们要指定路由，改成当前项目下的node_modules目录访问，就可以啦！
三、案例demo
需求：访问http://localhost:3000/aaa 指向项目目录下的hello.html
1.再项目中新建一个hello.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello.html</title> </head> <body> <h1>这是Hello.html页面</h1> </body> </html>2.再gulpfile.js文件中指定当前项目下的/aaa路由地址为：hello.html
gulpfile.js文件代码
const {src,dest,parallel,series,watch} = require('gulp') const less = require('gulp-less') const cleancss = require('gulp-clean-css') const rename = require('gulp-rename') const autoprefixer = require('gulp-autoprefixer') const babel = require('gulp-babel') const uglify = require('gulp-uglify') const htmlmin = require('gulp-htmlmin') const imagemin = require('gulp-imagemin') const del = require('del') //导入服务插件 const browserSync = require('browser-sync') //创建服务 const bs = browserSync.create() //声明样式构建任务 const style = () => { //.pipe可以写多个，但是要注意书写顺序哦 滴~ return src('src/styles/*.less',{ base: 'src'}) .pipe(less()) .pipe(autoprefixer()) .pipe(cleancss()) .pipe(rename({ 'extname': '.min.css'})) .pipe(dest('dist')) } //声明脚本构建任务 const script = () => { return src('src/scripts/*.js') .pipe(babel({ presets: ['babel-preset-env'] })) .pipe(uglify()) .pipe(rename({ 'extname': '.min.js'})) .pipe(dest('dist/scripts')) } //声明页面构建任务 const html = () => { return src('./*.html') .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true })) .pipe(dest('dist')) } //声明图片文件构建任务 const image = () => { return src('src/images/**',{ base:'src' }) .pipe(imagemin( [imagemin.mozjpeg({quality: 75, progressive: true})] )) .pipe(dest('dist')) } //声明删除目录和文件构建任务 const clean = () => { return del(['dist']) } //声明服务发布任务 const serve = () => { //watch(被监视的文件，对应的任务) watch('src/*.html',html) watch('src/styles/*.less',style) watch('src/scripts/*.js',script) watch('src/images/**',image) bs.init({ notify: false, //将浏览器右上角的弹窗去除 files: 'dist/**',//监视dist目标文件下的变化，然后再浏览器上实时更新 server: { baseDir: './dist', //指定服务启动的目录 routes: {//路由：所谓路由就是一个跳转地址 '/node_modules': 'node_modules', '/aaa':'hello.html' } } }) } //任务组合写法，并行（一起执行） const bulid = parallel(style,script,html,image) //任务组合写法，串行（一个接一个的执行） const dev = series(clean,bulid,serve) //导出 module.exports = { bulid, dev }3.输入执行命令：gulp 任务名
4.再浏览器中输入访问地址，加入/aaa，我们可以发现帮我们指定到了hello.html页面，这个就是路由。