jquery开发 css 自动刷新预览 stylus编译

今天需要做一个简单的介绍展示页面,无需webpack这类的脚手架,装了两个包就能开始开发了。

环境需求:

  • 自动刷新
  • 编译css

使用两个包就可以了:
browsersync 监听变动 自动刷新页面
stylus 写css一直比较喜欢这个css预处理框架,因为简洁


安装browsersync

安装
npm install -g browser-sync

监听文件
browser-sync start --server --files "css/*.css"
browser-sync start --server --files "**/*.css, **/*.html"
browser-sync start --server --files "css/*.css, *.html"

动态网站
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
browser-sync start --proxy "Browsersync.cn" "css/*.css"

安装 stylus

npm install -g stylus

自动编辑
stylus -w css/style.styl -o css/

压缩
stylus --compress css/