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:;
}
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 搭建博客 --编译前端文件的更多相关文章
- Laravel5.1 搭建博客 --上传文件及文件管理
教程源自:Laravel学院 这一节 咱来说说上传文件的功能实现,我们会把上传的文件保存到项目本地,不仅上传 还有删除和预览功能. 1 配置 我们先从配置开始做起,先修改我们自己创建的 blog.ph ...
- Laravel5.1 搭建博客 --展示简单的首页
今天起开始搭建博客,把之前学的东西运用下. 1 创建 配置项目 1.1 创建项目 composer create-project laravel/laravel blog 5.1.1 1.2 配置数据 ...
- Laravel5.1 搭建博客 --构建标签
博客的每篇文章都是需要有标签的,它与文章也是多对多的关系 这篇笔记也是记录了实现标签的步骤逻辑. 在我们之前的笔记中创建了Tag的控制器和路由了 所以这篇笔记不在重复 1 创建模型与迁移文件 迁移文件 ...
- Laravel5.1 搭建博客 --文章的增删改查
教程源于:Laravel学院 继文件上传后呢,咱来搞一搞文章的事情. 1 更改数据表 我们需要改改数据表的结构 因为涉及到重命名列名 所以咱需要引入一个包:Doctrine: composer req ...
- Laravel5.1 搭建博客 --后台登录
今天咱来实现后台的登录. 首先我们的后台需要三个控制器: PostController:管理文章. TagController:管理文章标签. UploadController:上传文件. 当我们访问 ...
- 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程
前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...
- 从小白到使用antd+react+react-router+issue+es6搭建博客
概述 本身是前端小白,学过html,css,js的各种书,各种视屏,就是没有接触web开发的内容.偶然看见一个朋友用react搭建了一个博客,于是本着程序员无所不能的精神,也尝试着用react搭建博客 ...
- 使用django搭建博客并部署
2017/8/31 18:27:59 为了以后参考的方便,在这里总结一下django搭建博客网站的主要步骤.以下大部分的内容,参考自Django中文文档 - 看云. 需要强调的是,这里使用的djang ...
- django学习笔记——搭建博客网站
1. 配置环境,创建django工程 虚拟环境下建立Django工程,即创建一个包含python脚本文件和django配置文件的目录或者文件夹,其中manage.py是django的工程管理助手.(可 ...
随机推荐
- cpu_test
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 加速nginx: 开启gzip
nginx 是一个高性能的 Web 服务器,之前也写过一些关于 nginx 的文章.为了提高博客的响应速度,可以从设置 nginx 的 gzip 和缓存这2方面入手.为字体开启 gzip 和缓存能大大 ...
- Linux的内存映像导出接口—kcore
发表于 2012-4-10 15:00 /proc/kcore文件提供了整个机器的内存映像,和vmcore不同的是,它提供了一个运行时的内存映像,为此和vmcore一样,内核提供了一个类似的但是稍 ...
- c# ComboBox绑定枚举
定义枚举 public enum UserLevel { Commmon = , Administrator, Developer } 方法一 private void Method1() { com ...
- 用户ID的代码生成
public class Uid { private static final String machineIdString = Integer.toHexString(new Object().ha ...
- hibernate中一对一映射
一.hibernate中一对一映射有两种 1 主键方式,一张表的主键是通过另一张表的主键生成的 2 外键方式,一张表添加外键引用另一张表的主键,并添加唯一unique约束 二.下面进行简单例子,用户和 ...
- C编程测试存储格式为大段还是小段
目前,计算机存储系统有2种存储格式,大端和小端.数据在内存中存储时以字节为单位,一个int类型有4个字节,这就导致是高字节对应低地址(大端模式),高字节对应高地址(小端模式).大端和小端模式本身没有对 ...
- Linux 用C语言判断文件和文件夹
Linux 用C语言判断文件和文件夹 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #inc ...
- ADT离线安装教程
安装eclipse软件.安装后点击HELP菜单,找到下面的Install New Software并点击. 之后会弹出一个对话框,然后我们点击add,接下来弹出ADD对话框,然后我们再点击arch ...
- 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 ...