[锋利web前端开发]vim用autocommand插件编译coffee

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章

本篇主要讲解 使用vim插件autocommand编译coffee并调用uglifyjs进行压缩。

自己为了提升工作效率而写的一个插件,以整合coffee开发为例子。列举一下使用方式。

1.安装:
插件地址:https://github.com/thinkjs/autocommand (目前没有发布到vim.org上面),用git获取以后,将plugin目录中的autocommand.vim复制到vim的plugin目录即可。
依赖:python2.x

2.npm相关插件安装
通过调用外部命令来实现功能,需要安装cofee和uglify。安装命令npm install coffee-script uglify-js -g。

3.创建项目及配置
vim打开项目路径,我这里是E:\project\test。创建js文件夹,用来放转换后的js代码。创建_source文件夹,用来存放源代码及配置文件。vim切换路径到_source文件夹。pwd一下,应该显示的是E:\project\test\_source,输入:AcmdInitConfig命令,按y创建配置文件。​刷新_source文件夹,此时可以看到_config的配置文件。在_source下面创建coffee文件夹,用来放coffee源代码。这时整个目录应该是这样:

E:/project/test/
|~_source/
| |coffee/
| `-_config
|~js/

4.修改配置项
修改配置文件中的 coffee/ 相关配置项里 command 数组中添加一行 , "uglifyjs -mo ../js/#{$fileName}.min.js ../js/#{$fileName}.js",修改后整个配置文件内容如下:

{
  "jade/": {
    "path": "~",
    "jade": {
      "command": [
        "jade -PO ../ jade/#{$fileName}.jade"
      ]
    }
  },
  "sass/": {
    "path": "~",
    "sass": {
      "command": [
        "sass --style compact sass/#{$fileName}.sass ../css/#{$fileName}.css"
         /* , "cp -fp ../css/#{$fileName}.css ../../public/css" */
      ]
    }
  },
  "coffee/": {
    "path": "~",
    "coffee": {
      "command":[
        "coffee -bp coffee/#{$fileName}.coffee>../js/#{$fileName}.js"
        , "uglifyjs -mo ../js/#{$fileName}.min.js ../js/#{$fileName}.js"
         /* , "cp -fp ../js/#{$fileName}.js ../../public/js" */
      ]
    }
  }
}
/* vim:ft=javascript ts=2 sts=2 sw=2 et
*/

配置是一个json格式的文件。jade和sass的如果不用,可以删除。

5.编写代码文件
在_coffee文件夹下创建main.coffee文件,敲入一段coffee代码:

# Assignment:
number   = 42
opposite = true

# Conditions:
number = -42 if opposite

# Functions:
square = (x) -> x * x

# Arrays:
list = [1, 2, 3, 4, 5]

# Objects:
math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

# Splats:
race = (winner, runners...) ->
  print winner, runners

# Existence:
alert "I knew it!" if elvis?

# Array comprehensions:
cubes = (math.cube num for num in list)

vim执行:Acmd命令,如果执行正确,VIM底部会出现一串类似 19:44:29 execute coffee 这样的提示,表示执行成功。如果报错,会把错误显示出来。这时刷新E:/project/test/js文件夹,应该有main.js和main.min.js两个文件,main.js是main.coffee生成的js文件,main.min.js是用uglifyjs压缩后的js文件。

相关链接:
coffeescript: http://coffeescript.org/
uglifyjs: https://github.com/mishoo/UglifyJS2
autocommand使用说明:https://github.com/thinkjs/autocommand/wiki/quickref03

相关截图:
配置

执行成功的提示

报错提示