说明
开发环境：windows 7
laravel版本： 5+
IDE： phpstorm
想从安装步骤的点滴找问题的所在
从这里说起
按照 core/readme.md 跑了一遍，发现很多不明白的地方。 问题有几个： gulp watch 之后
- 3000 端口和 3001 端口是什么关系？
- gulpfile.php 文件中的 proxy: ‘localhost:8000’ 这个 8000 端口又是什么？
- nginx 配置的 8001 端口又算什么？
- 3000 为什么访问不了？ 3001 可以，8001 可以，8000 不可以，为什么？
唯一熟悉的是 8001 端口，这是对外访问服务器的端口。但是端口众多，以为 8001 被其他端口代理访问了。在 gulp watch 之前就有好多命令不知其然，比如 npm 、 bower 、 gulp 的关系。这些命令虽然都磕磕绊绊能执行完，但并不知道他们在做什么，只有控制台不断滚动的 information 和最后的停止没有报错就完事。这些问题和疑问交织在一起很烦人，还是有理一理的必要。
npm
npm 全称 Node Package Manager 。 npm 是伴随 nodejs 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来， npm 官网经过一次改版，打出的口号是，javascript 的包管理器。所以，其已经不在局限于是 nodejs 。所以 nodejs 是一个前后全能型的 web 框架。摘自《bower 和 npm 的区别》
使用 npm 管理项目，一般工程目录下会有一个名为 package.json 的 json 格式文件,该文件定义了工程的名称、作者、仓库地址、开发时依赖的模块，该工程的使用版本等等。
gulp 和 bower
bower 用来下载项目依赖的 css 和 js，算是前端的包管理工具吧。
gulp 用于前端项目自动化工作流，如监控程序文件变化，检查 js 代码正确性，压缩 js ，源码转换到发布目录，启动 web 服务测试等等。一種常見應用是讓 Gulp 透過 watch 監看目錄，一旦檔案發生異動，就立即啟動編譯、打包等動作，實現連續整合的目標。 bower 与 npm 的区别可以看下这里的图。
gulpfile.php，这里放些 gulp 要做的任务、事儿、活儿。
elixir
打开 gulpfile.php 看到有 elixir ，查了一下，官网是这么说的：
Laravel Elixir 提供了简洁流畅的 API，让你能够为你的 Laravel 应用程序定义基本的 Gulp 任务。Elixir 支持许多常见的 CSS 与 JavaScrtip 预处理器，甚至包含了测试工具。
也就是 laravel 框架里有一个帮 gulp 做任务的工具，叫 Elixir 。 具体看一下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
elixir(function (mix) { mix .vendor() .angular('./angular/') .less('./angular/**/*.less', 'public/css') .copy('./angular/app/**/*.html', 'public/views/app/') .copy('./angular/directives/**/*.html', 'public/views/directives/') .copy('./angular/dialogs/**/*.html', 'public/views/dialogs/') .copy('./bower_components/font-awesome/fonts', 'public/fonts') .copy('./bower_components/bootstrap/fonts', 'public/fonts') .browserSync({ files: [ 'public/js/vendor.js', 'public/js/app.js', 'public/css/vendor.css', 'public/css/app.css', 'public/views/**/*.html' ], proxy: 'localhost:8001/index.php', logPrefix: "Laravel Eixir BrowserSync", logConnections: false, reloadOnRestart: false, notify: false, open: false }) .phpUnit(); }) |
第一行是 vender() ，这个是在 composer install 之后生成的 vender 目录。 composer 是 laravel 框架的包管理器，所以vender() 里面应该也有需要处理的 css 或者 js ，也就是也有任务需要处理，所在在这里统一进行处理。
第二行是处理 angular 文件夹里的东西。
第三行是将 angular 文件夹里的 .less 文件编译成 .css ，并放到 public/css/ 目录下。
第四-八行就是复制东西，复制 angular 目录下的 html 和 font 字体到 public 目录各自的归属目录。
第九行是下一小节要说的 browsersync 。
第十行是进行 phpunit 单元测试。
browsersync
browserSync是个前端神器，打开官网，可以了解到它的作用。正如其名“浏览器同步”，具体来说就是当你修改了 browserSync 所监视的文件，那么就会实时显示到浏览器上。
我们配置 browserSync 是基于 gulp 的，打开这个文档，它有具体的配置过程，然后我看到一段配置：
|
1 2 3 4 5 6 7 |
gulp.task('browser-sync', function() { browserSync.init({ proxy: "你的域名或IP" }); }); |
而我们的 gulpfile.php 中的 proxy 是 8000 ，这哪儿是 browsersync 要代理的地方！！我们这里应该修改成 localhost:8001/index.php ，这才是需要被代理的地址！！
然后接着看文档：
动态网站
如果您已经有其他本地服务器环境 PHP 或类似的，您需要使用代理模式。 BrowserSync 将通过代理URL(localhost:3000)来查看您的网站。
原来3000是默认的。
解答疑问
- 3000端口和3001端口是什么关系？
首先 browsersync 是一个测试工具，对前端的修改会实时地在 browsersync 这个容器里反映。
3000 和 3001 是 browsersync 的两个端口。
3001 是 browsersync 可视化控制页面的端口，控制所有的设备，同步推送更新等等。
3000 端口有两个用途：
– 1、用来代理接收来自8001的请求和响应。就是说，本来来自外部的访问（请求）都是从 8001 端口进来的，现在 browsersync 设置了 proxy:”localhost:8001/index.php” ，这样一来，你可以通过本地的 3000 端口来获取到 8001 的请求和响应。毕竟 browsersync 还不能直接对 8001 进行实时同步，不是一个系统的（一个是 browsersync 一个是 nginx ）。
– 2、接收来自 3001 端口推送的实时更新，然后将 css 或者 js 或者 html 的变化实时反映到页面上。
- gulpfile.php 文件中的 proxy: ‘localhost:8000’ 这个 8000 端口又是什么？
这个是错误的端口（对本项目来说），这个端口的正确配置应该是 proxy: ‘localhost:8001/index.php’
- nginx 配置的 8001 端口又算什么？
这个宽口的目的没变，还是响应外部访问的请求。在项目没发布之前，用来被 3000 所代理，用于项目调试。
- 3000 为什么访问不了？ 3001 可以， 8001 可以， 8000 不可以，为什么？
这个访问不了就是因为 proxy 配置错误，修正后可以访问。
修改完之后，”局势发生转变”，一切都理清了。按如下步骤走： 确定已修改了 proxy ！！
1、gulp watch
2、打开浏览器，输入localhost:3000，此时可以访问到页面与localhost:8001/index.php一样的页面。
3、访问localhost:3001可以访问到browsersync的控制页面。
4、打开phpstorm，修改 public/views/app/login/login.html 中“用户名”的 input 标签，把 placeholder=”用户名” 去掉。
提示：为了看到效果（ browsersync 的效果），最好让电脑屏幕上半部分露出 3000 页面中的用户名框，下半部分是 phpstorm ，然后做步骤4。
最后
这些端口都是可以修改的，通过命令行来修改，具体可以参考这篇说明。