实时css / scss版本，带有meteor避免服务器重新启动 [英] Realtime css / scss edition with meteor avoiding server restart

问题描述

在使用meteor构建大型应用程序时，我们面临编辑样式表文件的常见问题。一旦文件被编辑，整个应用程序重新加载，每次做一点改变需要时间。大项目隐含地暗示复杂的css文件。为此，我选择使用sass来构造它们，并且在开发处理中更有效率。我正在寻找的是一个工作流程，我可以在编辑器中更改.scss文件，并在我的meteor应用程序中实时观看结果。

解决方案

这里是你需要的（它看起来很不错，但不要害怕，它值得）：

.css文件

• Meteor将所有.css文件编译成一个整体文件，大多数css编辑器都不会行为。对于开发阶段，我建议使用传统的方法将样式表包含到html页面本身。为此：
  
  
  
  • 在meteor项目的根目录中创建一个公共文件夹： meteorProject / public
  
  
  • 将css文件添加到此文件夹中： meteorProject / public / style.css
  
  
  • 您的主要HTML代码< link rel =stylesheettype =text / csshref =/ style.css/>
  
  

您做了什么？您创建了一个可通过路径 localhost：3000 / 访问的公共存储库，然后您将样式表style.css添加到此存储库，通过相对路径 /style.css 。通过使用这种技术，meteor不会编译自己的样式表到你的项目，你只需手动加载它使用链接标签。现在是时候配置编辑器了。

• 现在，样式是以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文件，而无需重新启动流星。
要使用takana设置meteor项目只需执行以下操作：

• 打开终端


• sudo npm install -g takana （如果需要请输入密码）


• 在另一个终端中启动takana，上面创建的 meteorProject / public 文件夹可能看起来像： takana / Users / aUser / meteorProject / public / li>
  
• 添加到主HTML页面的js代码片段< script type =text / javascriptsrc =http：// localhost：48626 / takana.js < / script>

• 在第二个终端启动meteor项目。命令 meteor 从正确的路径...


• 打开任何浏览器到您的流星页面，可能 http： localhost：3000


• 打开sublimetext，尝试编辑 style.css 文件，


• 这也适用于.scss文件。只需将 style.css 重命名为 style.css.scss ，然后在升华文本中编辑它。在这里神奇的事情，你正在一个流星应用程序编辑现场结果的scss文件，而不必重新加载任何东西。

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

最后但并非最不重要的是：您可以在多个浏览器中打开项目，看到它们在实时刷新，而你在SublimeText中编辑文件，也适用于Safari，FF，但由于某些原因，我不得不使用谷歌Chrome Canary而不是Chrome。如果您在其他浏览器（例如IE，Opera或其他计算机上的常规Chrome）上使用此工具，请进行评论。

While building large applications with meteor, we do face the regular problem of editing the stylesheets files. Once a file is edited, the whole application reloads which takes time each time a little change is made. A large project implicitly implies complex css files. For this reason I chosen to use the sass in order to structure them and be more efficient in the development processing. What I'm looking for is a workflow where I can change the .scss files in an editor and watch the result in real time in my meteor app.

解决方案

Here is what you need (it looks fastidious but do not be afraid, it worth it):

Setup your project to externalise .css files

• Meteor compiles all the .css files into one monolithic one, most of the css editors are not expecting this behaviour. For the development phase, I do recommend to use the traditional approach of including the stylesheet to the html page itself. to do so:
  • Create a public folder in the root of your meteor project: meteorProject/public
  • Add a css file into this folder: meteorProject/public/style.css
  • Import the stylesheet in your main html code <link rel="stylesheet" type="text/css" href="/style.css" />

What you did ? You created a public repository accessible through the path localhost:3000/ then you added the stylesheet style.css to this repository, that one became available through the relative path /style.css. By using this technique, meteor will not compile neither include by itself the stylesheet to your project, you just load it manually in the regular way using the link tag. Now it is time to configure an editor.

• Now that the styles are imported the way they were 10 year ago, you can use compatible tools which will override the style to allow live editing. A simple one but only for css is the well known Espresso (formerly CSSEdit), open the page and override the styles… but that one is currently not supporting .scss files.

Editing .scss files in realtime with meteor:

• To achieve this, you will need to use Sublime Text 2 or 3 as the editor, you can get it here: http://www.sublimetext.com/3 it is not free but there is no feature nor time restriction. So if you continue using it, just buy it to support the developers team.
• You will need the awesome tool to allow the live edition which is takana, get it here: https://github.com/mechio/takana

That takana is freaking awesome! the concept is the following: Once installed and ran it will create a server interacting with the sublimetext editor, then you are requested to add a js snippet to your code so that the browser will get connected with the takana server and reload the .css or .scss files in realtime without having to reboot meteor. To setup the meteor project with takana just do the following:

• open the terminal
• sudo npm install -g takana (enter your password if requested)
• start takana in another terminal by providing it the absolute path of the meteorProject/public folder created above is might look something like: takana /Users/aUser/meteorProject/public
• Add to your main html page the js snippet <script type="text/javascript" src="http://localhost:48626/takana.js"></script>

You are all set, now to use it

• Start your meteor project in a second terminal. command meteor from the right path…
• Open any browser to your meteor page i.e. probably http://localhost:3000
• Open sublimetext, try editing your style.css file, the css changes are automatically displayed on the browser page without saving anything.
• This is also working with .scss file. Just rename the style.css to style.css.scss and edit it within sublime text. Here the magic happen, you are editing a scss file with live result on a meteor application without having to reload anything.

Once you are satisfied with the result you can either compile the .scss to a .css file and add it the regular way to the project, or use the meteor .scss package which will do this for you at each restart. Note: Don't forget to remove the js and style snippet one to your code once in production.

Last but not least: you can open the project in several browsers and see them be refreshed in live while you edit the file in SublimeText, also it worked fine with Safari, FF but for some reasons I had to use "Google Chrome Canary" instead of "Chrome". Please comment if you made it work on other browsers such as IE, Opera or even if it worked with the regular "Chrome" on your computer.

这篇关于实时css / scss版本，带有meteor避免服务器重新启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！