其他分享
首页 > 其他分享> > （48）Gulp路由

（48）Gulp路由

作者：互联网

一、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页面，这个就是路由。

 

标签：src,const,pipe,48,require,Gulp,html,dist,路由
来源： https://blog.csdn.net/qq_36213140/article/details/122635653