1. 云栖社区>
  2. PHP教程>
  3. 正文

使用 Jigsaw 扩展包基于 Laravel Blade 语法构建静态站点 —— 安装预览篇

作者:用户 来源:互联网 时间:2017-12-01 14:05:31

站点安装扩展laravel静态构建预览使用语法基于

使用 Jigsaw 扩展包基于 Laravel Blade 语法构建静态站点 —— 安装预览篇 - 摘要: 本文讲的是使用 Jigsaw 扩展包基于 Laravel Blade 语法构建静态站点 —— 安装预览篇,1、简介 Jigsaw 是一个基于Laravel Blade 语法生成静态站点的 扩展包 。安装之前,确保系统已经安装 PHP 5.5+,如果要使用Elixir 编译 CSS 和 JavaScript 的话还需要安装 Node.js

1、简介

Jigsaw 是一个基于Laravel Blade 语法生成静态站点的 扩展包 。安装之前,确保系统已经安装 PHP 5.5+,如果要使用Elixir 编译 CSS 和 JavaScript 的话还需要安装 Node.js 和 NPM。

2、安装 全局安装

我们可以通过Composer全局安装Jigsaw:

composer global require tightenco/jigsaw 本地安装

如果全局安装Jigsaw有依赖冲突,也可以为每个项目进行本地安装。

首先我们需要创建一个站点目录:

mkdir my-site && cd my-site

然后通过Composer本地安装Jigsaw:

composer require tightenco/jigsaw 初始化站点

如果是全局安装的话,可以在web根目录下运行如下命令初始化一个新站点:

jigsaw init my-site

这将会在当前目录下生成一个新的名为 my-site 的新站点。

如果是在本地安装的话,可以在项目目录下运行如下命令初始化新的站点:

./vendor/bin/jigsaw init

这也会为新站点生成目录结构和相应文件。

站点目录结构

无论是通过哪种方式,生成的静态站点目录结构如下:

使用 Jigsaw 扩展包基于 Laravel Blade 语法构建静态站点 —— 安装预览篇

其中, source 目录包含了站点的实际内容,这里面存放了站点的所有页面、CSS、JavaScript、图片等资源。

在项目根目录下,Jigsaw提供了 gulpfile.js 和 package.json 用于编译前端资源,以及一个 config.php 文件用于指定在模板中有效的变量。

4、构建&预览 构建站点

如果你想要生成站点,需要在项目根目录下运行如下命令:

jigsaw build

Jigsaw将会在 build_local 目录下生成静态HTML:

使用 Jigsaw 扩展包基于 Laravel Blade 语法构建静态站点 —— 安装预览篇

预览站点

如果你跟我一样,是在Mac下使用Valet作为开发环境,那么此时你已经可以在浏览器中通过 my-site.dev 访问静态站点了。

如果不是的话要想快速预览,可以在项目根目录下运行如下命令:

jigsaw serve

这样,你就可以在浏览器中通过 http://localhost:8000/ 来预览站点。

如果你使用Elixir来编译前端资源,还可以通过Browsersync来预览站点:

gulp watch

Browsersync可以自动打开一个浏览器标签页,并在你每次修改之后重新加载页面。这对快速预览更改而言很方便。

以上是使用 Jigsaw 扩展包基于 Laravel Blade 语法构建静态站点 —— 安装预览篇的全部内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有其他相关内容,欢迎继续使用右上角搜索按钮进行搜索站点 , 安装 , 扩展 , laravel , 静态 , 构建 , 预览 , 使用 , 语法 基于 ,以便于您获取更多的相关知识。