简单的gulp构建实例+代理服务器

Posted 2021-04-08 前端开发自留地

只是一个参考，老鸟可绕过~~~~~~~~~

一、下载安装node，强烈建议。

二、新建项目目录如下，web是项目文件夹：

三、 web项目目录下新建package.json文件，代码如下：

{
  "name": "wap",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp",
    "watch": "gulp watch",
    "build": "gulp build",
    "clean": "gulp clean",
    "cleanModule": "gulp cleanModule"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-clean-css": "^3.9.3",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.5.0",
    "gulp-if": "^2.0.2",
    "gulp-load-plugins": "^1.5.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^4.0.1",
    "gulp-tinypng-unlimited": "^1.0.3",
    "gulp-uglify": "^3.0.0",
    "http-proxy-middleware": "^0.18.0",
    "run-sequence": "^2.2.1"
  }
}

三、web项目目录下运行

npm i

安装所有依赖包

四、web项目目录下新建gulpfile.js文件，代码如下：

const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
const runSequence = require('run-sequence');
const del = require('del');
const proxy = require('http-proxy-middleware');

// 编译Sass
gulp.task('sass',()=>{
    return gulp.src('src/sass/*.scss')
        .pipe($.sass())
        .pipe($.autoprefixer())
    .pipe( $.if(process.env.production !== undefined, $.cleanCss()) )
        .pipe(gulp.dest('build/css'))
        .pipe($.connect.reload());
});



gulp.task('script', ()=> {
    return gulp.src( 'src/js/*.js' )
        .pipe($.babel({
            presets: ['es2015']
        }))
        .pipe( $.if(process.env.production !== undefined, $.uglify()) )
        .pipe(gulp.dest('build/js'))
        .pipe($.connect.reload());
});



gulp.task('html', () => {
  return gulp.src('src/*.html')
  // 自行扩展其它包，例如swig模版、md5版本号等等
        .pipe(gulp.dest('build'))
        .pipe($.connect.reload());
});

gulp.task('image', () => {
  return gulp.src('src/images/*.*')
       // 自行扩展其它包，例如图片压缩等 .pipe($.if(process.env.production !== undefined, $.tinypngUnlimited()))//注意多个连字符插件引用是要转换为驼峰
        .pipe(gulp.dest('build/images'))
        .pipe($.connect.reload());
});

gulp.task('temp', () => {
  return gulp.src('src/temp/**/*.*')
      // 自行扩展其它包，例如图片压缩等 .pipe($.if(process.env.production !== undefined, $.tinypngUnlimited()))//注意多个连字符插件引用是要转换为驼峰
        .pipe(gulp.dest('build/temp'))
        .pipe($.connect.reload());
});


gulp.task('server', () => {
  $.connect.server({
    root: 'build',
    host: '0.0.0.0',
    port: 8080,
        livereload: true
  });
});

gulp.task('watch',['server'],function() {
    gulp.watch('src/*.html', ['html']);
    gulp.watch('src/sass/*.scss', ['sass']);
    gulp.watch('src/images/*.*', ['image']);
    gulp.watch('src/temp/*.*', ['temp']);
  gulp.watch('src/js/*.js', ['script']);
});

gulp.task('default',()=>{
    runSequence(['sass','html','image','temp','script'],'watch');
});

gulp.task('clean', callback => {
  del('build').then(paths => callback());
})

gulp.task('build',['clean'],function(callback){
  process.env.production = true;
  runSequence(['sass','html','image','temp','script']);
});

gulp.task('cleanModule', callback => {
  del('node_modules').then(paths => callback());
});

代码还可以优化的余地，请自行修改。

五、web项目目录下可运行任务有

gulp、gulp watch、gulp build、gulp clean、gulp cleanModule任务，自行体验。

六、相关包说明

• gulp-connect运行Web服务器自带浏览器自动刷新

gulp.task('server', () => {
  $.connect.server({
    root: 'build',//以哪个文件夹作为服务器根目录
    host: '0.0.0.0',
    port: 8080,//端口号
        livereload: true
  });
});

强烈建议前往https://www.npmjs.com/package/gulp-connect细看

• http-proxy-middleware代理中间件

  gulp.task('server', () => {
    $.connect.server({
      root: 'build',//以哪个文件夹作为服务器根目录
      host: '0.0.0.0',
      port: 8080,//端口号
          livereload: true,
          middleware: function(connect, opt) {
              return [
                  proxy('/activity',{//匹配ajax请求路径中以/activity开头的所有请求，都会以代理域访问
                      target: 'http://test.mapp.cn',//代理域名或IP
                      changeOrigin:true
                  })
              ]
          }
    });
  });

  强烈建议前往https://www.npmjs.com/package/http-proxy-middleware细看