左手's Blog

之前使用预处理器一直是基于vim插件autocommand，最近和同事协作开发，vim入门太陡峭，抽了点时间用browser-sync实现了类似功能。具体功能如下：自动检测jade、sass、livescript等源码文件的改动，编译对应的html、css、js，更新改动到浏览器中打开的页面。

明确几个定义：
1. browser-sync nodejs插件，官方说明 Time-saving synchronised browser testing。
2. 前端预处理器 jade、sass、livescript。
3. 工作流 使用browser-sync整合jade、sass、livescript完成开发的一套流程。

依赖：
nodejs
 npm package: jade、livescript、browser-sync
ruby
 gem package: sass

工作目录：

说明：_source目录下存放预处理器源代码，html目录存放生成的html、css、js等。

在workspace目录下创建 browserSync.ls 具体代码如下：

path = require \path
exec = require \child_process .exec
browserSync = require \browser-sync .create!

# config {{{
outputDir = 'html'
cssOutputDir = "#outputDir/css"
jsOutputDir = "#outputDir/js"

reloadWatchFile = ''
  # "#outputDir/*.html"
  # "#jsOutputDir/*.js"
  # "#outputDir/img/*.*"

compileWatchFile =
  "_source/jade/*.jade"
  "_source/sass/*.sass"
  "_source/live/*.ls"

autoCompileFile = true
# }}}
# getTimeToken {{{
getTimeToken = ->
  currDate = new Date()
  hours = currDate.getHours()
  minutes = currDate.getMinutes()
  seconds = currDate.getSeconds()
  if hours < 10
    hours = "0#hours"
  if minutes < 10
    minutes = "0#minutes"
  if seconds < 10
    seconds = "0#seconds"
  "#hours:#minutes:#seconds"
# }}}
# compileTask {{{
getCompileCmdAndFileName = (file, ext) ->
  filename = path.basename file, ext

  switch ext
  case '.jade' then
    compileFileName = "#outputDir/#{filename}.html"
    cmd = "jade -Po #outputDir #file"
  case '.sass' then
    compileFileName = "#cssOutputDir/#{filename}.css"
    cmd = "sass --sourcemap=none --style compact #file|sed '/^@charset/d'>#compileFileName"
  case '.coffee' then
    compileFileName = "#jsOutputDir/#{filename}.js"
    cmd = "coffee --no-header -bco #jsOutputDir #file"
  case '.ls' then
    compileFileName = "#jsOutputDir/#{filename}.js"
    cmd = "lsc --no-header -bco #jsOutputDir #file"
  default
    compileFileName = cmd = ''
  [cmd, compileFileName]

compileTask = (file, ext, reload) !->
  cmdIndex = -1
  try
    [cmd, filename] = getCompileCmdAndFileName file, ext

  if not cmd or not filename
    console.log "cmd not define. file: #file ext: #ext"

  # exec callback
  execCallback = (err, stdo, stde) !->
    if err is null and not stde
      if cmdIndex is -1
        console.log "[#{getTimeToken!}] compiled #filename"
        reload filename if reload
      else
        execCmd()
    else
      console.log err || stde

  # execute command
  do execCmd = !->
    if Array.isArray cmd
      currCmd = cmd[++cmdIndex]
      if cmd.length <= cmdIndex+1
        ``cmdIndex = -1;``
    else
      currCmd = cmd

    if currCmd
      exec currCmd, execCallback

compileCallback = (file) !->
  ext = path.extname file
  filename = path.basename file

  # ignore partial file
  if filename.charAt(0) is '_'
    return undefined

  switch ext
  case '.jade', '.coffee', '.ls', '.sass'
    #   compileTask file, ext
    # case '.sass'
    compileTask file, ext, browserSync.reload
  default
    console.log 'unknown file type.'
# }}}
# browserSync {{{
browserSync.init do
  server:
    baseDir: outputDir
    index: \index.html
  open: false

if reloadWatchFile and reloadWatchFile.length
  browserSync.watch reloadWatchFile
  .on \change, browserSync.reload

wacher = browserSync.watch compileWatchFile
.on \change, compileCallback
# auto compile file
if autoCompileFile
  wacher.on \add, compileCallback
# }}}

# vim: set sw=2 ts=2 sts=2 et fdm=marker:

使用方法如下：
cd workspace
lsc browserSync.ls

* lsc 是 livescript的命令，使用npm 全局安装 livescript 后方可使用。

配置说明：
outputDir        html文件的输出目录，web server的根目录。
cssOutputDir     css文件输出目录。
jsOutputDir      js文件输出目录。
reloadWatchFile  检测改动的目录，如果文件发生变更，会更新到打开的页面中。html/css/js已自动更新，默认可留空。
compileWatchFile 监测的源码文件，如果发生变化执行编译任务。
autoCompileFile  自动编译文件，设为true时，每次启动会把所有的源码文件编译一遍。

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

1. haml/sass/coffee的安装(win平台)
2. 使用vim插件autocommand进行整合开发
3. sass小技巧extend和include组合运用
4. sass小技巧图片版本号和绝对路径引用
5. vim用autocommand插件编译coffee