首页 > 代码库 > laravel 使用 vue (gulp)

laravel 使用 vue (gulp)

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="http://www.mamicode.com/js/app.js?{{rand()}}"></script>
<script src="http://www.mamicode.com/js/app.js?{{$app_version}}"></script>

 


 

laravel 使用 vue (gulp)