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

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. 加速nginx: 开启gzip

    nginx 是一个高性能的 Web 服务器,之前也写过一些关于 nginx 的文章.为了提高博客的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手.为字体开启 gzip 和缓存能大大 ...

  3. Linux的内存映像导出接口—kcore

    发表于 2012-4-10 15:00   /proc/kcore文件提供了整个机器的内存映像,和vmcore不同的是,它提供了一个运行时的内存映像,为此和vmcore一样,内核提供了一个类似的但是稍 ...

  4. c# ComboBox绑定枚举

    定义枚举 public enum UserLevel { Commmon = , Administrator, Developer } 方法一 private void Method1() { com ...

  5. 用户ID的代码生成

    public class Uid { private static final String machineIdString = Integer.toHexString(new Object().ha ...

  6. hibernate中一对一映射

    一.hibernate中一对一映射有两种 1 主键方式,一张表的主键是通过另一张表的主键生成的 2 外键方式,一张表添加外键引用另一张表的主键,并添加唯一unique约束 二.下面进行简单例子,用户和 ...

  7. C编程测试存储格式为大段还是小段

    目前,计算机存储系统有2种存储格式,大端和小端.数据在内存中存储时以字节为单位,一个int类型有4个字节,这就导致是高字节对应低地址(大端模式),高字节对应高地址(小端模式).大端和小端模式本身没有对 ...

  8. Linux 用C语言判断文件和文件夹

    Linux 用C语言判断文件和文件夹 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #inc ...

  9. ADT离线安装教程

    安装eclipse软件.安装后点击HELP菜单,找到下面的Install New Software并点击.   之后会弹出一个对话框,然后我们点击add,接下来弹出ADD对话框,然后我们再点击arch ...

  10. How to Install Xcode, Homebrew, Git, RVM, Ruby & Rails on Snow Leopard, Lion, Mountain Lion, and Mavericks

    After following many outdated and incomplete instructions for setting up a web development environme ...