使用 vagrant 作为前端开发环境

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

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

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

vargant 使用 ubuntu/trusty64 系统包

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

安装nodejs开发环境

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

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工具

apt-get install git-core

vagrant常用命令

$ 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 中更改

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

同步目录

vagrant默认/vagrant 为当前目录

服务器

安装redis

apt-get install redis-server

进入 redis 命令行

redis-cli

安装sqlite3

apt-get install sqlite3

安装mongoddb

apt-get install mongodb

前端模块

安装sasscompass

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

   转载规则


《使用 vagrant 作为前端开发环境》 Sterne Lee 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
arraybuffer处理pictures arraybuffer处理pictures
利用 arraybuffer 来处理图片,包含图片的路径名称与数据,并把多张图片合并一个 arraybuffer 并生成单张图片,以及图片的解析。 前提了解之前看到的一个H5叫四大导师拯救麦渣 特别吸引我,使用 canvas 配合 xm
2017-05-02 Sterne Lee
下一篇 
react-native环境开发Ubuntu篇 react-native环境开发Ubuntu篇
由于Facebook的开发工程师都是用MacOS的,所以这React native的开发环境还是MacOS最好,其次是Linux,由于windows坑太多,这次的尝试是利用Ubuntu开发React-Native初实践 ##Ubuntu
2017-03-25
  目录