使用 vagrant 作为前端开发环境

发表于

Vagrant是一个基于Ruby的工具，用于创建和部署虚拟化开发环境。它 使用Oracle的开源VirtualBox虚拟化系统，使用 Chef创建自动化虚拟环境。

比Docker好一点的地方就是配置方便，支持windowsXP、7等等

作为一条前端狗，经常会需要用过一些通用的前端工具，在多个办公平台中使用，以下就是本人的一些使用笔记

vargant 使用 ubuntu/trusty64 系统包

1
2
vagrant init ubuntu/trusty64; 
vagrant up --provider virtualbox

安装nodejs开发环境

使用git-bash进入vargant目录，安装npm

1
2
3
4
5
6
7
apt-get install npm
// 安装`n`版本安装模块
npm install -g n
// 使用`n`安装`6.10.0`版`nodejs`
n 6.10.0
// 安装`npm`淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装git工具

1
apt-get install git-core

vagrant常用命令

1
2
3
4
5
6
7
8
9
10
11
$ vagrant init  # 初始化
$ vagrant up  # 启动虚拟机
$ vagrant halt  # 关闭虚拟机
$ vagrant reload  # 重启虚拟机
$ vagrant ssh  # SSH 至虚拟机
$ vagrant status  # 查看虚拟机运行状态
$ vagrant destroy  # 销毁当前虚拟机
$ vagrant package  # 打包
$ vagrant box add lee box/package.box  // 添加 package.box 镜像并命名为 lee
$ cd vagrant  // 切换到项目目录
$ vagrant init lee  // 用 lee 镜像初始化。

网络端口映射

在 Vagrantfile 中更改

1
2
config.vm.network "forwarded_port", guest: 8080, host: 8088
config.vm.network "forwarded_port", guest: 3000, host: 8083

同步目录

vagrant默认/vagrant 为当前目录

服务器

安装redis

1
apt-get install redis-server

进入 redis 命令行

1
redis-cli

安装sqlite3

1
apt-get install sqlite3

安装mongoddb

1
apt-get install mongodb

前端模块

安装sass 和 compass

1
2
gem instll sass
apt-get install ruby-compass

npm其他模块

  • cnpm
  • node-tinypng
    • usage: tinypng *.png(or folder)
  • bower
  • babel-cli
    • usage: babel example.js -o compiled.js
  • react-native
  • React UI构建工具 react-storybook
    • usage: npm i -g getstorybook
  • pm2
  • gulp
  • create-react-app
  • jsmonkey
  • less
    • usage: lessc styles.less > styles.css
  • serve-here
    • usage: here [-p 8888][-S][here -d directory][-w 3]
  • pushstate-server
    • usage: pushstate-server [directory] [port]
  • yarn
    • usage: 设置国内镜像 yarn config set registry https://registry.npm.taobao.org
  • webpack
  • postcss-cli
  • autoprefixer
    • usage: postcss --use autoprefixer *.css -d build/
  • gatsby
  • requirejs (r.js)
  • browserify
  • express