gulp配置代理以gulp添加文件变化任务(十二)

gulp配置代理

gulp配置代理是在webserver()函数的配置对象里面做配置,示例如下:

webserver({
​	proxies:[
​	    {
​	    source: '代理标识符',
​		target:'代理目标地址'
​	    }
    ]

gulpfile.js中完整示例如下:

const webHandler = function () {
  return gulp
    .src('./dist')
    .pipe(webserver({
      host:'localhost', //域名(可以配置自定义域名)
      // host:'www.lj.com', // 自定义域名
      port: '8080', //端口号
      liverload:true, //当文件修改的时候,是否自动刷新页面
      open: './pages/index.html', //默认打开哪一个文件(从dist目录以后的目录开始)
      proxies: [ //配置你所有的代理
        // 每一个代理就是一个对象数据类型
        // 注意:如果你没有代理,不要写空对象
        {
          // 代理标识符
          source: '/dt',
          // 代理目标地址
          target:'https://www.duitang.com/napi/blog/list/by_filter_id/'
        }
      ]
    }))
}

注意:

        1.如果没有代理,不要写空对象

        2.如果要使用代理,那么必须是在gulp-webserver启动的服务器上运行页面

gulp监视

说明:在进行gulp创建监视任务的过程中不需要安装任何插件,并且创建的监视任务不需要return

返回来结束该任务,直接使用gulp.watch(监视路径)来实现即可,示例代码如下:

// 创建一个监控任务
const watchHandler = function () {
  // 使用gulp.watch()
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/sass/*.scss', cssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/pages/*.html', htmlHandler)
  gulp.watch('./src/images/**', imageHandler)
  gulp.watch('./src/videos/**', videoHandler)
  gulp.watch('./src/audios/**', audiosHandler)
  gulp.watch('./src/lib/**/*', libHandler)
  gulp.watch('./src/fonts/**/*', fontsHandler)

}

创建监视任务的目的是在src目录下的文件发生变化后,在页面显示相应的变化,所以需要修改之

前的默认任务,示例如下:

// 添加完毕监控任务以后,修改default默认任务
module.exports.default = gulp.series(
  delHandler,
  gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, videoHandler, audiosHandler, libHandler,fontsHandler),
  webHandler,
  watchHandler
)

逐步配置gulpfile.js文件代码如下:


// 书写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/index.html', //默认打开哪一个文件(从dist目录以后的目录开始)
      proxies: [ //配置你所有的代理
        // 每一个代理就是一个对象数据类型
        // 注意:如果你没有代理,不要写空对象
        {
          // 代理标识符
          source: '/dt',
          // 代理目标地址
          target:'https://www.duitang.com/napi/blog/list/by_filter_id/'
        }
      ]
    }))
}

// 1-12.创建一个监控任务
const watchHandler = function () {
  // 使用gulp.watch()
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/sass/*.scss', cssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/pages/*.html', htmlHandler)
  gulp.watch('./src/images/**', imageHandler)
  gulp.watch('./src/videos/**', videoHandler)
  gulp.watch('./src/audios/**', audiosHandler)
  gulp.watch('./src/lib/**/*', libHandler)
  gulp.watch('./src/fonts/**/*', fontsHandler)

}

// 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
// )

// 添加完毕监控任务以后,修改default任务
module.exports.default = gulp.series(
  delHandler,
  gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, videoHandler, audiosHandler, libHandler,fontsHandler),
  webHandler,
  watchHandler
)

最终完整配置gulpfile.js文件代码如下:


// 书写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/index.html', //默认打开哪一个文件(从dist目录以后的目录开始)
      proxies: [ //配置你所有的代理
        // 每一个代理就是一个对象数据类型
        // 注意:如果你没有代理,不要写空对象
        {
          // 代理标识符
          source: '/dt',
          // 代理目标地址
          target:'https://www.duitang.com/napi/blog/list/by_filter_id/'
        }
      ]
    }))
}

// 1-12.创建一个监控任务
const watchHandler = function () {
  // 使用gulp.watch()
  gulp.watch('./src/css/*.css', cssHandler)
  gulp.watch('./src/sass/*.scss', cssHandler)
  gulp.watch('./src/js/*.js', jsHandler)
  gulp.watch('./src/pages/*.html', htmlHandler)
  gulp.watch('./src/images/**', imageHandler)
  gulp.watch('./src/videos/**', videoHandler)
  gulp.watch('./src/audios/**', audiosHandler)
  gulp.watch('./src/lib/**/*', libHandler)
  gulp.watch('./src/fonts/**/*', fontsHandler)

}

// 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

// 3.添加完毕监控任务以后,修改default默认任务
module.exports.default = gulp.series(
  delHandler,
  gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, videoHandler, audiosHandler, libHandler,fontsHandler),
  webHandler,
  watchHandler
)

注意:在第二部分,导出任务可以根据自己的需要选择是否保留,如果在不同的阶段需要测试各个

功能可以保留,如果不需要可以删除第二部分;另外,在源数据引入这一块必须根据自己的项目结

构进行修改,在源数据引入这一块遵循以下规则:

书写方式:

1 gulp.src('./a/b.html') ===>找到指定文件

2 gulp.src('./a/*.html') ===>找到指定目录下指定后缀的文件

3 gulp.src('./a/**') ==>找到指定目录下的所有文件

4 gulp.src('./a/* * /*') ===>找到a目录下所有子目录里面的所有文件

5 gulp.src('./a/* * /*.html') ===>找到a目录下所有子目录里面的所有.html文件

总述:

以上就是gulp系列的总结,希望对看对次系列的兄弟姐妹们带来一点点帮助,不喜勿喷

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值