backbone框架下基于gulp和npm的环境构建

web环境构建需要一些基本的构建工具,这里的介绍基于gulp环境构建完成开始到编译运行完成的过程,接下来进行每一步的逐步讲解直到整个环境搭建起来成功。

1.建议首先安装iterm2,下载之后直接安装即可

2.打开iterm2, 输入下面指令安装oh-my-zsh

1
curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

安装到这一步就已经有了iterm2的基本配置,包括命令行提示和基本的配色等,当然你如果想要更详细的去配置这里推荐一处别人写过的详细教程iTerm 2 && Oh My Zsh

3.接下来就正式进入环境构建的步骤了,Node.js的包管理器npm,是全球最大的开源库生态系统。它是我们的项目最基本的构建依赖,下载直接安装即可

4.由于我们的项目是基于Ruby Rails构建的打包环境,所以这里我们也需要安装ruby,建议版本2.3.0及以上,安装ruby可以通过Homebrew或者Rvm,这里建议在你的电脑环境里面将这两种管理工具都进行集成,这里主要介绍rvm对于ruby的管理

1
2
gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
\curl -sSL https://get.rvm.io | bash -s stable

接下来安装一个ruby版本

1
rvm install 2.3.0 --disable-binary

查看ruby镜像

1
sudo gem sources -l

删除ruby镜像

1
sudo gem sources -r https://rubygems.org/

添加淘宝镜像

1
sudo gem sources -a https://ruby.taobao.org

5.安装bundler,它是管理Gem相依性的工具,同时也是基于rails打包资源文件的依赖

1
sudo gem install bundler

6.安装rails

1
sudo gem install rails

7.安装npm,npm其实是Node.js的包管理工具

1
sudo npm install npm -g

使用淘宝镜像的命令:

1
cnpm install npm -g

8.前面的基本工具和依赖已经安装和构建的差不多了,接下来就是进行入项目基于gulp进行最后的步骤

1
2
3
npm install bundle -g
npm install
bower install

到这里所有的步骤差不多完成了,接下来或许会遇到项目跑起来报错的情况,这里可以将node_modules文件删除,然后重新执行 npm install 即可。