Linner和WebStorm前端开发环境搭建

Love The Way You Lie 2022-08-18 11:31 225阅读 0赞

**Linner和WebStorm前端开发环境搭建**

注意：

1. Jdk1.6以上  
2. 数据库推荐用MySQL

以下是前端工厂开发环境搭建，主要用到Linner和WebStorm（推荐使用SublimeText 3）和jigglypuff。

# 1.Linner #

Linner是前端工程的开发所使用的编译打包工具，安装Linner之前，需要一些软件环境配置：

## 1.1 Linner所依赖的软件 ##

### 1.1.1 Ruby ###

Linner是基于Ruby开发的，所以需要Ruby环境

官网： [http://rubyinstaller.org/][http_rubyinstaller.org]

![Center][]

双击安装，需要选择“InstallTcl/Tk support”和“Addruby executables to your PATH”，可以安装到默认地址，例如安装到D:\\Ruby21-64目录下。

![Center 1][]

安装结束后，运行ruby -v显示版本号。如果正常显示Ruby版本号，表示安装成功。

如果没有正常显示ruby的版本号，则可以自行添加系统变量。

**rubyenv.bat**

SETRUBY_HOME=D:/ruby
    SET PATH=%PATH%;%RUBY_HOME%/bin
    SET RUBYOPT=rubygems

把以上代码复制到记事本，另存为rubyenv.bat，然后执行文件即可。

### 1.1.2RubyGems ###

RubyGems是后面安装DevKit所需要的。

官网：[http://rubygems.org/][http_rubygems.org]

![Center 2][]

把下载文件解压到一个临时目录，假设为F:/temp/rubygems-2.4.4，执行：

C:\> cd F:/temp/rubygems-2.4.4 
      F:\temp\rubygems-2.4.4> ruby setup.rb

然后通过 gem -v 验证安装是否成功。

注：

*  `如果使用rubygems进行安装时提示timeout，则将gems替换成最新版本(从 http://rubygems.org/pages/download 下载rubygems最新版本)`
 *  安装目录不能带有中文；如果执行 gem -v 提示错误，可以重启一遍电脑再执行。

### 1.1.3安装DevKit ###

DevKit是安装Linner用到的。

官网：[http://rubyinstaller.org/add-ons/devkit/][http_rubyinstaller.org_add-ons_devkit]

说明：[RubyInstaller Development Kit][]是在Windows环境下便于构建native的C/C++程序(例如RDiscout和RedCloth)的工具集。

![Center 3][]

双击运行，选择解压目标目录，例如D:\\devkit目录下，运行如下命令：

C:\> cd D:\devkit
 D:\devkit>ruby dk.rb init

![Center 4][]

`随后编辑该目录下生成的config.yml文件，在文件最后增加Ruby安装目录：`

下面这步非必须执行

D:\devkit> ruby dk.rb review   //可选

![Center 5][]

最后执行安装：

D:\devkit> ruby dk.rb install

## `1.2``安装Linner` ##

`执行安装`

D:\ gem install linner

**1.2.1 gem源**

由于linner安装实际上是从[rubygems.org][http_rubygems.org]获得的，而其被墙，所以，需要寻找国内的镜像进行安装，国内最好的是淘宝镜像：

更改源的方法：

D:\ gem sources --remove https://rubygems.org/ //删除官方源仓库地址
     D:\ gem sources -a http://ruby.taobao.org/ //增加taobao镜像仓库地址
     D:\ gem sources -l //显示本地保存的仓库地址
     D:\ gem install linner //继续安装

### 1.2.2 Q&A ###

如果安装linner过程中出现Exception:STATUS\_ACCESS\_VIOLATION这样的错误，则很有可能是安装的64为ruby、gems、DevKit不兼容的问题，请都换成32位的重新安装。

linner最新版本有可能会有错误，如出现错误，首先删除linner、sass两个文件夹，然后geminstall linner -v 0.6.6（或geminstall linner -v 0.6.7），将linner替换成0.6.6或0.6.7。

## 1.3 WDM ##

（运行linnerbuild时用到）

安装WDM

D:\ gem install wdm

### 1.4 Linner运行FAQ ###

如果Linnerwatch （用于监控前端工程文件变更，自动进行编译）命令运行产生报错。

修改ruby已安装目录下的command.rb文件，如C:\\Ruby21-x64\\lib\\ruby\\gems\\2.1.0\\gems\\linner-0.6.6\\lib\\linner\\command.rb，将文件中def watch下的watch\_for\_env注释掉。原因是系统兼容性问题。

# 2.WebStorm #

前端开发工具推荐用WebStorm。

官网：[http://www.jetbrains.com/webstorm/][http_www.jetbrains.com_webstorm]

![Center 6][]

![Center 7][]

# 3. jigglypuff #

jigglypuff是一个Web容器，可以方便的进行前端工程的部署验证

官网：[https://nodejs.org/en/][https_nodejs.org_en]

![Center 8][]

首先需要安装[node.js][]，安装完成后，运行：

D:\ npm install -g jigglypuff

安装成功后控制台最后显示类似：

jigglypuff@0.0.15 /.../nvm/v0.11.13/lib/node_modules/jigglypuff
    ├── node-watch@0.3.4
    ├── commander@2.5.1
    ├── async@0.2.10
    ├── redis@0.10.3
    ├── lodash@2.4.1
    ├── tracer@0.6.2 (dateformat@1.0.2-1.2.3, tinytim@0.1.1, colors@1.0.3)
    ├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
    └── express@4.10.6 (utils-merge@1.0.0, merge-descriptors@0.0.2, fresh@0.2.4, cookie@0.1.2, escape-html@1.0.1, range-parser@1.0.2, cookie-signature@1.0.5, finalhandler@0.3.2, vary@1.0.0, media-typer@0.3.0, parseurl@1.3.0, methods@1.1.0, serve-static@1.7.2, content-disposition@0.5.0, path-to-regexp@0.1.3, depd@1.0.0, qs@2.3.3, etag@1.5.1, on-finished@2.1.1, debug@2.1.1, send@0.10.1, proxy-addr@1.0.4, type-is@1.5.5, accepts@1.1.4)

4.Nginx

由Nginx进行转发以及静态资源配置.

官网：[http://nginx.org/][http_nginx.org]

![Center 9][]

nginx-1.0.15.rar

[nginx-1.6.1.tar.gz][]

服务器，用来加载页面工程中用到的静态资源文件，例如js、css、image等，需要修改附件中的nginx-1.0.15/conf/nginx.conf文件，将“rootE:/WorkSpace/showcase/public;”替换成本地页面工程路径，例如替换成“root C:/showcase/public”，表示页面工程编译后位置为C:/showcase/public.

如果上述安装linner不成功建议使用直接安装策略：提供已经安装好环境的机器上直接将linner相关的文件和文件夹打成包，在自己本机上解压压缩包按照环境配置文档配置环境变量等完成安装.

# Nginx开发从入门到精通 #

[http://tengine.taobao.org/book/][http_tengine.taobao.org_book]

**热前端 前端开发阅读分享网站**

[http://www.reqianduan.com/][http_www.reqianduan.com]

**Handlebars**

[http://handlebarsjs.com/][http_handlebarsjs.com]

**CoffeeScript**

[http://coffee-script.org/\#try:alert%20%22Hello%20CoffeeScript!%22%0A%0Asda][http_coffee-script.org_try_alert_20_22Hello_20CoffeeScript_22_0A_0Asda]

[http_rubyinstaller.org]: http://rubyinstaller.org/
[Center]: /images/20220731/fa1b68d6bac3466d8504e92fc3f2babf.png
[Center 1]: /images/20220731/99005fc6063c4b6a8f8ba35d51a821d3.png
[http_rubygems.org]: http://rubygems.org/
[Center 2]: /images/20220731/0d5c00d446a7417da73cb5d2b56d9f94.png
[http_rubyinstaller.org_add-ons_devkit]: http://rubyinstaller.org/add-ons/devkit/
[RubyInstaller Development Kit]: http://rubyinstaller.org/downloads/
[Center 3]: /images/20220731/90edc7b63a094ff48fb344411a45be89.png
[Center 4]: /images/20220731/cd32612b0ed44c66a3acd158cf5cc67f.png
[Center 5]: /images/20220731/a1560be9efa2446698516f4e9f86a245.png
[http_www.jetbrains.com_webstorm]: http://www.jetbrains.com/webstorm/
[Center 6]: /images/20220731/f182a9c6f31847ccbd22bd0d87b89d20.png
[Center 7]: /images/20220731/115dd2600c314184bc53fed939a0d3a4.png
[https_nodejs.org_en]: https://nodejs.org/en/
[Center 8]: /images/20220731/4e7cd5486299466884ebd60de331a9bd.png
[node.js]: ftp://hop@10.135.17.147/software/hop4.0/windows/node.exe
[http_nginx.org]: http://nginx.org/
[Center 9]: /images/20220731/4ba1afd63c0f40d79bfc140c06d7c6e1.png
[nginx-1.6.1.tar.gz]: ftp://10.135.17.147/software/hop4.0/nginx-1.6.1.tar.gz
[http_tengine.taobao.org_book]: http://tengine.taobao.org/book/
[http_www.reqianduan.com]: http://www.reqianduan.com/
[http_handlebarsjs.com]: http://handlebarsjs.com/
[http_coffee-script.org_try_alert_20_22Hello_20CoffeeScript_22_0A_0Asda]: http://coffee-script.org/#try:alert%20%22Hello%20CoffeeScript!%22%0A%0Asda