json格式生成器_GoPablo一个静态站点生成器

gopablo

GoPablo是一个静态站点生成器，具有现代开发工作流程，集成Web服务器，自动重载，CSS预处理器和ES6语法。

特征

包括

Live Server

热重载和CSS注入

Express Server

代码缩小

图像压缩

模板和部分HTML注入

PostCSS和下一代CSS

✂️缓存清除

分发文件

文件结构

 ├── build/ # Build files ├── dist/ # Distribution files ├── src/ # Source files │ ├── assets/ # Assets directory │ ├── css/ # CSS files │ ├── fonts/ # Fonts directory │ ├── img/ # Image directory │ ├── js/ # JavaScript files │ ├── etc/ # Extra files │ ├── includes/ # HTML template partials │ ├── index.html # Index page └── .babelrc # Babel configuration └── .gitignore # Git ignored files └── .stylelintrc # Stylelint configuration file └── gulpfile.js # Gulp configuration └── LICENSE # License agreements └── package-lock.json # Packages lock file └── package.json # Node packages └── README.md # You are reading this └── server.js # Express server

安装GoPablo

sudo npm i gopablo -g

初始化项目

运行GoPablo以生成文件结构：

gopablo

在开发模式下运行应用程序

构建并打开浏览器到 localhost：3000。

npm run dev

在生产中为应用程序构建分发文件

npm run prod

模板和HTML部分

为避免重复的HTML代码，GoPablo使用gulp -file-include。它有一个简单的模板合成器，允许重复使用在单独文件中编写的代码块。这些部分位于目录中：

src/includes/

有关更多信息，请查看其文档和示例

新页面

要创建新页面，只需在src/目录中创建新的.html文件即可。

生成生产文件

要生成分发文件，请运行以下命令：

npm run prod

文件将在dist/目录中生成。

图片

建议将图像资源存储在目录中：

src/assets/img/

在生产构建中，SVG和其他图像资产将经历缩小过程。

字体

字体总是很特别。您的字体应存储在：

src/assets/fonts/

然后你可以将它们包含在你的CSS中：

@ font-face { font-family：' Helvetica Neue Thin ' ;src：url(' ./fonts/Helvetica-Neue-Thin.eot ');src：url(' ./fonts/Helvetica-Neue-Thin.eot ')格式(' eot ')， url(' ./fonts/Helvetica-Neue-Thin.woff2 ')格式(' woff2 ')， url(' ./fonts/Helvetica-Neue-Thin.woff') format( ' woff ')， url( ' ./fonts/Helvetica-Neue-Thin.ttf ')格式( ' truetype ')， url( ' ./fonts/Helvetica-Neue-Thin.svg ')格式( ' svg ');}

更多使用方法可以查看官方文档

开源地址：

由于头条审核网址比较严，防止他们误会是推广，所以大家可以自行搜索下载

也可以关注我的头条号后给我发送 `gopablo`，会自动把下载地址发送给你(做了关键字自动回复)

您知道哪些好用的小工具，欢迎评论分享，共同探讨学习

更多更优质的资讯，请关注我，你的支持会鼓励我不断分享更多更好的优质文章。