请选择 进入手机版 | 继续访问电脑版

技术控

    今日:151| 主题:53946
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

[复制链接]
清晨那一抹阳光 发表于 2016-11-27 23:20:56
216 5

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
1、 Markdown

   有些页面你更想使用Markdown而不是Blade?在Jigsaw中使用Markdown很简单,只需要创建以 .markdown 或 .md 为文件扩展名的文件即可,并且以YAML front matter的方式指定细节。
   例如,假设你有这样的布局并且想要以Markdown文本填充 content 部分:
  1. <html>
  2.     <head>...</head>
  3.     <body>
  4.         @yield('body')
  5.     </body>
  6. </html>
复制代码
  如果这个布局使用了 _layouts 目录下的 master 布局,就可以像这样创建一个使用该布局的Markdown文件:
   

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

  最终生成的页面内容如下:
   

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

   这样我们就可以在浏览器中通过 http://jigsaw.dev/markdown 来访问以Markdown格式编辑的页面。
   自定义front matter变量

   下面我们来看一些更加复杂的设置,假设你在 _layouts 目录下有一个名为 post.blade.php 的布局文件:
  1. @extends('_layouts.master')

  2. @section('content')
  3.     <h1>{{ $title }}</h1>
  4.     <h2>by {{ $author }}</h2>

  5.     @yield('postContent')
  6. @endsection
复制代码
  你可以通过添加键到 YAML front matter 来填充 $title 和 $author :
   

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

  构建之后最终生成的文件内容如下:
   

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

   通过 http://jigsaw.dev/markdown/content 即可访问该页面。
   2、 编译 前端资源

   Jigsaw站点开箱支持Laravel Elixir,如果你在Laravel项目中使用过Elixir,也就知道如何在Jigsaw中使用Elixir。
   设置环境

  开始之前,确保已经安装了Node.js和NPM并配置好环境。
  安装好了之后,拉取需要的依赖以便编译资源:
  1. npm install
复制代码
  更多安装细节,请参考完整的Elixir文档。
   组织前端资源

      默认情况下,所有你想处理的前端资源都位于 source/_assets 目录:
   

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...
   Elixir会遍历子目录下每个资源文件的文件类型(如Sass、Less或Coffeescript),我们建议遵循这种约定以避免额外的配置。
        默认情况下,一旦前端资源编译之后,它们就会被放置到 source 目录下相应的位置:
   

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...

使用 Jigsaw 扩展包基于 Laravel Blade 模板构建静态站点 —— 前端编译篇 ...
    如果你想要修改前端资源编译的源目录和目标目录,可以编辑 gulpfile.js 中的这两行:
   
  1. elixir.config.assetsPath = 'source/_assets';
  2. elixir.config.publicPath = 'source';
复制代码
启用不同的预处理器

   Jigsaw开箱处理如下的 gulpfile.js 并配置为使用Sass:
  1. var gulp = require('gulp');
  2. var elixir = require('laravel-elixir');
  3. var argv = require('yargs').argv;

  4. elixir.config.assetsPath = 'source/_assets';
  5. elixir.config.publicPath = 'source';

  6. elixir(function(mix) {
  7.     var env = argv.e || argv.env || 'local';
  8.     var port = argv.p || argv.port || 3000;

  9.     mix.sass('main.scss')
  10.         .exec('jigsaw build ' + env, ['./source/*', './source/**/*', '!./source/_assets/**/*'])
  11.         .browserSync({
  12.             port: port,
  13.             server: { baseDir: 'build_' + env },
  14.             proxy: null,
  15.             files: [ 'build_' + env + '/**/*' ]
  16.         });
  17. });
复制代码
如果你想要切换到Less、使用Coffeescript、或者利用其它的Elixir特性,可以按照自己的所需对这个文件进行编辑。
  下面是一个使用Less和CoffeeScript的例子:
  1. var gulp = require('gulp');
  2. var elixir = require('laravel-elixir');

  3. elixir.config.assetsPath = 'source/_assets';
  4. elixir.config.publicPath = 'source';

  5. elixir(function(mix) {
  6.     mix.less('main.less')
  7.        .coffee('scripts.coffee')
  8.        .exec('jigsaw build', ['./source/**/*', '!./source/_assets/**/*'])
  9.        .browserSync({
  10.             server: { baseDir: 'build_local' },
  11.             proxy: null,
  12.             files: [ 'build_local/**/*' ]
  13.        });
  14. });
复制代码
编译资源

  要编译资源,可以使用如下命令:
  1. gulp
复制代码
  编译之后,会自动运行 jigsaw build ,这样就可以在浏览器中预览更改。
   监听修改

   每次手动运行 gulp 让修改生效很麻烦,取而代之地,你可以运行如下命令让修改生效:
  1. gulp watch
复制代码
项目中任意时间任意文件的修改,资源都会被重新编译并且Jigsaw都会重新生成静态HTML页面。
   使用gulp watch还会启用 Browsersync ,这样浏览器会在修改的时候自动刷新,此外,它还会为你管理本地站点服务,而不必启动本地PHP服务器。
   还可以通过 --env 标识指定要监听的环境:
  1. gulp watch --env=staging
复制代码



上一篇:CSS3 transform
下一篇:Bra-Ket Notation Trivializes Matrix Multiplication
蒋倩 发表于 2016-11-28 00:48:09
大人,此事必有蹊跷!
回复 支持 反对

使用道具 举报

oops129 发表于 2016-11-28 16:28:00
楼主不许动,我是来抢沙发的,沙发没有,板凳也行!
回复 支持 反对

使用道具 举报

晓博 发表于 2016-11-28 17:29:57
去年买了块表!
回复 支持 反对

使用道具 举报

千兰 发表于 2016-12-3 08:18:13
楼主,涨姿势呃。。。。。。
回复 支持 反对

使用道具 举报

李氏家族 发表于 2016-12-27 01:06:07
收藏了,以后可能会用到!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表