edx前端定制开发工作流

这篇文章重点理一下，前端开发的工作流，以便前端开发上手

#环境搭建（devstack） 如果有以下有链接无法打开，应该是网络的问题，请保证能正常访问国外网络（你懂的）

###软件安装

• 安装VirtualBox，版本 >= 4.3.12
• 安装Vagrant，版本>= 1.6.5

###edx box下载 下载链接：vagrant-images_20151221-dogwood-fullstack-rc2.box，下载完毕后，得到文件：vagrant-images_20151221-dogwood-fullstack-rc2.box

###box文件是什么鬼 之前忘了对背景知识做些介绍啦

box文件是Vagrant使用的image（镜像）,用于在VirtualBox里构建虚拟操作系统。我们知道操作系统的镜像一般是iso文件，好比windows7的镜像文件windows_7_ultimate_x64.iso，所以可以把box看做相似的东西。

我们知道VirtualBox是一款开源虚拟机软件，那么Vagrant又是什么呢，Vagrant可以看做是个配置工具，用于帮助创建、配置、管理虚拟机，帮助我们快速搭建开发环境，有了Vagrant，我们就不需要手动操作VirtualBox，只需要建立一个Vagrantfile，写好配置脚本就行！

背景知识介绍到这里就差不多啦，如果你想进一步了解，可以自己去google搜索Vagrant介绍、VirtualBox介绍

###构建环境

• 在命令行里执行：vagrant box add fullstack vagrant-images_20151221-dogwood-fullstack-rc2.box
• 在本地新建文件Vagrantfile,内容如下

:::text
Vagrant.require_version ">= 1.5.3"

VAGRANTFILE_API_VERSION = "2"

MEMORY = 4096
CPU_COUNT = 2


Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|

  # Creates an edX fullstack VM from an official release
  config.vm.box     = "fullstack"

  config.vm.synced_folder  ".", "/vagrant", disabled: true
  config.ssh.insert_key = true

  config.vm.network :private_network, ip: "192.168.33.10"
  config.hostsupdater.aliases = ["preview.localhost"]

  config.vm.provider :virtualbox do |vb|
    vb.customize ["modifyvm", :id, "--memory", MEMORY.to_s]
    vb.customize ["modifyvm", :id, "--cpus", CPU_COUNT.to_s]

    # Allow DNS to work for Ubuntu 12.10 host
    # http://askubuntu.com/questions/238040/how-do-i-fix-name-service-for-vagrant-client
    vb.customize ["modifyvm", :id, "--natdnshostresolver1", "on"]
  end

end

• 在文件Vagrantfile所在目录下，执行vagrant up

###看看成果 以上步骤顺利完成后，访问192.168.33.10

之后每次只需要进入到Vagrantfile文件所在目录，执行vagrant up(启动虚拟机）、vagrant halt(关闭虚拟机）就行啦

#开发工作流 参考我之前写的edx前端定制开发相关中use map to debug scss之后的部分

当然你也可以参考官方文档：edX Developer Stack

如果你不想跳来跳去，我把重点都列出来：

###工作流核心

• 搭建开发环境(参考上文)
• 由于sass需要编译，所以你需要简单地使用命令行（很简单的）：使用putty登录服务器,下边列出一些常用命令

常用命令如下:

• sudo /edx/bin/supervisorctl stop edxapp: （关闭无用的服务，提高开发速度）
• sudo /edx/bin/python.edxapp /edx/app/edxapp/edx-platform/manage.py lms runserver 0.0.0.0:5000 --settings devstack (启用开发服务器，记得将5000端口映射出去，注意这是一个常驻进程，需要一直占用这个窗口)

•  sudo -H -u edxapp bash
   source /edx/app/edxapp/edxapp_env
   cd /edx/app/edxapp/edx-platform
   paver update_assets lms --debug --settings=aws
   # (生产map文件，方便调试scss)
  

•  sudo -H -u edxapp bash
   source /edx/app/edxapp/edxapp_env
   cd /edx/app/edxapp/edx-platform
   paver update_assets lms --debug --settings=aws --watch
   #（实时观测scss文件的变化，每当变化自动编译为css，这是一个常驻进程，需要一直占用这个窗口）
  

• 在chrome里调试（参考Using source maps with Sass 3.3）

• 使用filezilla修改文件（filezilla可以在设置里指定你喜欢的编辑器作为默认编辑器），修改完成后，ctrl-s保存就会同步到服务器

• 静态文件位于目录：edx-platform/lms/static/sass/，开发是可以直接修改即可，如果能使用git来管理变更则最好

#附录 当前open edx的前端排版主要用到Neat。.Neat是一个语义化的轻量级布局网格框架，构建在 Sass 和 Bourbon之上

example看这里：example

文档看这里:Neat-docs

open edx之后可能会有基于Susy和bootstrap的主题