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>

laravel 使用 vue (gulp)的更多相关文章

  1. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

  2. 使用Laravel 和 Vue 构建一个简单的SPA

    本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...

  3. 通过Laravel 初识Vue.js

    最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...

  4. laravel整合vue 多入口解决

    2018年8月10日23:10:29 其实整合是挺简单,因为laravel本身就准备的挺好了 laravel 版本5.6   注意php cli是web是不一样的 这个需要设置环境变量 ,php需要7 ...

  5. iBrand 开源电商小程序 (Laravel API+ webpack + gulp + 原生小程序)

    iBrand 社交电商产品正式进入开源过程中了,我们制定了详细的开源计划,目前已经发布了 V1 的版本,后续的版本也在陆续整理完善中. 各个版本功能明细如下图: 3 个版本计划在今年春节前全部完成,可 ...

  6. laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

    如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...

  7. 使用ES6+Vue+webpack+gulp构建新一代Web应用

    1.推荐学习网站:Vue.js中国 2.Demo环境搭建: 2.1环境配置 安装nodejs环境,具体内容可以百度: 新建一个文件夹: mkdir VUE-ES6-WebPack 全局安装gulp: ...

  8. Vue.js的库,包,资源的列表大全。

    官方资源 外部资源 社区 播客 官方示例 入门 开发工具 语法高亮 代码片段 自动补全 组件集合 库和插件 路由 ajax/数据 状态管理 校验 UI组件 i18n 示例 模板 脚手架 整合 插件/指 ...

  9. Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择

    转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...

随机推荐

  1. c++之—— lambda表达式(有个未能解决的问题等待大佬解答)——(在stack overflow找到了答案)

    谓词: 谓词是一个可调用的表达式,其返回结果是一个能用作条件的值.标准库算法所使用的谓词分为两类:一元谓词,意味着它只接受单一参数:二元谓词,意味着它有两个参数.接受谓词参数的算法对输入序列中的元素调 ...

  2. AES加解密JS和php互相处理字符

    Reference: http://blog.csdn.net/carlos__z/article/details/53185082 JavaScript code? 1 2 3 4 5 6 7 8 ...

  3. 一款基于jquery和css3实现的摩天轮式分享按钮

    之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮 ...

  4. 一站式学习Wireshark(七):Statistics统计工具功能详解与应用

    Wireshark一个强大的功能在于它的统计工具.使用Wireshark的时候,我们有各种类型的工具可供选择,从简单的如显示终端节点和会话到复杂的如Flow和IO图表.本文将介绍基本网络统计工具.包括 ...

  5. redis的window客户端下载地址

    这里是window的版本,由微软维护的: https://github.com/MicrosoftArchive/redis/releases

  6. 用lua实现ByteArray和ByteArrayVarint

    许多 Actionscript 程序员已经从 Flash 转到 Cocos2d-x 了.那么以前的那些超级好用的类库都不见了,只好重新来过. 我利用 Lua 和 lpack 库实现了一套 lua版本的 ...

  7. 关于BETA、RC、ALPHA、Release、GA等版本号的意义

    关于BETA.RC.ALPHA.Release.GA等版本号的意义 转载 2016年06月19日 00:04:00 2049 0 1 . 最近由于工作需要经常要去SVN上拉开源项目的源码,对项目 ...

  8. rails局部模板 render

    <%= render partial: 'file' %> file是以_开头命名的文件,比如_cart.html.erb 这样就可以用render来调用了 还可以传参数 比如 rails ...

  9. jquery easy ui 简单字段选择搜索实现

    code <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title& ...

  10. 统一建模语言 UML

    目录 统一建模语言 UML UML定义了5类10种模型图 一用例图用于建立需求模型 二静态图主要描述系统的静态表示和关系包括类图包图对象图 三行为图描述系统动态模型和对象组成的交换关系包括状态图和活动 ...