介绍

gulp是一款基于nodejs流的自动化构建工具,之前也写过了一篇有关gulp如何实现页面实时预览的文章,有兴趣的技术控们可以去看看《gulp+browserSync实现静态,动态页面实时预览》,喜欢的小伙伴们还可以收藏收藏,小生在此谢过。 在某技术大神的指点之下,小生完成了Elixir的实时预览,在此之前查看了许多文档,为了避免大家陷入坑中于是写了这篇文章,那么问题来了,既然gulp本身也能实现关于php动态页面的实时预览,那么为什么我还非得去使用Elixir呢?

Elixir

Laravel的宗旨是让PHP开发变得轻松愉悦,所以从Laravel 5开始,提供了一个新的被称作Laravel Elixir的API(也就是基于Gulp封装成的一套更适合laravel的API)。 该API提供了简洁流畅的解决方案,让你能够为你的Laravel 应用程序定义基本的 Gulp 任务,支持许多常见的 CSS 与 JavaScrtip 预处理器,甚至包含了测试工具,从而减少编写上述繁琐任务的时间,有效提高编程效率。 当然了,如果你不想用Elixir的话也无可厚非(请恕fidding本人语体教),毕竟技术无限各有喜好;你完完全全可以由gulp一手搞定,但取而代之的就是你可能要为此多写许多代码并且无法领略Elixir的魅力之处了。 所以在此建议使用laravel5的技术控们,如果你打开了gulp大门,那请拥抱Elixir吧!

安装与使用

安装gulp与browsersync

由于Gulp是基于 Node.js 的,请确保已安装NodeJS,至于NodeJS的安装我就不多赘言了。

进入laravel5的项目根目录,修改package.json为如下

{
  "private": true,
  "author": "fidding.hjh",//作者
  "devDependencies": {//开发的时候需要的依赖项 --save-dev
  },
  "dependencies": {//正常运行的依赖包 --save
    "gulp": "^3.9.0",//gulp
    "laravel-elixir": "^2.0.0",//默认存在
    "bootstrap-sass": "^3.0.0",//默认存在
    "laravel-elixir-browsersync": "^0.1.5"//brosersync
  }
}

其中bootstrap-sass与laravel-elixir是默认已经存在的,在此,请特别注意laravel-elixir版本号,因为对于不同的elixir版本,需要下载对应的laravel-elixir-browsersync,在其文档中有这么一句话,

If you use Laravel Elixir Version "^3.0.0". Follow this link

If you use Laravel Elixir Version Below "^3.0.0".

就是elixir版本号大于等于3.0.0的点击该连接,小于3.0.0.0的就是该版本 小生这英语水平都能看得懂,对于你们我也就放心得很。

接着在cmd(项目根路径)下运行(管理员权限打开)

gulp install

让nodejs转一会,最后你会发现根目录下多了一个node_module文件夹,里面文件如下

\1458878990-565d27c5322d5_articlex.png

到这里安装便算是完成了。 使用

打开laravel5项目根目录的gulp.js文件,添加代码如下


var gulp = require('gulp'),
elixir = require('laravel-elixir');
browserSync = require('laravel-elixir-browsersync');
elixir(function(mix) {
  browserSync.init();
  mix.BrowserSync({
    proxy           : 'localhost:8888',//apache或IIS等的代理端口
    logPrefix       : 'Laravel Eixir BrowserSync',
    reloadOnRestart : false,
    notify          : false
  });
}); 

保存后在cmd下运行,请确保你的apaceh服务器或..is open的。

gulp watch

结果显示如下

\elixir.png

结语

ok,任务完成,最后套用Laravel中文文档Elixir篇章里的一句话

如果你曾经对于使用 Gulp 及编译资源感到困惑,那么你绝对会爱上 Laravel Elixir!

happy joining!

相关文档

laravel5 elixir中文文档

laravel-elixir-browsersync API

laravel-elixir-browsersync参数说明

gulp+browserSync实现静态,动态页面实时预览