gulp使用起步(实现开源框架flowable代码前后端分离并且运行前端代码)

最新推荐文章于 2024-05-11 16:59:08 发布

weixin_46276411

最新推荐文章于 2024-05-11 16:59:08 发布

阅读量322

点赞数

分类专栏： angular 文章标签： npm gulp

本文链接：https://blog.csdn.net/weixin_46276411/article/details/121016818

版权

angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考官网gulp使用链接

第一步：下载folwable全部代码，找到前端项目目录，然后他前端代码分离到一个新的文件夹中

// 源码前端目录
D:\code\flowable-engine\modules\flowable-ui\flowable-ui-modeler-frontend\src\main\resources\static\modeler

分离后前端目录
在这里插入图片描述

flowable文件夹下目录
在这里插入图片描述

第二步：在flowable同级目录下创建gulpfile.js文件，创建config文件夹，文件夹中创建index.js文件;

index文件内容：

module.exports = {
  dev: {
  // 你的地址
    api: ""

  },
  prod: {
    api: '$BPM_MGR_URL',
  },
};

gulpfile.js内容

const gulp = require("gulp");
var preprocess = require("gulp-preprocess");
var connect = require("gulp-connect");
// 构建环境变量
const config = require("./config");
const url = process.env.NODE_ENV === "production" ? config.prod : config.dev;
// 修改环境变量
gulp.task("envConfig", function () {
  return gulp
    .src("./flowable/**/url-config.js")
    .pipe(
      preprocess({
        context: { apiUrl: url.api },
      })
    )
    .pipe(gulp.dest("dist"));
});
// 本地服务器
gulp.task("connectDev", function () {
  return connect.server({
    name: "test",
    root: "dist",
    host:'0.0.0.0',
    port: "8081",
    livereload: true,
  });
});

// 处理所有资源
gulp.task("static", function () {
  return gulp
    .src(["./flowable/**/*"])
    .pipe(gulp.dest("dist"))
    .pipe(connect.reload());
});

gulp.task("watchStatic", function () {
  gulp.watch(
    "./flowable/**/*",
    { ignoreInitial: false },
    gulp.series("static", "envConfig")
  );
});

let build = gulp.parallel("connectDev", "watchStatic");
if (process.env.NODE_ENV === "production") {
  build = gulp.series("static", "envConfig");
}
gulp.task("default", build);