使用acmd构建jade/sass/livescript开发环境

之前写过一个browserSync的脚本编译jade/sass/coffee,在多个项目中拷贝脚本文件比较麻烦,业余封装了一个npm插件,这里介绍一下用法。
项目地址:https://github.com/thinkjs/autocommand-cli,插件使用typescript开发,欢迎有兴趣的同学一起完善。

环境搭建

1.创建目录

mkdir example && cd example
mkdir _source _source/jade _source/sass _source/live
mkdir html html/css html/js

_source目录存放源代码,_source/jade、_source/sass、_source/live分别存放jade、sass、livescript源文件。html目录存放生成结果,html、html/css、html/js分别存放html、css、js文件。

2.安装npm包依赖

echo '{}' > package.json
npm install thinkjs/autocommand-cli#latest jade node-sass livescript --save-dev

如果网络不好,建议使用cnpm替代

3.编辑package.json加以下内容:

"scripts": {
  "acmd": "acmd",
  "start": "acmd watch",
  "build": "acmd run"
},

完整的package.json如下

{
  "scripts": {
    "acmd": "acmd",
    "start": "acmd watch",
    "build": "acmd run"
  },
  "devDependencies": {
    "autocommand-cli": "thinkjs/autocommand-cli#latest",
    "jade": "^1.11.0",
    "livescript": "^1.5.0",
    "node-sass": "^3.9.3"
  }
}

4.创建acmd配置文件并修改

npm run acmd -- config -i
默认在当前目录下创建名为_config的配置文件,编辑该配置文件
修改file字段内容为:
"file": ["_source/**/*.{jade,sass,ls}"],

修改define字段内容为:

"define": {
  "_source/": {
    ".jade": {
      "file": "html/#{fileName}.html",
      "command": "jade -Po html/ #{file}"
    },
    ".sass": {
      "file": "html/css/#{fileName}.css",
      "command": "node-sass --output-style compact #{file} html/css/#{fileName}.css"
    },
    ".ls": {
      "file": "html/js/#{fileName}.js",
      "command": "lsc -co html/js/ #{file}"
    }
  }
},

修改 browserSync > init下的server为:

"server": {
  "baseDir": "html/"
},

完整配置文件如下:

{
  // 侦听的文件
  "file": ["_source/**/*.{jade,sass,ls}"],
  // 过滤
  "ignore": ["_*.*", "node_modules/"],
  // 变量
  "variable": {
    "localBin": "~/node_modules/.bin"
  },
  // 环境变量
  "environment": {
    ":PATH": "#{localBin}"
  },
  // 定义
  "define": {
    "_source/": {
      ".jade": {
        "file": "html/#{fileName}.html",
        "command": "jade -Po html/ #{file}"
      },
      ".sass": {
        "file": "html/css/#{fileName}.css",
        "command": "node-sass --output-style compact #{file} html/css/#{fileName}.css"
      },
      ".ls": {
        "file": "html/js/#{fileName}.js",
        "command": "lsc -co html/js/ #{file}"
      }
    }
  },
  // browserSync配置
  "browserSync": {
    // 初始化配置
    "init": {
      "server": {
        "baseDir": "html/"
      },
      "open": false,
      "ui": false
    },
    // 启动livereload
    "reload": true
  }
}
// vim: se sw=2 ts=2 sts=2 ft=javascript et:

开发

1.编译jade文件

创建_source/jade/index.jade,内容如下:

doctype html
html
  head
    title jade page
  body
    h1 hello world

在terminal中运行 npm start,浏览器访问 http://localhost:3000,可查看页面。

2.编译sass文件

创建_source/sass/style.sass,内容如下:

html, body
  padding: 0
  margin: 0
  font-size: 16px

h1
  color: green

编辑_source/jade/index.jade加入对style.sass的引用,在head中插入以下内容:
link(href="css/style.css" rel="stylesheet")
保存查看浏览器,内容已自动刷新。

3.编译livescript文件

创建_source/sass/script.ls,内容如下:
console.log \hello

编辑_source/jade/index.jade加入对script.ls的引用,在body中插下以下内容:
script(src="js/index.js")
保存可查看浏览器中的控制台输出。

进阶用法

1.编译所有文件

有时需要对项目的所有源文件进行编译,使用如下命令:
npm run build

2.编译某一类型文件

比如需要编译所有的sass文件,可以使用如下命令:
npm run build -- -f _source/sass/*.sass

3.使用glob表达式匹配文件

-f选项支持glob表达式,使用引号括起即可,例如编译jade和sass可以使用如下命令:
npm run build -- -f '_source/**/*.{jade,sass}'

4.使用通道

如果使用git管理文件,需要编译git中已经修改的文件,可以使用如下命令:
git status -uno | awk '{print $2}' | npm run build -- -o
使用find查找sass进行编译,命令如下:
find _source -type f | grep *.sass | npm run build -- -o

小结

autocommand-cli项目最初的出发点是为了锻炼一下typescript的能力,经过半年的迭代,功能已经逐渐完善。命令行参数解析、文件改动侦听、http服务器功能都使用现成npm插件实现。前端的工具链不断完善,各种工具层出不穷,花大量时间造一个自己用起来的顺手的工具还是有点奢侈:)

巧用ie条件注释解决浏览兼容问题

在做web开发的时候,最头疼的就是处理各种浏览器兼容。尤其是ie低版本的兼容。于是各种 css hack层出不穷。类似 _ * \9 \0一类的,功能是实现的,却让本来写得很整齐的 css 代码变得乱糟糟的。其实用ie的条件注释就可以很简单的解决处理这些问题。

示例:

<!DOCTYPE html>
<html>
  <!--[if lt IE 7]><html class="ie6"><![endif]-->
  <head>
    <meta charset="utf-8">
    <title>css hack</title>
    <style>
      .test {height: 40px; background: blue;}
      .ie6 .test {background: red;}
    </style>
  </head>
  <body>
    <p class="test"></p>
  </body>
</html>

继续阅读