上篇文章寫了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>

Laravel5.1 搭建博客 --編譯前端文件