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

#环境搭建(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,内容如下
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
:::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的主题