lx-pages

一款轻量级基于Gulp的构建工具

快速实现将开发阶段中代码自动转换为生产环境代码
支持转换less/sass
支持压缩html、js、css
支持swag模版转换
支持开发阶段开启本地服务器调试和热更新

1. Installation

$ npm install lx-pages --save-dev

# or yarn
$ yarn add lx-pages --dev

2. 在项目根目录创建pages-config.js

demo项目目录如下：

Snip20210820_5.png

pages-config.js中需要配置的文件路径：

module.exports = {
  //默认配置  
  build : {
    src : 'src', //项目根路径                       
    dist : 'dist', //输出路径
    temp : '.temp', //临时路径,可不做修改
    public : 'public', //静态资源，打包后复制在dist目录
    paths : { //src下的各个文件存放路径-结合自己项目修改
      styles : 'css/**',
      scripts : 'js/*.js',
      pages : '*.html',
      images : 'images/*.{jpg,jpeg,png,gif,svg}',
      fonts : 'fonts/**'
    }
  }
}

3. 在package.json中配置scripts

  "scripts": {
    "build": "lx-pages build",
    "serve": "lx-pages serve"
  },

4. 开发阶段运行

npm run serve

生产阶段运行

npm run build

5. 注意点

html中引入的less或者sass文件，需要改成css结尾，避免build后找不到样式文件。

    <!--<link rel="stylesheet/less" href="css/index.less">-->
    <link rel="stylesheet" href="css/index.css">

github

https://github.com/XuanLee/lx-pages

gitee

https://gitee.com/li-XuAn-lx/lx-pages

npm

https://www.npmjs.com/package/lx-pages

License

MIT © 李徐安