laravel elixir

Posted 2020-07-25 jzfan

npm install

npm install jquery --save

//bootsrap3.36 与 jquery3不兼容，下载jquery时可能需要确定版本号

npm install [email protected]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>

...