MorFansLab/LiteWebChat_Frame

建议使用SASS

YubaC opened this issue · 4 comments

YubaC commented

随着样式表的增加,样式表中已经出现了大量重复样式,逐个修改会浪费大量的时间。
因此我建议使用SASS以方便管理与后期的调整样式。

Paxxs commented

天哪,我亲爱的老伙计,你和我想到一块去了,瞧,这是多么不可思议。我们会用上的。咱在PR中回复的最后那段就是指的这方面:#15 (comment)

不过是使用 SASS 家的 SCSS(一样,就语法层面兼容 css)。因为能无缝兼容我们原来写的样式。能慢慢改了【不是

Paxxs commented

@YubaC 亲爱的老伙计, 我最近把 JavaScript 也添加了一个转译器,所以语法标准将来可以用一点新特性了,它能翻译成旧的标准的语法。

但,听着,我们还是遇到了些小问题,兴许我们最好继续搞点操作,我是说,比如把 src 中的 var 都换成 let 确保变量都能正确初始化(作用域范围)。

比如现在这边的

downHeight = downChild.clientHeight;
upperHeight = upperChild.clientHeight;

如果前边没有被声明过,噢,我的上帝,可能经过转义器加语法严格标识,它就不会自动创建变量了,这真是太糟糕了,就像宿管佩雷兹女士养的那只狗的头发一样。

现在 js 文件位于 /src/js/input.js/render.js。由于目前还只是单个 js,所以不需要打包工具,将来如果多了可以考虑用一下 rollup。

var downHeight = downChild.clientHeight;
var upperHeight = upperChild.clientHeight;

现在 css/js 都已经实现编译后压缩了,真是太棒了对吗?

噢,瞧我这脑子,请你不要见怪,我亲爱的老伙计,前几天看到你加群申请了,可我们那个群人数超员,被腾讯降级限制了无法同意你的申请 (我发誓我会用我表弟马斯克家地下室那堆肮脏到应该下地狱的旧皮靴中挑一只最糟糕来狠狠踢这个蠢家伙的屁股),于是我向你申请了好友,可能我因为忘记署名了,只叫了老伙计,老伙计你还没同意呢。

附上现在的工作流【简版】:

我是用的 pnpm,这个用啥都行,但最好还是统一一个

  1. clone develop 分支
  2. (首次)pnpm i 初始化安装一下依赖
  3. 编译 css\js\html: pnpm run build; 清理再编译: pnpm run rebuild
  4. 编译后的文件在 dist 目录
YubaC commented

@Paxxs 哦,老伙计,这太棒了,是的,我是说,这太棒了!

关于工作流,我有一些不太一样的见解,于下面附上,供参考:

话说我们是不是偏离了这个issue

  1. 工作流在有tag时被触发。
  2. 使用这个将js和css进行minify处理,并输出到dist目录内
  3. 使用脚本(我用的是Python)处理一些杂七杂八的操作,比如添加版权信息、生成文档等。

这个工作流是我目前在用的,我省略了一些具体的细节。因为我不太与nodejs等有时需要打包东西的打交道,所以这个工作流对我来说够用了。每个人的习惯大抵都是不同的,比如我喜欢在工作流里用Python,不过我认为工作流只要能跑就行不过它们都能实现同一个目的,对我来说这就够了。

另,我在QQ里找了半天,终于在被屏蔽的那一栏里找到了老伙计,QQ提示你因为添加次数过多被自动屏蔽了()

Paxxs commented

@YubaC 3.使用脚本(我用的是Python)处理一些杂七杂八的操作,比如添加版权信息、生成文档等。

因为我的观点是前端的项目最好只用前端的东西弄,统一一点好些,毕竟不是人人都是全栈开发,不一定懂 bash/python 等语言或操作, (虽然我并不是学前端的) 但我知道只要是接触前端的都离不开 JavaScript 这个语言,而 nodejs 就是把螺母的V8引擎独立出来的,所以很适合本项目使用,也符合本项目的主旨,易用,使用者无需多学习更多和专业无关内容。

另外 scss/postcss 等这些也和 Javascript 一起用会更顺手,会有能连起来的感觉,毕竟它们就是这些东西写的。

2.使用 actions/auto-minify 将js和css进行minify处理,并输出到dist目录内

这个其实感觉没啥大必要,且和平台绑定,编写时候我们也要编译测试的,就一起生成得了。不过确实可以用 Github Actions 实现一下 release 时(merge 进 release分支,创建 tag 推送后)自动打包上传或通知至公共CDN平台。

1.工作流在有tag时被触发。

这个上边提了,确实可以考虑使用 Github Actions 实现优化一下发布流程。

但 minify 后的文件只在确定了新版本后生成其实大可不必(不想污染提交记录不提交 dist 目录上来就行)。我们目前的新工作流不管是 minify 过的代码还是没有 minify 过的代码,在浏览器调试时都是可以直接对应到原始代码文件的,所以 不需要更改示例文件(example.html)的引用即可调试。