上篇文章寫了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(){// jsgulp.src("vendor/bower_dl/jquery/dist/jquery.js").pipe(gulp.dest("resources/assets/js/"));// bootstrapgulp.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>

?

轉載于:https://www.cnblogs.com/sun-kang/p/7624749.html

總結

以上是生活随笔為你收集整理的Laravel5.1 搭建博客 --编译前端文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。