Laravel5.1 搭建博客 --编译前端文件

Posted 2020-10-09 Sky_sunkang

上篇文章写了Gulp编译前端文件，这篇记录下在搭建博客中使用Gulp

 

---

 1 引入bootstrap和js

 1.1 首先先在项目本地安装Bower

sudo npm install bower

 1.2 创建bower.json文件

{
  "name": "blog",
  "description": "My Blog",
  "ignore": [
    "**/.*",
    "node_modules",
    "vendor/bower_dl",
    "test",
    "tests"
  ]
}

 1.3 引入bootstrap和js

bower install jquery bootstrap --save

 

---

 2 编译前端文件

 2.1 编写gulpfile.js文件

var gulp = require(‘gulp‘);
var elixir = require(‘laravel-elixir‘);

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */

/**
 * 拷贝操作
 */
gulp.task("copyfiles", function(){
    // js
    gulp.src("vendor/bower_dl/jquery/dist/jquery.js")
        .pipe(gulp.dest("resources/assets/js/"));
    // bootstrap
    gulp.src("vendor/bower_dl/bootstrap/less/**")
        .pipe(gulp.dest("resources/assets/less/bootstrap"));
    gulp.src("vendor/bower_dl/bootstrap/dist/js/bootstrap.js")
        .pipe(gulp.dest("resources/assets/js/"));
    // font 不用编译和合并 直接复制到public就可以
    gulp.src("vendor/bower_dl/bootstrap/fonts/**")
        .pipe(gulp.dest("public/assets/fonts"));
});

elixir(function(mix) {
    // 合并两个js文件
    mix.scripts([‘js/jquery.js‘, ‘js/bootstrap.js‘],
        ‘public/assets/js/admin.js‘,
        ‘resources/assets‘
    );
    // 编译admin.less到public目录下
    mix.less(‘admin.less‘, ‘public/assets/css/admin.css‘);
});

 2.2 创建我们要编译的admin.less

@import "bootstrap/bootstrap";
@import "//fonts.googleapis.com/css?family=Roboto:400,300";

@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;

body, label, .checkbox label {
  font-weight: 300;
}

 2.3 运行命令

gulp copyfiles

gulp

 

---

 3 在后台模板使用

{{--CSS--}}
    <link rel="stylesheet" href="/assets/css/admin.css">

{{--JS--}}
<script src="/assets/js/admin.js"></script>