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(){// 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 搭建博客 --编译前端文件相关推荐
- Laravel5.1 搭建博客 --文章的增删改查
教程源于:Laravel学院 继文件上传后呢,咱来搞一搞文章的事情. 1 更改数据表 我们需要改改数据表的结构 因为涉及到重命名列名 所以咱需要引入一个包:Doctrine: composer req ...
- 【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面
在上篇文章我们已经搭建好了基础的开发环境,接下来会介绍如何引入 DVA 和 ANTD ,以及在引入过程中需要注意的问题.这里只会详细的书写部分组件,其他的组件都是大同小异.你可以在 github仓库 ...
- Ghost 搭建博客小记
前言 点击 我用 Ghost 搭建的博客 查看成品示例. 早就听说 Ghost 的大名了,不过一直都是处于观望状态.主要是想等 Ghost 各方面再成熟一些,所以迟迟没有行动.最近听闻 Ghost 已 ...
- 使用Pelican搭建博客系统
摘要 经过几天的折腾,用Pelican搭建的独立博客系统终于上线运行了.可以打开kamidox.com看一下效果图.由于选用了响应式网页设计的主题,所以在手机上的浏览效果也相当赞.本文介绍了Pelic ...
- 基于Hexo的matery主题搭建博客并深度优化
本文转自 悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...
- 轻松搭建博客平台-开源ASP.NET 博客Subtext 的安装
轻松搭建博客平台-开源ASP.NET 博客Subtext 的安装 开源ASP.NET博客Subtext 目前发布了最新版2.0,是基于.Net Framework 2.0/3.0的开源ASP.NE ...
- (Ⅰ)基于Hexo+GitHub Page搭建博客,绑定域名及备份
前言 这里引用阮一峰老师网络日志里说的,对于喜欢写博客的人,会经历三个阶段: 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购买域名和空间, ...
- 使用Hexo搭建博客,备份至GitHub过程(基于网上资料的实践操作)
参考资料: 使用hexo,如果换了电脑怎么更新博客? https://www.zhihu.com/question/21193762 其中,最多赞回答(转至其博文): http://crazymilk ...
- node+koa2+mysql搭建博客后台
本文将详细讲解使用node+koa2+mysql搭建博客后台的全过程. 开发环境 node 8.3.0及以上 npm 5.3.0及以上 mysql 5.7.21 具体的环境配置可查看我的上一篇文章 准 ...
最新文章
- POJ3666:Making the Grade——题解
- 十分钟轻松让你认识Entity Framework 7
- C++内存泄露检测原理
- VTK:可视化之LoopShrink
- c#自定义Json类
- 为什么安装了Microsoft .NET Framework 4之后我的电脑网卡启动会变得很慢很慢。。...
- 云服务器ECS使用限制概览,让你的上云少走一些坑
- MNIST的AlexNet实现
- DevExpress使用技巧总结
- java字符串构造函数的应用_构造函数中的参数0需要找不到类型为'java.lang.String'的bean...
- post-commit hook failed (exit code 255) with no output 解决方案
- [转]Fedora用root登录
- iOS WKWebview JS与OC互相调用,传递数据
- Jfinal weixin源码分析---碎碎念(看最后,有福利)
- matlab可以拼图么,拼图matlab程序希望有人可以给我讲解一下!!有偿求标注
- Django之开发微信小程序后端-Django篇②
- 数字孪生的主要应用领域
- UE4 Mixamo使用教程
- JRebel LS client not configured解决方案
- 暴雪正在等待另一项_战网正在等待另一项安装或更新【解决步骤】
热门文章
- Luogu P2341 [HAOI2006]受欢迎的牛
- 蓝牙的发展史及版本演进
- Django之中间件-CSRF
- BIND_MISMATCH导致过多VERSION COUNT的问题
- java 利用JAX-RS快速开发RESTful 服务
- 使用django的权限管理系统permission
- win7下安装IIS7.0及部署VS2010 ASP.NET程序网站的相关问题
- Boost.Python Tutorial
- linux mysql timestamp_MYSQL中TIMESTAMP类型的使用
- vasp软件_量子力学分子动力学软件包-VASP