grunt編譯
『壹』 怎麼在github上編譯 apache zeppelin
用於做數據分析和可視化
一、二進制安裝
1)下載二進制包
wget http://mirrors.tuna.tsinghua.e.cn/apache/incubator/zeppelin/0.5.6-incubating/zeppelin-0.5.6-incubating-bin-all.tgz
2)解壓縮
tar -xzvf zeppelin-0.5.6-incubating-bin-all.tgz
cd zeppelin-0.5.6-incubating-bin-all
bin/zeppelin-daemon.sh start
註：默認埠是8080，若此埠被佔用，到conf下
cp zeppelin-site.xml.template zeppelin-site.xml
vim zeppelin-site.xml
<property>
<name>zeppelin.server.addr</name>
<value>172.16.1.29</value>
<description>Server address</description>
</property>
<property>
<name>zeppelin.server.port</name>
<value>8080</value>
<description>Server port.</description>
</property>
修改zeppelin.server.port埠，zeppelin.server.addr默認是0.0.0.0可以不修改，也可以修改成本機ip（雲伺服器一定要ip addr看一下本機的ip，而不是綁定的外網ip），java版本1.7。
訪問Zeppelin
localhost:8080 訪問到zepplin主頁。
註：1.主界面默認埠為8080，若此埠被佔用，則啟動會出錯。可以到conf目錄下
[root@public_view_databank conf]# cp zeppelin-site.xml.template zeppelin-site.xml
修改其中的參數
<property>
<name>zeppelin.server.addr</name>
<value>0.0.0.0</value>
<description>Server address</description>
</property>
<property>
<name>zeppelin.server.port</name>
<value>9090</value>
<description>Server port.</description>
</property>
修改zeppelin.server.port
Zeppelin.server.addr可以默認0.0.0.0也可以修改成本地ip
二、源碼安裝
1)下載源碼包
Zeppelin 0.5.6-incubating:
wget http://mirror.bit.e.cn/apache/incubator/zeppelin/0.5.6-incubating/zeppelin-0.5.6-incubating.tgz
Zeppelin 0.6.0-SNAPSHOT:
git clone https://github.com/apache/zeppelin.git
2)配置環境
# Requirements
+ Git
+ Java 1.7
+ Tested on Mac OSX, Ubuntu 14.X, CentOS 6.X, Windows 7 Pro SP1
+ Maven (if you want to build from the source code)
+ Node.js Package Manager (npm, downloaded by Maven ring build phase)
# 編譯環境構建
## git install
[root@gitlab-machine ~]# git version
git version 1.7.1
## install jdk
[root@gitlab-machine~]#wget http://download.oracle.com/otn-pub/java/jdk/7u79-b15/jdk-7u79-linux-x64.tar.gz
[root@gitlab-machine ~]# tar -zxf jdk-7u79-linux-x64.tar.gz -C /opt/
[root@gitlab-machine ~]# cd /opt/
[root@gitlab-machine opt]# ln -s jdk1.7.0_79 jdk
[root@gitlab-machine opt]# vim ~/.bash_profile 追加
export JAVA_HOME=/opt/jdk
export PATH=.:$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
[root@gitlab-machine opt]# source ~/.bash_profile
[root@gitlab-machine opt]# java -version
java version "1.7.0_79"
Java(TM) SE Runtime Environment (build 1.7.0_79-b15)
Java HotSpot(TM) 64-Bit Server VM (build 24.79-b02, mixed mode)
## install maven
[root@gitlab-machineopt]#wget http://www.eu.apache.org/dist/maven/maven-3/3.3.3/binaries/apache-maven-3.3.3-bin.tar.gz
[root@gitlab-machine opt]# tar -zxf apache-maven-3.3.3-bin.tar.gz
[root@gitlab-machine opt]# ln -s apache-maven-3.3.3 maven
[root@gitlab-machine opt]# echo "export MAVEN_HOME=/opt/maven" >> ~/.bash_profile
[root@gitlab-machineopt]# echo "export PATH=$MAVEN_HOME/bin:$PATH:$HOME/bin" >> ~/.bash_profile
[root@gitlab-machine opt]# source ~/.bash_profile
[root@gitlab-machine opt]# mvn -version
Apache Maven 3.3.3 (; 2015-04-22T19:57:37+08:00)
Maven home: /opt/maven
Java version: 1.7.0_79, vendor: Oracle Corporation
Java home: /opt/jdk1.7.0_79/jre
Default locale: en_US, platform encoding: UTF-8
OS name: "linux", version: "2.6.32-504.el6.x86_64", arch: "amd64", family: "unix"
## install node.js
yum install http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
yum repolist
[root@gitlab-machine opt]# yum search nodejs npm|wc -l
21
[root@gitlab-machine opt]# sudo yum install nodejs npm --enablerepo=epel
[root@gitlab-machine opt]# node -v
v0.10.42
[root@gitlab-machine opt]# npm -v
1.3.6
[root@gitlab-machine opt]# cd /data/
## build zeppline
[root@gitlab-machine opt]# cd /data/
[root@gitlab-machinedata]#wget https://github.com/apache/zeppelin/archive/v0.5.6.zip
[root@gitlab-machine data]# unzip v0.5.6.zip
[root@gitlab-machine data]# cd zeppelin-0.5.6/
[root@gitlab-machine
zeppelin-0.5.6]# nohup mvn clean package -Pspark-1.6 -Phadoop-2.6
-Pyarn -Ppyspark -DskipTests > nohup.out &
[root@gitlab-machine zeppelin-0.5.6]# jobs
[1]+ Running nohup mvn clean package -Pspark-1.6 -Phadoop-2.6 -Pyarn -Ppyspark -DskipTests > nohup.out &
參考地址：https://github.com/apache/zeppelin/
[root@gitlab-machine zeppelin-0.5.6]# tail -f nohup.out
1.Exception in thread "main" Exception: java.lang.OutOfMemoryError thrown
解決辦法：
export MAVEN_OPTS="-Xmx2g -XX:MaxPermSize=512M -XX:ReservedCodeCacheSize=512m"
2.[INFO] Zeppelin: Elasticsearch interpreter ................ SUCCESS [15:56 min]
[INFO] Zeppelin: web Application .......................... FAILURE [03:51 min]
[INFO] Zeppelin: Server ................................... SKIPPED
[INFO] Zeppelin: Packaging distribution ................... SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 20:57 min
[INFO] Finished at: 2016-06-08T02:19:40-04:00
[INFO] Final Memory: 93M/957M
[INFO] ------------------------------------------------------------------------
[ERROR]
Failed to execute goal
com.github.eirslett:frontend-maven-plugin:0.0.23:npm (npm install) on
project zeppelin-web: Failed to run task: 'npm install --color=false'
failed. (error code 126) -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
[ERROR]
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR] mvn <goals> -rf :zeppelin-web
網上查找修改zeppelin-web下的pom.xml
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
</execution>
<execution>
<id>bower install</id>
<goals>
<goal>bower</goal>
</goals>
<configuration>
<arguments>--allow-root install</arguments>
</configuration>
</execution>
<execution>
<id>grunt build</id>
<goals>
<goal>grunt</goal>
</goals>
<configuration>
<arguments>--no-color --force</arguments>
</configuration>
</execution>
</executions>
</plugin>
[root@host-172-16-1-80 zeppelin-web]# npm install
[root@host-172-16-1-80 zeppelin-web]# bower –alow-root install
[root@host-172-16-1-80 zeppelin-web]# grunt –force
[root@host-172-16-1-80 zeppelin-web]# mvn install -DskipTests
啟動zeppelin
[root@bigdata-redhadoop-1 src]# cd zeppelin-0.5.6-incubating
[root@bigdata-redhadoop-1 zeppelin-0.5.6-incubating]# bin/zeppelin-daemon.sh start
Log dir doesn't exist, create /opt/bigcrh/zeppelin/src/zeppelin-0.5.6-incubating/logs
Pid dir doesn't exist, create /opt/bigcrh/zeppelin/src/zeppelin-0.5.6-incubating/run
Zeppelin start [ OK ]
[root@public_view_databank ~]# jps
18710 ZeppelinServer
『貳』 如何編譯bootstrap-4.0.0源碼
因為bootstrap 4.0.0將放棄less轉用sass來處理css，所以開發環境需要裝SASS插件（必須先安裝Ruby）。
安裝Ruby，略。
安裝SASS
gem install sass
安裝Node.js，略。
安裝grunt
npm install -g grunt
安裝node-sass，大多數環境正常。安裝不成功的話可以看後面的手動編譯css部分。
npm install -g node-sass
grunt打包，加強制參數
grunt --force
在dist目錄下編譯出下列文件
|-- dist
|-- css
|-- bootstrap.css
|-- bootstrap.css.map
|-- bootstrap.min.css
|-- bootstrap.min.css.map
|-- js
|-- bootstrap.js
|-- bootstrap.min.js
|-- npm.js
|-- umd
|-- alert.js
|-- button.js
|-- carousel.js
|-- collapse.js
|-- dropdown.js
|-- modal.js
|-- popover.js
|-- scrollspy.js
|-- tab.js
|-- tooltip.js
|-- util.js
scsslint檢查時可能會報錯，可以將bundleExcc關掉，不用本地的
//You can choose to have your gems installed via bundler and if so, set this option to true to use the local gems.
scsslint: {
options: {
bundleExec: false,
config: 'scss/.scss-lint.yml',
reporterOutput: null
},
src: ['scss/*.scss', '!scss/_normalize.scss']
}
手動編譯css，進入scss目錄會看到大量的scss文件。主要關注下面幾個
|-- scss
|-- ...
|-- bootstrap.scss
|-- bootstrap-flex.scss
|-- bootstrap-grid.scss
|-- bootstrap-reboot.scss
|-- ...
可以用sass命令直接生成相應的css文件和map文件
sass bootstrap.scss bootstrap.css
sass bootstrap-flex.scss bootstrap-flex.css
sass bootstrap-grid.scss bootstrap-grid.css
sass bootstrap-reboot.scss bootstrap-reboot.css
『叄』 less編譯後的css順序怎麼調整
css文件進行壓縮變行 我用grunt自化構建工具less文件進行監控要less文件保存進行css文件轉換並css進行文件壓
『肆』 前端工程師都有用哪些比較靠譜的小工具
作為曾經的web前端工程師，來答一發。
jsonView Chrome插件
sessionBox是一塊可以讓你隨意切換你的session的Chrome插件~用戶還可以給不同的session設置各種顏色，方便地標識session；SessionBox只對那些把網頁的狀態保存到session中的才有效果。順便提供一下SessionBox的官網：https://sessionbox.io ；對於起那段同學來說，切換Sesssion幾乎成了必不可少的一項工作，如果你使用了sessionbox，將會大大的減輕你的工作量，同時這個插件對於後端開發的RD同學也將是大大的幫助。
目前介紹了以上四款工具，建議題主可以嘗試一下，都是非常不錯的工具，雖然我現在不在是前端，但是對於除了webstorm之外的三款工具我都是經常會使用的；至於我為什麼不使用webstorm是有原因的，因為我現在已經是作為一枚後端RD的存在，目前在公司開發機上只能用vim開發~~
『伍』 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
閱讀本文章之前，相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了，那麼他們之間究竟有什麼區別呢？
gulp文檔上面有這么一句話 ，也就是說 gulp是一個自動化構建工具；
gulp的一些功能如下(包括但不限於):
其實Webpack和另外兩個並沒有太多的可比性
傻瓜式起步照搬官網文檔
1.安裝
2.在項目根目錄下創建一個名為 gulpfile.js 的文件：
3.運行 gulp：
默認的名為 default 的任務（task）將會被運行，在這里，這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔
新建一個項目gulp-test
環境:
1.新建文件以下文件如下
其中 gulpfile.js 是我們gulp的配置文件，啟動gulp默認會找個這個文件並執行；
2.接下來安裝依賴
一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了
安裝依賴
這里頁面實時刷新只講這個 gulp-connect ，其他詳情可以參照 Browsersync 和文章 gulp-livereload
安裝完依賴後配置gulpfile.js如下:
大概講解一下gulpfile.js:
gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務（task）
如上我們定義了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任務，其中:
my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下；
my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下；
html 是將 符合所提供的匹配模式的html進行監聽，如果有變化則connect.reload()
clean 是如果任務重新啟動時 刪除舊文件；
default gulp默認啟動的任務
watch gulp的api 監視文件，並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。
server 依賴gulp-connect啟動一個伺服器
配置完gulpfile.js之後，我們給js和css及html加點東西:
首先js/helloworld.js
css/index.scss
index.html
運行gulp
瀏覽器效果:
接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:
按保存之後，終端給我們報了一個錯:
查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法，有問題解決問題，es6=>es5
解決方案:
安裝gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
運行
依然報上面的錯；找了一些原因發現，雖然安裝了相關依賴，卻沒有配置.babelrc文件，即babel還沒轉化es6
根目錄添加.babelrc文件
重新運行:
查看dist下的js文件
改變helloworld.js檢查頁面是否刷新
保存，頁面的天空藍換成你們喜歡的yellow顏色
修改index.scss 查看是否會刷新頁面
最後修改index.html 查看是否會刷新頁面
今天主要學習了gulp的簡單項目搭建及實時更新配置；其實gulp類似於grunt的弱化版，但更簡單好用，只是插件會少一些，目前主流的項目搭建工具主要是webpack，但依然有不少項目還用著gulp或者grunt
擴展:
下面還有一些樓主的學習筆記:
有興趣的可以多多交流@ 樓主博客