zoukankan      html  css  js  c++  java
  • laravel elixir

    npm install
    npm install jquery --save
    
    //bootsrap3.36 与 jquery3不兼容,下载jquery时可能需要确定版本号
    
    npm install jquery@2.x  --save

    编辑 resources/assets/sass/app.scss

    @import "variables";
    
    @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

    创建variables.scss,改写bootstrap样式变量

    $body-bg:               #FEFEFE;
    $brand-primary:         darken(skyblue, 6.5%);
    $panel-bg:              #AFEEEE;

    创建文件: resources/assets/js/app.js

    window.$ = window.jQuery = require('jquery');
    
    require('bootstrap-sass');
    
    $( document ).ready(function() { 
        console.log($.fn.tooltip.Constructor.VERSION);
    });

    以上为引入jquery, 引入bootstrap.js, console.log 记录bootstrap版本号(测试用)

    编辑项目根目录下的 gulpfile.js :

    var elixir = require('laravel-elixir');
    
    elixir(function(mix) {
        mix.sass('app.scss')
            .browserify('app.js')
            .version(['css/app.css', 'js/app.js']);
    });

    运行gulp生成文件,在app.blade.php里就可以进行引入了

    ...
    
    <link href="{{ elixir('css/app.css') }}" rel="stylesheet">
    
    ...
    ...
    
    <script src="{{ elixir('js/app.js') }}"></script>
    
    ...

    如果使用less,建立app.less

    @import "node_modules/bootstrap-less/bootstrap/bootstrap.less";
    //@body-bg:   silver;
    @icon-font-path: "/fonts/bootstrap/";
    @import "node_modules/bootstrap-less/bootstrap/utilities.less";

    把gulpfile.js中更换sass未less即可

  • 相关阅读:
    linux一些常用命令
    imageMagick
    nginx安装配置
    数据库操作(六)、Date函数
    数据库操作(五)、聚合函数,分组
    JQuery(一)
    数据库小结(二)
    数据库操作(四)、标量函数
    数据库操作(三)
    C#基础(六)
  • 原文地址:https://www.cnblogs.com/fenle/p/5589345.html
Copyright © 2011-2022 走看看