zoukankan      html  css  js  c++  java
  • 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="/js/app.js?{{rand()}}"></script>
    <script src="/js/app.js?{{$app_version}}"></script>

  • 相关阅读:
    TeXLive安装过程
    js 如何获取class的元素 以及创建方法getElementsByClassName
    点击返回
    MVC框架实现文件的上传(支持多文件上传)
    团购倒计时抢购功能
    获取取当前页 地址分割字符串
    网页内容截取部分打印
    HttpFileCollection 实现多文件上传
    JS如何获取URL
    正则表达式 占位符 替换
  • 原文地址:https://www.cnblogs.com/tujia/p/6398839.html
Copyright © 2011-2022 走看看