#dailynodejs# 最新最快最亲身的Nodejs分享

#dailynodejs# 最新最快最亲身的Nodejs分享

给社区的小伙伴也分享一下一个不错的工具包：

欢迎关注我们的微博：dailyNodejs

我们是几个生活在node第一线的【老前端人】，热衷分享一些最直接的node内容，坚持daily，欢迎有node相关的内容@我们一下哦

#Takana#

Takana lets you see your SCSS and CSS style changes live, in the browser, as you type them.

亲身装了一下，有一些体会：

===========

看了一下，确实有一个grunt的插件 ：

https://github.com/mechio/grunt-takana/

这个代码很简单，就是

pkg里面：

"dependencies": {
    "takana": "0.0.8"
  },

然后tasks文件里面直接调用这个包：

takana.run({
      path:         fs.realpathSync(options.path),
      includePaths: options.includePaths
    });

--------------------------------- 分割线 ------------------------------------

但是takana这个包就比较复杂：

1、pkg依赖：

"dependencies": {
    "underscore": "~1.5.2",
    "nssocket": "~0.5.1",
    "log4js": "~0.6.9",
    "node-sass": "^0.9.5-rc1",
    "connect": "~2.12.0",
    "shelljs": "~0.2.6",
    "q": "~1.0.0",
    "websocket": "~1.0.8",
    "express": "~3.4.8",
    "coffee-script": "~1.6.3",
    "commander": "~2.1.0",
    "takana-client": "^1.0.3",
    "chokidar": "^0.9.0",
    "mime": "^1.2.11"
  },

2、源码满眼都是coffee编写：

3、用一个takana.py来安装Sublime插件，支持2和3版本

也映衬了官网的原话: Then open one of its referenced stylesheets in Sublime and start live-editing!

var takanaPackagePath = null,
      searchPaths = [
    helpers.sanitizePath('~/Library/Application Support/Sublime Text 3/Packages/'),
    helpers.sanitizePath('~/Library/Application Support/Sublime Text 2/Packages/'),
    helpers.sanitizePath('~/.config/sublime-text-3/Packages/') // linux
  ];

后面用shelljs 来安装插件 （其实就是拷贝自己目录下的takana,py）到Sublime Text 3/Packages/ 或者 Sublime Text 2/Packages/ 下面

//Creates directories.
shell.mkdir('-p', takanaPackagePath);
//Copies files
shell.cp('-f', path.join(__dirname, './sublime-plugin/takana.py'), path.join(takanaPackagePath, 'takana.py'));

4、自己内置一个服务：

https://github.com/mechio/takana/blob/master/lib/server.coffee

内容比较多，满眼coffee，有兴趣可以看看

5、配置：

  • skipSublime – 是否需要安装sublime插件
if (!options.skipSublime){
installSublimePlugin();
}
  • verbose – 内部调用log4js来打日志
  • path - 必须的
  • includePaths

4 回复

#dailynodejs# 最新最快最亲身的Nodejs分享

给社区的小伙伴也分享一下一个不错的工具包：

欢迎关注我们的微博：dailyNodejs

我们是几个生活在node第一线的【老前端人】，热衷分享一些最直接的node内容，坚持daily，欢迎有node相关的内容@我们一下哦

#Takana#

Takana 让你在浏览器中实时看到你的 SCSS 和 CSS 变化

亲自装了一下，有一些体会：

看了一下，确实有一个 grunt 的插件： https://github.com/mechio/grunt-takana/

这个代码很简单，就是在 package.json 里定义了依赖：

"dependencies": {
    "takana": "0.0.8"
}

然后在 tasks/takana.js 文件里直接调用这个包：

takana.run({
      path:         fs.realpathSync(options.path),
      includePaths: options.includePaths
});

但是 takana 这个包就比较复杂了：

  1. 依赖：

    "dependencies": {
    "underscore": "~1.5.2",
    "nssocket": "~0.5.1",
    "log4js": "~0.6.9",
    "node-sass": "^0.9.5-rc1",
    "connect": "~2.12.0",
    "shelljs": "~0.2.6",
    "q": "~1.0.0",
    "websocket": "~1.0.8",
    "express": "~3.4.8",
    "coffee-script": "~1.6.3",
    "commander": "~2.1.0",
    "takana-client": "^1.0.3",
    "chokidar": "^0.9.0",
    "mime": "^1.2.11"
  }

  2. 源码：满眼都是 CoffeeScript 编写。

  3. 安装 Sublime 插件：使用一个 takana.py 来支持 Sublime Text 2 和 3 版本。

var takanaPackagePath = null,
      searchPaths = [
    helpers.sanitizePath('~/Library/Application Support/Sublime Text 3/Packages/'),
    helpers.sanitizePath('~/Library/Application Support/Sublime Text 2/Packages/'),
    helpers.sanitizePath('~/.config/sublime-text-3/Packages/') // linux
  ];

// 创建目录
shell.mkdir('-p', takanaPackagePath);
// 复制文件
shell.cp('-f', path.join(__dirname, './sublime-plugin/takana.py'), path.join(takanaPackagePath, 'takana.py'));

  1. 内置服务： https://github.com/mechio/takana/blob/master/lib/server.coffee

  2. 配置：

    • skipSublime：是否需要安装 sublime 插件。
    • verbose：内部调用 log4js 打日志。
    • path：必须的。
    • includePaths：路径配置。

通过这些步骤，你可以在开发过程中实时看到 SCSS 和 CSS 的变化，大大提高开发效率。希望这个工具对你有帮助！


排版高亮下？

如果目前在自动化工具里面已经使用grunt-contrib-compass来处理sass这种编译的，想要迁移到Takana的化，注意:

Takana uses libsass under the hood, if you’re using node-sass you’ll be fine. However, if you’re using the ruby compiler, you may need to refactor your code to get it running with libsass.

#dailynodejs# 最新最快最亲身的Nodejs分享

大家好，今天我们来分享一个非常有用的工具包——Takana。它能够让你在浏览器中实时看到你的SCSS和CSS样式变化，只需在编辑器中输入即可。

安装和使用

首先，你需要安装 grunt-takana 插件，这是一个基于 Takana 的 Grunt 插件，可以让你在开发过程中实时预览样式变化。

npm install grunt-takana --save-dev

示例代码

接下来我们来看一下如何在 Gruntfile.js 中配置 grunt-takana：

module.exports = function(grunt) {

  grunt.initConfig({
    takana: {
      options: {
        path: 'styles',
        includePaths: ['styles']
      }
    }
  });

  grunt.loadNpmTasks('grunt-takana');

  grunt.registerTask('default', ['takana']);
};

上面的配置中，path 指定了你要监听的目录，includePaths 则是需要包含的路径。你可以根据自己的项目结构进行调整。

运行

配置完成后，只需运行以下命令启动任务：

grunt

此时，你就可以在浏览器中实时看到你的 SCSS 和 CSS 样式变化了。

Takana 简介

Takana 是一个功能强大的工具，它不仅限于 Grunt 插件。其本身也有一个独立的版本，允许你在 Node.js 环境中运行，并且自带了一些客户端工具（如 Sublime Text 插件）来增强实时预览的效果。

小结

通过今天的内容，我们了解了如何使用 grunt-takana 来实现实时的 CSS 预览。如果你对更深入的功能感兴趣，可以查看 Takana 的官方文档或源码，了解更多高级用法。

欢迎关注我们的微博 @dailyNodejs，更多关于 Node.js 的实用技巧和工具分享等你来发现！

希望这篇分享对你有所帮助！

回到顶部