上篇文章写了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 搭建博客 --编译前端文件相关推荐

  1. Laravel5.1 搭建博客 --文章的增删改查

    教程源于:Laravel学院 继文件上传后呢,咱来搞一搞文章的事情. 1 更改数据表 我们需要改改数据表的结构 因为涉及到重命名列名 所以咱需要引入一个包:Doctrine: composer req ...

  2. 【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面

    在上篇文章我们已经搭建好了基础的开发环境,接下来会介绍如何引入 DVA 和 ANTD ,以及在引入过程中需要注意的问题.这里只会详细的书写部分组件,其他的组件都是大同小异.你可以在 github仓库 ...

  3. Ghost 搭建博客小记

    前言 点击 我用 Ghost 搭建的博客 查看成品示例. 早就听说 Ghost 的大名了,不过一直都是处于观望状态.主要是想等 Ghost 各方面再成熟一些,所以迟迟没有行动.最近听闻 Ghost 已 ...

  4. 使用Pelican搭建博客系统

    摘要 经过几天的折腾,用Pelican搭建的独立博客系统终于上线运行了.可以打开kamidox.com看一下效果图.由于选用了响应式网页设计的主题,所以在手机上的浏览效果也相当赞.本文介绍了Pelic ...

  5. 基于Hexo的matery主题搭建博客并深度优化

    本文转自 悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...

  6. 轻松搭建博客平台-开源ASP.NET 博客Subtext 的安装

    轻松搭建博客平台-开源ASP.NET 博客Subtext 的安装   开源ASP.NET博客Subtext 目前发布了最新版2.0,是基于.Net Framework 2.0/3.0的开源ASP.NE ...

  7. (Ⅰ)基于Hexo+GitHub Page搭建博客,绑定域名及备份

    前言 这里引用阮一峰老师网络日志里说的,对于喜欢写博客的人,会经历三个阶段: 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间, ...

  8. 使用Hexo搭建博客,备份至GitHub过程(基于网上资料的实践操作)

    参考资料: 使用hexo,如果换了电脑怎么更新博客? https://www.zhihu.com/question/21193762 其中,最多赞回答(转至其博文): http://crazymilk ...

  9. node+koa2+mysql搭建博客后台

    本文将详细讲解使用node+koa2+mysql搭建博客后台的全过程. 开发环境 node 8.3.0及以上 npm 5.3.0及以上 mysql 5.7.21 具体的环境配置可查看我的上一篇文章 准 ...

最新文章

  1. POJ3666:Making the Grade——题解
  2. 十分钟轻松让你认识Entity Framework 7
  3. C++内存泄露检测原理
  4. VTK:可视化之LoopShrink
  5. c#自定义Json类
  6. 为什么安装了Microsoft .NET Framework 4之后我的电脑网卡启动会变得很慢很慢。。...
  7. 云服务器ECS使用限制概览,让你的上云少走一些坑
  8. MNIST的AlexNet实现
  9. DevExpress使用技巧总结
  10. java字符串构造函数的应用_构造函数中的参数0需要找不到类型为'java.lang.String'的bean...
  11. post-commit hook failed (exit code 255) with no output 解决方案
  12. [转]Fedora用root登录
  13. iOS WKWebview JS与OC互相调用,传递数据
  14. Jfinal weixin源码分析---碎碎念(看最后,有福利)
  15. matlab可以拼图么,拼图matlab程序希望有人可以给我讲解一下!!有偿求标注
  16. Django之开发微信小程序后端-Django篇②
  17. 数字孪生的主要应用领域
  18. UE4 Mixamo使用教程
  19. JRebel LS client not configured解决方案
  20. 暴雪正在等待另一项_战网正在等待另一项安装或更新【解决步骤】

热门文章

  1. Luogu P2341 [HAOI2006]受欢迎的牛
  2. 蓝牙的发展史及版本演进
  3. Django之中间件-CSRF
  4. BIND_MISMATCH导致过多VERSION COUNT的问题
  5. java 利用JAX-RS快速开发RESTful 服务
  6. 使用django的权限管理系统permission
  7. win7下安装IIS7.0及部署VS2010 ASP.NET程序网站的相关问题
  8. Boost.Python Tutorial
  9. linux mysql timestamp_MYSQL中TIMESTAMP类型的使用
  10. vasp软件_量子力学分子动力学软件包-VASP