美文网首页
一款轻量级基于Gulp的自动化构建工具

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

作者: 李徐安 | 来源:发表于2021-08-15 15:14 被阅读0次

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 © 李徐安

相关文章

  • JavaScript学习笔记(三十六)-- GULP

    GULP gulp 是一个项目开发的 自动化打包构建工具 基于 node 环境来运行的 什么是自动化打包构建工具 ...

  • gulp和webpack的理解

    gulp和webpack都是自动化构建工具。 两者不同点: 1、gulp 是基于流的自动化构建工具, 通常以管道的...

  • gulp总结

    gulp gulp 是基于stream的自动化构建工具 官网 https://www.gulpjs.com.cn/...

  • vue+node环境搭建

    · webpack:代码模块化构建打包工具· gulp: 基于流的自动化构建工具· grunt: Javascri...

  • Gulp总结及基本用法

    gulp.js的大致理解: gulp.js-基于流的自动化构建工具;gulp是基于Nodejs的自动任务运行器;实...

  • 『前端工程化』gulp(gulp3 && gul

    Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...

  • 04.gulp 项目构建 代码压缩与混淆

    gulp 1. gulp简介 gulp这个软件是用nodejs写的. gulp是基于流的自动化构建工具 网站开发完...

  • 配置Gulp

    使用工具 Gulp说明 Gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器,基于node.js,...

  • 前端内容的自动化构建

    前端内容的自动化构建 Gulp - 基于流的自动化构建工具 Browserify 官网 Github 一个管理前端...

  • gulp.js 的使用

    什么是 gulp.js gulp.js - 基于流的自动化构建工具。gulp.js 的 API 简单,学习成本低;...

网友评论

      本文标题:一款轻量级基于Gulp的自动化构建工具

      本文链接:https://www.haomeiwen.com/subject/kmeubltx.html