介绍
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文件夹,里面文件如下
到这里安装便算是完成了。
使用
打开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
结果显示如下
结语
ok,任务完成,最后套用Laravel中文文档Elixir篇章里的一句话
如果你曾经对于使用 Gulp 及编译资源感到困惑,那么你绝对会爱上 Laravel Elixir!
happy joining!
相关文档
laravel-elixir-browsersync API