首页 > 其他分享> 文章详细

（48）Gulp路由

2022-01-22 13:03:27 阅读：193 来源： 互联网

标签：src const pipe 48 require Gulp html dist 路由

一、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9