laravel-elixir + gulp + webpack + vue配置

package.json:http://pan.baidu.com/s/1c1RdAAs

gulpfile.js:http://pan.baidu.com/s/1hswJ22S

webpack.config.js:http://pan.baidu.com/s/1c4xqVk


终端运行:

npm install

项目资源目录:

dev为开发目录,dist为静态文件目录,build为版本映射目录

开发时执行命令:

gulp work

JS文件引用方式:

<script src="{{ assets('dev/js/xxx.js') }}"></script>

发布时执行指令:

gulp make                                        生成压缩文件到dist目录

gulp                                                 生成版本映射文件到build目录

js文件引用方式:

<script src="{{ elixir('dist/js/xxx.js') }}"></script>

PS:记得在其他js文件之前引入global.js

开发文件目录:

在resources目录下新建components,static,lib目录

components存放组件文件

static存放公用文件

lib存放外部库文件(我自己目前还没用到它)


vue文件中引入vue-resource:

npm install vue-resource

import Vue from 'vue'

import VueResource from 'vue-resource'

Vue.use(VueResource);

直接在.vue文件的script标签里引入就可以使用了,不需要在html文件中引入vue-resource的CDN


缺点:

在进行资源发布时要执行两个命令,是因为用gulp自己写个version的task有时会造成rev-manifest.json文件跑到根目录的情况,导致出错(github-issue,没看懂),所以就使用了laravel-elixir命令来额外进行版本控制。

如果有朋友知道解决这个麻烦的方法,还请告诉我,谢谢!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 5,969评论 4 50
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 8,400评论 7 55
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,843评论 1 32
  • 我叫余路,余生的余,路途的路,余生的路途,怎么想都不像一个好名字,也确实不是什么好名字,至少,我前面的十多年,都不...
    简单随心阅读 1,482评论 0 0
  • 我们常想起往事,情不自禁地流泪,不由之主地傻笑,不知不觉地发呆,回忆真的很美好。今天小编就为大家推荐7本必读的回忆...
    62f3575241cc阅读 2,662评论 0 24