对Layui进行二次开发后打包

发布：2023-05-24 19:24分类：前端模板评论：0浏览：155

1. 运行git，克隆到本地仓库（需安装有git）
```txt
git clone https://gitee.com/layui/layui.git
```
2. 运行cmd, 对项目进行依赖安装（需安装有node.js）
```txt
npm install
```
3. 对layui项目进行修改，这里举例将组件：`colorpicker`、`table`、`treeTable` 脱离到 `module`目录下为例，修改`gulpfile.js`文件：
``` js
// 基础配置
const config = {
  // 去除模块【colorpicker,table,treeTable】
  modules: 'lay,laytpl,laypage,需要集成的模块名放在这'
};

// 增加jse
const jse = () => {
  let src = [
    './src/modules/colorpicker.js',
    './src/modules/treeTable.js',
    './src/modules/table.js'
  ];
  return gulp.src(src).pipe(uglify()).pipe(header.apply(null, config.comment))
  .pipe(gulp.dest(dest +'/modules'));
};

// 增加jse
exports.jse = jse;
exports.default = gulp.series(clean, gulp.parallel(js, jse, css, files));
```
4. 对`layui.js`进行相应模块注释掉
``` 
// 内置模块
var modules = config.builtin = {
    lay: 'lay', // 基础 DOM 操作
    layer: 'layer', // 弹层
    laydate: 'laydate', // 日期
    laypage: 'laypage', // 分页
    laytpl: 'laytpl', // 模板引擎
    form: 'form', // 表单集
    upload: 'upload', // 上传
    dropdown: 'dropdown', // 下拉菜单
    transfer: 'transfer', // 穿梭框
    tree: 'tree', // 树结构
    // table: 'table', // 表格
    // treeTable: 'treeTable', // 树表
    element: 'element', // 常用元素操作
    rate: 'rate',  // 评分组件
    // colorpicker: 'colorpicker', // 颜色选择器
    slider: 'slider', // 滑块
    carousel: 'carousel', // 轮播
    flow: 'flow', // 流加载
    util: 'util', // 工具块
    code: 'code', // 代码修饰器
    jquery: 'jquery', // DOM 库（第三方）
    
    all: 'all',
    'layui.all': 'layui.all' // 聚合标识（功能性的，非真实模块）
};
```
5. 对`layui`项目进行打包
```txt
npx gulp
```
5. 打包完成后，模块`colorpicker`、`table`、`treeTable` 不会被集成，会单独压缩存放于`modules`文件夹下。

layui打包

暂无回复！

发布帖子

作者信息

: haohao; 等级：Lv2; 积分：2695; 这家伙很懒，什么都没写呢~

对Layui进行二次开发后打包

发布：2023-05-24 19:24分类：前端模板评论：0浏览：155

作者信息

最近热帖