实时 css/scss 版本与流星避免服务器重启 [英] Realtime css / scss edition with meteor avoiding server restart

问题描述

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

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):

设置您的项目以外部化 .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 标签以常规方式手动加载它.现在是配置编辑器的时候了.

  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.

  • 既然样式以 10 年前的方式导入，您可以使用兼容工具覆盖样式以允许实时编辑.一个简单但仅适用于 css 的方法是众所周知的 Espresso(以前的 CSSEdit)，打开页面并覆盖样式……但目前不支持 .scss 文件.

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

  • 要实现这一点，您需要使用 Sublime Text 2 或 3 作为编辑器，您可以在此处获取它:http://www.sublimetext.com/3 它不是免费的，但没有功能或时间限制.因此，如果您继续使用它，只需购买它来支持开发者团队即可.
  • 您将需要一个很棒的工具来允许实时版本是 takana，请在此处获取:https://github.com/mechio/高菜
  • 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

  那个 takana 太棒了！概念如下:安装并运行后，它将创建一个与 sublimetext 编辑器交互的服务器，然后您需要在代码中添加一个 js 片段，以便浏览器与 takana 服务器连接并重新加载 .css 或.scss 文件，无需重新启动meteor.要使用 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:

  • 打开终端
  • 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>
  • 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

  • 在第二个终端中启动您的流星项目.从正确的路径命令 meteor...
  • 打开任何浏览器访问您的流星页面，即可能是 http://localhost:3000
  • 打开 sublimetext，尝试编辑您的 style.css 文件，css 更改会自动显示在浏览器页面上，无需保存任何内容.
  • 这也适用于 .scss 文件.只需将 style.css 重命名为 style.css.scss 并在 sublime text 中编辑它.神奇的事情发生了，您正在使用流星应用程序编辑带有实时结果的 scss 文件，而无需重新加载任何内容.
  • 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.

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

  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.

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

  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 版本与流星避免服务器重启的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！