Gulp搭建Angular1笔记

先简单介绍一下项目大概情况，新公司入职后有一个Angular1的老项目，使用gulp构建的，要解决的问题是：1、添加开发环境代理（以前开发很痛苦），2、添加监听自动刷新

解决问题前先看了一下gulp构建项目的大概情况，不是很乐观昂~~~，依赖库、插件版本跨度很大（库、插件版本跨度大的话，非常多的坑，好的插件库升级后写法不兼容），这种坑只能是实打实的踩，没什么好的办法！

先来添加代理，本地我使用的gulp-connect服务，还安装了一个http-proxy-middleware插件来做代理，因为要代理HTTPS协议请求，一开始使用gulp-webserver代理调试了几次没有成功，HTTP的代理通了，最后换了http-proxy-middleware。配置项目如下

//引用服务的
var connect = require('gulp-connect');//服务
var proxy = require('http-proxy-middleware');//代理

gulp.task('webserver', gulp.series('build',function () {
    connect.server({
        root: './build',    // 启动项目根目录
        livereload: true,   // 实时重新加载
        port: 9090,
        https: false,        // 启动项目使用https
        middleware: function(connect, opt) {
              return [
                  proxy('/aaa',  {
                      target: 'https://api.douban.com/v2/book/1220562',
                      pathRewrite: {
                          '^/api/old-path' : '/api/new-path',     // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
                          '^/api/remove/path' : '/path'           // 同上
                      },
                      changeOrigin:true,                            // 默认false，是否需要改变原始主机头为目标URL
                      ws: true,                                     // 是否代理websockets
                  })
              ]
          }
      });
}));

这样配置下来可以代理了，休息一会继续采坑。

接下来配置自动刷新，自动刷新一定是需要gulp.watch的，但是gulp的3版本和4版本写法变化很大，这点大家一定要注意，一开始没有想到时，我在这个问题上来来回回采坑，遇到问题按查阅的资料修改总是报错，非常恼火。

我的watch是这样配置的

gulp.task('watcher', gulp.series(function () {
    gulp.watch(['./src/**'], gulp.series('build'));
}));

//这个 gulp.series('build') 3、4版本写法就不一样，大家注意

gulp.task('images', gulp.series('clean-images', function imagesTask() {
    log('Compressing and copying images');
    return gulp
        .src(config.images)
        .pipe(gulp.dest(config.build + 'images'))
        .pipe(connect.reload());
}));

// .pipe(connect.reload()) 这句的意思就是解析编译好当前的task后，重新load一下connect服务

最后在一个并行执行task的时候又踩了一个深深的坑，也是gulp3、4版本写法不一致导致的

gulp.task('start', gulp.series(gulp.parallel('webserver','watcher')));

好了，今天时间不早了，洗洗睡了.......