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
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客