说明

开发环境: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 。 具体看一下:

第一行是 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 的,打开这个文档,它有具体的配置过程,然后我看到一段配置:

而我们的 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。

最后

这些端口都是可以修改的,通过命令行来修改,具体可以参考这篇说明。

发表评论

电子邮件地址不会被公开。 必填项已用*标注