上篇文章写了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:;
}
2.3 运行命令
gulp copyfiles
gulp
3 在后台模板使用
{{--CSS--}}
<link rel="stylesheet" href="/assets/css/admin.css">
{{--JS--}}
<script src="/assets/js/admin.js"></script>