美文网首页
laravel-elixir + gulp + webpack

laravel-elixir + gulp + webpack

作者: 冰淤 | 来源:发表于2016-06-03 22:13 被阅读1756次

    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命令来额外进行版本控制。

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

    相关文章

      网友评论

          本文标题:laravel-elixir + gulp + webpack

          本文链接:https://www.haomeiwen.com/subject/oplldttx.html