对于一个前端工作者来说，能够搭建一套属于自己的网站作为个人主页，不仅可以有一块属于自己的领地，也可以在简历中作为自己的一个作品展示。
我之前一直使用SAE（新浪云服务）作为微信公众号服务器，最近想把对接的网站改版，在朋友的推荐下使用了CodeIgniter for SAE 框架，前端资源使用Grunt管理。经过几天摸索，我成功搭建了本地SAE PHP环境，记录一下具体步骤做个备忘，同时也分享给大家，希望有相同需求的人少走弯路。
SAE本地环境配置
playwithsae能够在本地开发环境集成Apache、PHP、Redis等服务，又用PHP文件模拟SAE的Storage、KVDB、FetchURL等服务。它没有可视化界面，只能用命令行操作，具体安装教程请点击这里。
配置完成并新建应用版本1之后把CodeIgniter for SAE下载下来解压拷贝到wwwroot中去。文件目录如下：
配置好的文件目录
此时我们在本地访问，发现有错误提示：
Class 'SaeKV' not found in E:\saesdk\wwwroot\appname\1\listsaekv.php
只要把application/config/config.php最后的一句$config['sae_output_cache'] = 'kvdb'注释即可。
把这一句代码注释
有几点值得注意：
- 管理员权限 ：要以管理员身份运行，不然会拒绝访问。
- 不提供mysql环境 ：该软件没有集成mysql，需要自己配置。
- 命名冲突 ：创建新应用时应用名不要和线上应用名一样，不然只能访问本地应用了。
grunt环境配置
简单来说，grunt是一个强大的前端资源管理工具，可以实现less编译、资源压缩、错误提示、实时监控等功能。有了它，我们可以把前端资源做流程化管理，再也不用手动处理了。
我是在主目录下新建了一个和application同级的frontend文件夹来放前端资源文件，如图：
前端资源文件夹
这里的文件作用如下：
- bower_store ：以bower方式更新的js插件或css库。
- dest ：目的文件夹，所有最终引用的js、css、图片资源都在这里。
- node_modules ：安装grunt时生成的文件。
- src ：自己写的js或less文件。
- .bowerrc ：配置bower文件路径时需要的文件。
- bower.json ：bower更新文件时的记录。
- Gruntfile ：grunt注册任务主要文件。
- package.json ：存储npm依赖项的文件。
- tasks.config.js ：主要任务模块配置。
这里的一些第三方插件（如zepto.js）管理使用bower，它的教程看这里。默认bower创建的文件目录是bower_components，但是我们可以修改它，修改教程参考bower使用入门。
有几点值得注意：
- .bowerrc不能直接创建 ：windows不允许创建只有后缀名的文件，所要用命令行创建该文件，进入该目录跑一下：type null > .bowerrc即可，参见这里。
- bower依赖git环境 ：你需要安装msysgit，这样就不怕了，参见bower使用入门。
好啦，接下来你就可以在本地写你的代码，实时预览页面了。但是记得使用svn提交代码时，先把frontend里面除了dest的所有文件忽略，具体实现参考这里。
教程只提供了基本步骤，每一步又有很多内容，建议不太熟悉的人把这里涉及的一些内容都仔细研究一下，后面就容易很多了。如果有问题也欢迎留言交流。
如果没用过SAE，可以点这里试用。
※本文系原创文章，转载请务必注明：转载自leadream的简书。谢谢！※
网友评论