laravel 使用 vue （gulp）

Posted 2020-08-31 Tiac

1）首先要安装 gulp

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

 

2）编辑js

默认 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 里，当然也可以自己改保存路径

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 了

gulp

如果你想压缩 js，可以加上 --product 参数

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>

 

---

 

完