grafana官方地址： https://github.com/grafana/grafanacss
開發文檔：http://docs.grafana.org/project/building_from_source/ html
grafana官方的readme文檔中也有開發文檔，可是沒有打包的過程，開發文檔中有。前端
按照官方的文檔的順序：node
一. 環境準備：webpack
mac下打包的話，不能在centos下運行，只能在centos下打包。git
因此我在mac下開發，centos下打包。github
固然，也能夠在window下開發，把生成好的build文件夾和配置文件替換一下，也是能夠的web
須要安裝go, nodejs等npm
提早把GOPATH設置好。json
二.構建後端
go get github.com/grafana/grafana cd $GOPATH/src/github.com/grafana/grafana go run build.go setup go run build.go build
第一句go get github.com/grafana/grafana：
把源碼下載到$GOPATH/src/github.com/grafana/grafana路徑下，因此GOPATH要設置好
第三句：go run build.go setup，執行build.go文件的setup:咱們看一下它裏的操做：
第四句：go run build.go build，執行build：
也就是執行這兩個命令：
三. 構建前端：
npm install -g yarn yarn install --pure-lockfile yarn watch
全局安裝yarn
經過yarn進行依賴包的安裝
下面是幾種yarn install的區別：也能夠查看文檔：https://yarnpkg.com/lang/zh-hans/docs/cli/install/
yarn install //安裝package.json裏全部包，並將包及它的全部依賴項保存進yarn.lock yarn install --flat //安裝一個包的單一版本 yarn install --force //強制從新下載全部包 yarn install --production //只安裝dependencies裏的包 yarn install --no-lockfile //不讀取或生成yarn.lock yarn install --pure-lockfile //不生成yarn.lock
yarn watch就是調用了npm中定義的腳本：
這時，若是咱們修改前端的文件，會看到有控制檯有更新了。
爲了看到效果，咱們能夠運行一下
./bin/<os>-<architecture>/grafana-server
控制檯的輸出會告訴咱們，打開瀏覽器： http://localhost:3000
可是我發現，若是咱們修改了前端的文件，雖然webpack監控到了文件修改，可是頁面並無自動更新，手動刷新一下也不行，
不知道爲何了，只能從新運行上述命令，再刷新頁面才能夠看到效果，有知道的同窗但願能夠指導一下。
文檔中了若是是開發模塊下能夠安裝：go get github.com/Unknwon/bra
運行：bra run，但在我這裏不起做用，報bra不識別命令。
雖然有一點問題，可是咱們能自定義開發：
咱們的要求是修改登陸頁：
它對應的css文件：
開發完成，接下來，就是要打包了：
執行命令：go run build.go build package
執行成功後會在dis目錄下生成壓縮文件：
或者能夠生成rpm文件：
執行命令：
go run build.go pkg-rpm
安裝過程會報fpm 不是可執行的命令
須要手動安裝fpm
gem install fpm
安裝過程報沒法鏈接ssl ruby的一個地址，就是那個地址應該是被牆了，
添加一個阿里雲的地址：
gem sources -a http://mirrors.aliyun.com/rubygems/ // 移除原生的ruby倉庫 gem sources --remove http://rubygems.org/ // 再次執行安裝便可
上述命令會在 grafana/dist目錄下面生成rpm結尾的文件，即爲rpm包
若是在構建匱乏打包過程當中遇到報錯，如類型轉換問題，依賴包問題，那就把node_modules文件更刪除，從新來遍，通常能夠解決問題，由於源碼確定沒有問題
若是想要修改title的話，能夠修改index.templat.html文件 和config.ts文件中的配置window_title_prefix
const defaults = { datasources: {}, windowTitlePrefix: 'Grafana - ', panels: {}, newPanelTitle: 'Panel Title', playlist_timespan: '1m', unsaved_changes_warning: true, appSubUrl: '', buildInfo: { version: 'v1.0', commit: '1', env: 'production', isEnterprise: false, }, }; _.extend(this, defaults, options);
css文件存儲在下列文件中：
pages中對應着各個頁面的css文件
dark主題和light主題的顏色配置分別是_variables.*.scss文件中