window8.1本地配置SAE+CI+grunt环境

对于一个前端工作者来说，能够搭建一套属于自己的网站作为个人主页，不仅可以有一块属于自己的领地，也可以在简历中作为自己的一个作品展示。

我之前一直使用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编译、资源压缩、错误提示、实时监控等功能。有了它，我们可以把前端资源做流程化管理，再也不用手动处理了。

具体步骤如下：
1、安装nodejs
2、安装grunt

我是在主目录下新建了一个和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的。谢谢！※