上篇文章写了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>

Laravel5.1 搭建博客 --编译前端文件的更多相关文章

  1. Laravel5.1 搭建博客 --上传文件及文件管理

    教程源自:Laravel学院 这一节 咱来说说上传文件的功能实现,我们会把上传的文件保存到项目本地,不仅上传 还有删除和预览功能. 1 配置 我们先从配置开始做起,先修改我们自己创建的 blog.ph ...

  2. Laravel5.1 搭建博客 --展示简单的首页

    今天起开始搭建博客,把之前学的东西运用下. 1 创建 配置项目 1.1 创建项目 composer create-project laravel/laravel blog 5.1.1 1.2 配置数据 ...

  3. Laravel5.1 搭建博客 --构建标签

    博客的每篇文章都是需要有标签的,它与文章也是多对多的关系 这篇笔记也是记录了实现标签的步骤逻辑. 在我们之前的笔记中创建了Tag的控制器和路由了 所以这篇笔记不在重复 1 创建模型与迁移文件 迁移文件 ...

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

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

  5. Laravel5.1 搭建博客 --后台登录

    今天咱来实现后台的登录. 首先我们的后台需要三个控制器: PostController:管理文章. TagController:管理文章标签. UploadController:上传文件. 当我们访问 ...

  6. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  7. 从小白到使用antd+react+react-router+issue+es6搭建博客

    概述 本身是前端小白,学过html,css,js的各种书,各种视屏,就是没有接触web开发的内容.偶然看见一个朋友用react搭建了一个博客,于是本着程序员无所不能的精神,也尝试着用react搭建博客 ...

  8. 使用django搭建博客并部署

    2017/8/31 18:27:59 为了以后参考的方便,在这里总结一下django搭建博客网站的主要步骤.以下大部分的内容,参考自Django中文文档 - 看云. 需要强调的是,这里使用的djang ...

  9. django学习笔记——搭建博客网站

    1. 配置环境,创建django工程 虚拟环境下建立Django工程,即创建一个包含python脚本文件和django配置文件的目录或者文件夹,其中manage.py是django的工程管理助手.(可 ...

随机推荐

  1. Mongoose使用——nodejs结合mongodb

    0. 前言: Mongoose是NodeJS的驱动,不能作为其他语言的驱动.Mongoose有两个特点: 通过关系型数据库的思想来设计非关系型数据库 基于mongodb驱动,简化操作 Mongooos ...

  2. Ubuntu和windows文件共享问题

    ubuntu访问windows共享文件夹(ubuntu桌面系统):          最简单的方法,随便打开一个文件夹,按Ctrl+L,然后地址栏敲smb://xxx.xxx.xxx.xxx(wind ...

  3. spring in action 8.1 使用Spring web flow

    一.说明 Spring Web Flow是spring MVC的扩展,它支持基于流程的应用程序,他将流程的定义和实现流程行为的类和视图分离开来. 1.1 spring中配置web flow,目前需要在 ...

  4. 使用zlib模块实现HTTP服务端与客户端实现传输数据压缩

    现如今在处理http请求的时候,由于请求的资源较多,如果不启用压缩的话,那么页面请求的流量将会非常大.启用gzip压缩,在一定程度上会大大的提高页面性能. 因此这写一个使用Node.js实现在http ...

  5. Linux find 命令概览

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...

  6. Machine Learning—The k-means clustering algorithm

    印象笔记同步分享:Machine Learning-The k-means clustering algorithm

  7. nginx在用户使用ie的使用重定向到/nginx-MSIE目录下

    [root@web01 ]# cat /app/server/nginx/conf/rewrite/default.conf #rewrite ^/index\.html /index.php las ...

  8. 【C语言】C语言程序所占内存分类

    参考"http://blog.sina.com.cn/s/blog_63d4849c01014qg3.html" C语言内存分为5部分:堆.栈.全局(静态)区.常量区(只读)和代码 ...

  9. socket发送http请求

  10. 利用eclipse的search功能搜索当前项目的源文件

    当你项目的源文件太多,文件组织结构太复杂的的时候,有时候希望google来帮你一把?给个关键字就把相关的搜索结果给出来? eclipse的search功能基本上就可以完成这个任务,文件搜索,甚至JAV ...