laravel 使用 vue (gulp)

1)首先要安装 gulphtml

看这里 http://www.cnblogs.com/tujia/p/6397779.html laravel

 

2)编辑jsgulp

默认 laravel 里有一个 /resources/assets/js/app.js  这个 gulp 要编译文件,gulp 将 /resources/assets/js/app.js 编译成 /public/js/app.js 文件,/public/js/app.js 在公共底部被引用浏览器

 

虽然 /resources/assets/js 里只有一个 app.js,但不表明你只能写一个 js,你能够写本身的js,再用 larave-exlixir 工具合并成一个 js 缓存

elixir(function(mix) {
    mix.scripts([
        'order.js',
        'forum.js'
    ]);
});

PS:默认保存在 /public/js/all.js 里,固然也能够本身改保存路径app

elixir(function(mix) {
    mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

若是你还想懒一点,能够直接给一个js目录就能够打包了(默认保存在 /public/js/all.js 里)工具

elixir(function(mix) {
    mix.scriptsIn('public/js/some/directory');
});

 

3)应用 js 测试

终端运行 gulp 命令就能够编译打包 js 了spa

gulp

若是你想压缩 js,能够加上 --product 参数debug

gulp --product

 

4)debug 模型

在开发阶段,若是你以为每次修改后都要执行 gulp 命令比较麻烦,那你能够使用下面这个侦听命令

gulp watch

它会侦听项目里的文件变化,若是文件发生的修改就会自动编译了,不须要重复执行 gulp 命令

 

5)舒适提示

laravel 公共模版里引用 app.js 没加版本号,app.js 会被浏览器缓存了,因此有时候你刷新可能会看不到变化,你能够加一个时间戳(测试的时候,正式环境建议在后台加一个“版本号”配置)

<script src="/js/app.js?{{rand()}}"></script>
<script src="/js/app.js?{{$app_version}}"></script>

 


 

相关文章
相关标签/搜索