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>
完