8

只是想知道您认为编译 SCSS 和刷新浏览器的最快方法是什么？我目前正在使用 LiveReload，但有时似乎有点慢，可能需要 1-3 秒。看起来并不多，但我觉得我正在失去正确的编码速度。

你们都用什么？CodeKit 会更快吗？或者可能是 Sublime LiveReload 插件（不是实际的应用程序）？或者也许我应该放弃指南针并使用其他东西？任何建议，将不胜感激。

PS。我在 OS X

4

3 回答 3

7

我使用这个堆栈：

注意事项

但它比 x100xxx 快得多......！

在这里阅读更多：

http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

例子

要在您的页面上启用实时重新加载，请在结束正文标记之前添加一个脚本标记：

<script src="//localhost:35729/livereload.js"></script>

这是Gruntfile.js的一个例子：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    sass: {
      dist: {
        options: {
          outputStyle: "nested"
        },
        files: {
          "dist/css/app.css": "src/scss/app.scss"
        }
      }
    },
    watch: {
      options: {
        livereload: true
      },
      grunt: {
        files: ["Gruntfile.coffee"]
      },
      sass: {
        files: "src/scss/app.scss",
        tasks: ["sass"]
      }
    }
  });
  grunt.loadNpmTasks("grunt-sass");
  grunt.loadNpmTasks("grunt-contrib-watch");
  grunt.registerTask("build", ["sass"]);
  grunt.registerTask("default", ["build", "watch"]);
};
于 2014-01-05T16:18:25.147 回答
3

您可以使用fast-live-reload来做到这一点，而且您也不需要所有这些配置。我假设沿着这些思路做一些事情：

fast-live-reload -ep "compass watch" \ -s http://path-to-your-app/ \ dist/css/

这将compass watch在启动时运行，并在完成后将其终止，并在 dist/css 文件夹更改时重新加载页面。

这个流程也适用于 typescript 等其他外部观察者。

免责声明：我是 fast-live-reload 的创造者。

于 2015-06-11T08:43:59.007 回答
0

对于新项目，我建议使用 Yeoman 搭建脚手架，它会自动创建构建生产所需的文件、实时重载、自动编译 scss/less，甚至优化图像——所有这些都由 Gulp 处理（grunt 的最佳替代方案，更简单在我看来使用）。

https://github.com/yeoman/generator-gulp-webapp

如果您没有开始一个新项目，请按照这些关于现代前端工作流程的教程进行操作

http://latviancoder.com/story/our-frontend-workflow

http://viget.com/extend/gulp-browserify-starter-faq

不要忘记Javascript很棒。它可以通过结合较小的工具来解决您的大多数问题，这些工具结合起来可以自动化并将您的生产力提高 10 倍。特别是如果你在前端。

以下是有助于提高生产力的Javascript 工具的概述：

https://dgosxlrnzhofi.cloudfront.net/custom_page_images/107/page_images/JavaScript-Tools-1200.jpg?1395348993

于 2015-01-30T21:38:50.900 回答