diff --git a/.gitignore b/.gitignore index 098c55f..c2a37a3 100644 --- a/.gitignore +++ b/.gitignore @@ -35,4 +35,5 @@ lerna-debug.log* .cache dist -asset \ No newline at end of file +asset/font +asset/dynamically \ No newline at end of file diff --git a/README.md b/README.md index 32896e9..2ff0205 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于 } ``` -3.将 ttf 的字体包放置在 ./src/font/ 目录下自然可以检测到新的可用字体，无需重启服务 +3.将 ttf 的字体包放置在 ./asset/font_src/ 目录下自然可以检测到新的可用字体，无需重启服务 ![路径预览](./doc_img/路径展示.jpg) @@ -61,6 +61,11 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于 如图可见每个返回的字体资源，访问即可下载。另外在访问该目录下的 asset.zip 可以直接下载全部的文件,生成的资源目录结构见下图 +![fontmin](./doc_img/api/fontmin_post.jpg) + +注意，此接口是还支持 post 方式访问的，这样可以一次请求多个类型的字体文件，而且不会如同 get 方法那样有长度限制 + + ![生成的资源.jpg](./doc_img/生成的资源.jpg) ### 动态生成字体 @@ -73,7 +78,9 @@ ui 需要展现一些特定的字体，但直接引入字体包又过大，于 ## 写项目时遇到的问题 -使用 svelte https://github.com/DeMoorJasper/parcel-plugin-svelte 通过这个插件使用 parcel 然后报 new 的错 需要限制 编译的版本，在package.json browserslist 字段限制一下版本就好 +1. 使用 svelte https://github.com/DeMoorJasper/parcel-plugin-svelte 通过这个插件使用 parcel 然后报 new 的错 需要限制 编译的版本，在package.json browserslist 字段限制一下版本就好 + +2. parcel 对 post purgecss 支持好像有问题，需要修改 postcss.config.js 文件他才能正确的删除样式 ## 启动 diff --git a/src/font/令东齐伋复刻体.ttf b/asset/font_src/令东齐伋复刻体.ttf similarity index 100% rename from src/font/令东齐伋复刻体.ttf rename to asset/font_src/令东齐伋复刻体.ttf diff --git a/src/font/优设标题黑.ttf b/asset/font_src/优设标题黑.ttf similarity index 100% rename from src/font/优设标题黑.ttf rename to asset/font_src/优设标题黑.ttf diff --git a/src/font/问藏书房.ttf b/asset/font_src/问藏书房.ttf similarity index 100% rename from src/font/问藏书房.ttf rename to asset/font_src/问藏书房.ttf diff --git a/doc_img/api/fontmin.jpg b/doc_img/api/fontmin.jpg index 9dbf7dd..2fb7736 100644 Binary files a/doc_img/api/fontmin.jpg and b/doc_img/api/fontmin.jpg differ diff --git a/doc_img/api/fontmin_post.jpg b/doc_img/api/fontmin_post.jpg new file mode 100644 index 0000000..7f1634d Binary files /dev/null and b/doc_img/api/fontmin_post.jpg differ diff --git a/postcss.config.js b/postcss.config.js index a2cc0fa..b75dd1f 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -9,7 +9,7 @@ const purgecss = require('@fullhuman/postcss-purgecss')({ './static/*.svelte', './static/*.js', './static/*.ts', - // etc. + `111 ` ], // Include any special characters you're using in this regular expression diff --git a/src/app.controller.ts b/src/app.controller.ts index 66fdc6f..b5733ef 100644 --- a/src/app.controller.ts +++ b/src/app.controller.ts @@ -6,27 +6,53 @@ import { Response, Res, Req, + Post, + Body, } from '@nestjs/common'; import { AppService } from './app.service'; import { join } from 'path'; import { promises as fs } from 'fs'; import { Request } from 'express'; import { Stream } from 'stream'; +import { req_par } from './req.decorator'; @Controller() export class AppController { constructor(private readonly appService: AppService) {} /** 压缩字体 */ @Get('fontmin') - font_min(@Query('text') text, @Query('font') font) { - return this.appService.font_min(text, font); + font_min(@Query('text') text, @Query('font') font,@req_par('host_url') host_url:string) { + + return this.appService.font_min(text, font,host_url); + } + @Post('fontmin') + font_min_post(@Body() body: { text: string; font: string }[],@req_par('host_url') host_url:string) { + const res = body.map(par => { + return new Promise((resolve, reject) => { + this.appService + .font_min(par.text, par.font,host_url) + .then(r => { + resolve({ + font: par.font, + css:r, + status: 'success', + }); + }) + .catch(e => { + resolve({ + font: par.font, + status: 'failure', + }); + }); + }); + }); + return Promise.all(res); } /** 返回字体列表 */ @Get('font_list') font_list() { - const font_dir = join(__dirname, '../../src/font'); - return fs.readdir(font_dir); + return this.appService.font_list(); } /** 压缩字体 */ @@ -42,8 +68,7 @@ export class AppController { res.set({ 'Content-Type': `font/${type}`, }); - if(!text) - return ' ' + if (!text) return ' '; const file = await this.appService.generate_fonts_dynamically( text, font, @@ -56,3 +81,5 @@ export class AppController { bufferStream.pipe(res); } } + +function promise_execute_all(params: Promise[]) {} diff --git a/src/app.service.ts b/src/app.service.ts index 03c132b..cfab055 100644 --- a/src/app.service.ts +++ b/src/app.service.ts @@ -5,10 +5,18 @@ import { join } from 'path'; import crypto from 'crypto'; import { config } from './config'; import { promises as fs } from 'fs'; +import { req_par } from './req.decorator'; + +const font_src="./asset/font_src/" + @Injectable() export class AppService { - font_min(text: string, font: string) { - const srcPath = `./src/font/${font}.ttf`; // 字体源文件 + font_list() { + const font_dir = join(__dirname, `../../${font_src}`); + return fs.readdir(font_dir); + } + font_min(text: string, font: string,server_url:string) { + const srcPath = `${font_src}${font}.ttf`; // 字体源文件 const outPath = `asset/font/${Date.now()}/`; const destPath = `./${outPath}`; // 输出路径 // 初始化 @@ -22,7 +30,7 @@ export class AppService { .use(Fontmin.ttf2eot()) // eot 转换插件 .use(Fontmin.ttf2woff()) // woff 转换插件 .use(Fontmin.ttf2svg()) // svg 转换插件 - .use(Fontmin.css({ fontPath: `${config.web_font_path}${outPath}` })) // css 生成插件 + .use(Fontmin.css({ fontPath: `${server_url}${outPath}` })) // css 生成插件 .dest(destPath); // 输出配置 // 执行 @@ -36,7 +44,7 @@ export class AppService { .filter(f => (f.history[f.history.length - 1] as string).endsWith('.css'), ) - .map(f => f._contents.toString()); + .map(f => f._contents.toString())[0]; zip( join(__dirname, '../../', destPath), join(__dirname, '../../', destPath, 'asset.zip'), @@ -58,7 +66,7 @@ export class AppService { const hash = crypto.createHash('md5'); hash.update(`${type}${font}${text}`); const hash_str = hash.digest('hex'); - const srcPath = `./src/font/${font}.ttf`; // 字体源文件 + const srcPath = `${font_src}${font}.ttf`; // 字体源文件 const outPath = `asset/dynamically/${hash_str}`; const destPath = `./${outPath}`; // 输出路径 @@ -128,4 +136,4 @@ export class AppService { }); }); } -} +} \ No newline at end of file diff --git a/src/req.decorator.ts b/src/req.decorator.ts new file mode 100644 index 0000000..4e19005 --- /dev/null +++ b/src/req.decorator.ts @@ -0,0 +1,9 @@ +import { createParamDecorator } from '@nestjs/common'; +import { Request } from 'express'; + +export const req_par = createParamDecorator((data: string, req:Request) => { + if('host_url'===data){ + return `//${req.headers.host}/` + } + return req +}); diff --git a/static/App.svelte b/static/App.svelte index c1c1dcd..221e8c4 100644 --- a/static/App.svelte +++ b/static/App.svelte @@ -1,19 +1,21 @@