实时css/scss版本与流星避免服务器重启

Question

在使用meteor构建大型应用程序时,我们确实面临编辑样式表文件的常规问题.编辑文件后,整个应用程序重新加载,每次进行一点改动都需要花费时间.大型项目隐含意味着复杂的css文件.出于这个原因,我选择使用sass来构建它们,并在开发处理中更有效率.我正在寻找的是一个工作流程,我可以在编辑器中更改.scss文件,并在我的流星应用程序中实时查看结果.

Answer 1

这就是你需要的东西(看起来很挑剔,但不要害怕,值得):

设置项目以外部化.css文件

• Meteor将所有.css文件编译成一个单片文件,大多数css编辑器都没有预料到这种行为.对于开发阶段,我建议使用传统的方法将样式表包含在html页面本身.这样做:
  • 在meteor项目的根目录中创建一个公用文件夹: meteorProject/public
  • 将css文件添加到此文件夹中: meteorProject/public/style.css
  • 在主html代码中导入样式表 <link rel="stylesheet" type="text/css" href="/style.css" />

你做了什么 ？您创建了一个可通过该路径访问的公共存储库,localhost:3000/然后将样式表style.css添加到此存储库,该存储库通过相对路径变为可用/style.css.通过使用这种技术,meteor不会编译既不包含项目样式表,也只是使用link标记以常规方式手动加载它.现在是时候配置编辑器了.

• 现在风格按照10年前的方式导入,您可以使用兼容的工具来覆盖样式以允许实时编辑.一个简单但只有css的是众所周知的Espresso(以前的CSSEdit),打开页面并覆盖样式......但是那个目前不支持.scss文件.

使用meteor实时编辑.scss文件:

• 要实现这一点,你需要使用Sublime Text 2或3作为编辑器,你可以在这里得到它:http://www.sublimetext.com/3它不是免费的,但没有功能也没有时间限制.因此,如果您继续使用它,只需购买它以支持开发人员团队.
• 你需要一个很棒的工具来实现takana的现场版,请点击这里:https://github.com/mechio/takana

那takana真是太棒了!这个概念如下:一旦安装并运行它将创建一个与sublimetext编辑器交互的服务器,然后你被要求在你的代码中添加一个js片段,以便浏览器与takana服务器连接并重新加载.css或.scss文件实时无需重启meteor.要使用takana设置流星项目,请执行以下操作:

• 打开终端
• sudo npm install -g takana (如果需要,请输入密码)
• 通过提供meteorProject/public上面创建的文件夹的绝对路径,在另一个终端中启动takana 可能看起来像:takana /Users/aUser/meteorProject/public
• 将js片段添加到主html页面 <script type="text/javascript" src="http://localhost:48626/takana.js"></script>

你已经准备好了,现在就可以使用了

• 在第二个终端启动你的流星项目.meteor来自正确道路的命令......
• 打开任何浏览器到您的流星页面即可能 http://localhost:3000
• 打开sublimetext,尝试编辑style.css文件,css更改会自动显示在浏览器页面上而不保存任何内容.
• 这也适用于.scss文件.只需重命名为style.cssto style.css.scss并在sublime文本中编辑它.这里发生了神奇的事情,你正在流星应用程序上编辑带有实时结果的scss文件而无需重新加载任何内容.

一旦您对结果感到满意,您可以将.scss编译为.css文件并以常规方式将其添加到项目中,或使用meteor .scss包,它将在每次重新启动时为您执行此操作.注意:在生产中,不要忘记将js和样式代码段删除到代码中.

最后但并非最不重要的一点:您可以在多个浏览器中打开项目并在SublimeText中编辑文件时看到它们在实时刷新,它也适用于Safari,FF但由于某些原因我不得不使用"Google Chrome Canary"代替"Chrome".如果您在其他浏览器(如IE,Opera)上工作,或者即使它与您计算机上的常规"Chrome"一起使用,请发表评论.