Laravel5.1 搭建博客 --编译前端文件
上篇文章写了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>