sublime之插件CoffeeScript

本文提供了一套完整的前端自动化开发流程,包括操作系统设置、编辑器配置、Node.js与Grunt CLI安装、CoffeeScript集成、Sublime Text语法高亮与自动刷新设置,以及实践案例分享。旨在帮助开发者快速上手并提高开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    各位看官,小生最近在做前端自动化这块,小有成效,记之,勿忘,同时为后来者前行做一个路标。

    操作系统:win8

    编辑器:Sublime


  1. 安装插件

       a     ctrl+shift+p,输入install,回车,如图

                145825_kPdb_152550.jpg

      b    输入CoffeeCompile

            150521_BqLv_152550.jpg

2.    安装node


3.    安装grunt,命令:npm install -g grunt-cli

       安装coffee-script,命令:npm install -g coffee-script


4.    下载jashkenas-coffeescript,官方地址:https://github.com/jashkenas/coffeescript

                                                  我的地址: http://pan.baidu.com/s/1hq7nF5U 密码: ckcu

5.    添加coffee.cmd到node安装目录,如图

        152148_hzsj_152550.jpg            

        coffee.cmd内容如下:

                @echo  off

                node.exe 步骤4 jashkenas-coffeescript的安装目录 %*

6.    添加环境变量 NODE_PATH=C:\Users\你的用户名\AppData\Roaming\npm\node_modules;

        如图:152946_CNSD_152550.jpg

7.    sublime添加编译

       在Tools->build system->中点击 new build system,

       出现如图:153345_NzTO_152550.jpg

将如下内容覆盖:

{

"cmd": ["coffee.cmd的所在路径", "$file"],


    "file_regex": "^(...*?):([0-9]*):?([0-9]*)",


    "selector": "source.coffee",

"encoding":"cp936"

}

8.    添加语法高亮:下载CoffeeScript.tmLanguage,地址:https://github.com/jashkenas/coffee-script-tmbundle/blob/master/Syntaxes/CoffeeScript.tmLanguage

        覆盖到:C:\Users\用户名\AppData\Roaming\Sublime Text 2\Packages\CoffeeScript

9.    在需要自动刷新的页面添加<script src="//localhost:35729/livereload.js"></script>

10.    在项目中添加package.json和Gruntfile.js,通过node.js command prompt工具,切到指定目录,敲击命令:grunt

11.     示例Demo  http://pan.baidu.com/s/1sjnY5FB 密码: 62vb

12.     赶紧学习语法,翱翔吧! http://coffeescript.org/


转载于:https://my.oschina.net/u/152550/blog/304788

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值