Phalcon资源文件管理(Assets Management)

资源文件管理(Assets Management)?

Phalcon\Assets是一个让开发者管理静态资源的组件,如管理css,javascript等。 Phalcon\Assets\Manager 存在于DI容器中,所以我们可以在服务容器存在的
任何地方使用它来添加/管理资源。

添加资源(Adding Resources)?

Assets支持两个内置的资源管理器:css和javascripts.我们可以根据需要创建其它的资源。资源管理器内部保存了两类资源集合一为 javascript另一为css.

我们可以非常简单的向这两个集合里添加资源,如下:

<?php

class IndexController extends Phalcon\Mvc\Controller
{
    public function index()
    {

        //添加本地css资源
        $this->assets
            ->addCss(‘css/style.css‘)
            ->addCss(‘css/index.css‘);

        //添加本地js资源
        $this->assets
            ->addJs(‘js/jquery.js‘)
            ->addJs(‘js/bootstrap.min.js‘);

    }
}

然后我们可以在视图中输出资源:

<html>
    <head>
        <title>Some amazing website</title>
        <?php $this->assets->outputCss() ?>
    </head>
    <body>

        <!-- ... -->

        <?php $this->assets->outputJs() ?>
    </body>
<html>

Volt语法:

<html>
    <head>
        <title>Some amazing website</title>
          {{ assets.outputCss() }}
    </head>
    <body>

        <!-- ... -->

          {{ assets.outputJs() }}
    </body>
<html>

本地与远程资源(Local/Remote resources)?

本地资源是同一应用中的资源,这些资源存在于应用的根目录中。 Phalcon\Mvc\Url 用来生成
本地的url. 远程资源即是一种存在于CDN或其它远程服务器上的资源,比如常用的jquery, bootstrap等资源。

<?php

public function indexAction()
{

    //添加远程及本地资源
    $this->assets
        ->addCss(‘//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css‘, true )
        ->addCss(‘css/style.css‘, false );
}

集合(Collections)?

集合即是把一同类的资源放在一些,资源管理器隐含的创建了两个集合:css和js. 当然我们可以创建其它的集合以归类其它的资源, 这样我们可以很容易的 在视图里显示:

<?php

//html头部的js资源
$this->assets
    ->collection(‘header‘)
    ->addJs(‘js/jquery.js‘)
    ->addJs(‘js/bootstrap.min.js‘);

//html尾部的js资源
$this->assets
    ->collection(‘footer‘)
    ->addJs(‘js/jquery.js‘)
    ->addJs(‘js/bootstrap.min.js‘);

然后在视图中如下使用:

<html>
    <head>
        <title>Some amazing website</title>
        <?php $this->assets->outputJs(‘header‘) ?>
    </head>
    <body>

        <!-- ... -->

        <?php $this->assets->outputJs(‘footer‘) ?>
    </body>
<html>

Volt语法:

<html>
    <head>
        <title>Some amazing website</title>
          {{ assets.outputCss(‘header‘) }}
    </head>
    <body>

        <!-- ... -->

          {{ assets.outputJs(‘footer‘) }}
    </body>
<html>

前缀(Prefixes)?

集合可以添加前缀,这可以实现非常简单的更换服务器:

<?php

$scripts = $this->assets->collection(‘footer‘);

if ($config->environment == ‘development‘) {
    $scripts->setPrefix(‘/‘);
} else {
    $scripts->setPrefix(‘http:://cdn.example.com/‘);
}

$scripts->addJs(‘js/jquery.js‘)
        ->addJs(‘js/bootstrap.min.js‘);

我们也可以使用链式语法,如下:

<?php

$scripts = $assets
    ->collection(‘header‘)
    ->setPrefix(‘http://cdn.example.com/‘)
    ->setLocal(false)
    ->addJs(‘js/jquery.js‘)
    ->addJs(‘js/bootstrap.min.js‘);

压缩与过滤(Minification/Filtering)?

Phalcon\Assets提供了内置的js及css压缩工具。 开发者可以设定资源管理器以确定对哪些资源进行压缩啊些资源不进行压缩。除了上面这些之外 我们还可以使用Douglas Crockford书写的Jsmin压缩工具,及Ryan Day提供的CSSMin来对js及css文件进行压缩. 下面的例子中展示了如何使用集合对资源文件进行压缩:

<?php

$manager

    //这些javascript资源位于html文件的底部
    ->collection(‘jsFooter‘)

    //最终输出名
    ->setTargetPath(‘final.js‘)

    //使用此uri显示资源
    ->setTargetUri(‘production/final.js‘)

    //添加远程资源但不压缩
    ->addJs(‘code.jquery.com/jquery-1.10.0.min.js‘, true, false)

    //这些资源必须要压缩
    ->addJs(‘common-functions.js‘)
    ->addJs(‘page-functions.js‘)

    //把这些资源放入一个文件内
    ->join(true)

    //使用内置的JsMin过滤器
    ->addFilter(new Phalcon\Assets\Filters\Jsmin())

    //使用自定义过滤器
    ->addFilter(new MyApp\Assets\Filters\LicenseStamper());

开始部分我们通过资源管理器取得了一个命名的集合,集合中可以包含javascript或css资源但不能同时包含两个。一些资源可能位于远程的服务器上 这上结资源我们可以通过http取得。为了提高性能建议把远程的资源取到本地来,以减少加载远程资源的开销。

<?php

//这些Javscript文件放在页面的底端
$js = $manager->collection(‘jsFooter‘);

如上面,addJs方法用来添加资源到集合中,第二个参数指示了资源是否为外部的,第三个参数指示是否需要压缩资源:

<?php

//添加远程资源但不压缩
$js->addJs(‘code.jquery.com/jquery-1.10.0.min.js‘, true, false);

// These are local resources that must be filtered
//添加本地资源并压缩
$js->addJs(‘common-functions.js‘);
$js->addJs(‘page-functions.js‘);

过滤器被注册到集合内,我们可以注册我个过滤器,资源内容被过滤的顺序和过滤器注册的顺序是一样的。

<?php

//使用内置的Jsmin过滤器
$js->addFilter(new Phalcon\Assets\Filters\Jsmin());

//使用自定义的过滤器
$js->addFilter(new MyApp\Assets\Filters\LicenseStamper());

注意:不管是内置的还是自定义的过滤器对集合来说他们都是透明的。最后一步用来确定所有写到同一个文件中还是分开保存。如果要让集合中所有的文件合成 一个文件只需要使用join函数:

<?php

//全并文件
$js->join(true);

//设置最终输出文件
$js->setTargetPath(‘public/production/final.js‘);

//使用此uri引用js
$js->setTargetUri(‘production/final.js‘);

如果资源写入同一文件,则我们需要定义使用哪一个文件来保存要写入的资源数据,及使用一个ur来展示资源。这两个设置可以使用setTargetPath() 和setTargetUri()两个函数来配置。

内置过滤器(Built-In Filters)?

Phalcon内置了两个过滤器以分别实现对js及css的压缩,由于二者是使用c实现的故极大的减少了性能上的开销:

过滤器 说明
Phalcon\Assets\Filters\Jsmin 压缩Javascript文件即去除掉javascript解释器/编译器忽略的一些字符
Phalcon\Assets\Filters\Cssmin 压缩css文件即去除掉浏览器在渲染css时不需要的一些字符

自定义过滤器(Custom Filters)?

除了使用Phalcon内置的过滤器外,开发者还可以创建自己的过滤器。这样我们就可以使用YUI_,
Sass, Closure,等。

<?php

use Phalcon\Assets\FilterInterface;

/**
 * 使用YUI过滤css内容
 * @param string $contents
 * @return string
 */
class CssYUICompressor implements FilterInterface
{

    protected $_options;

    /**
     * CssYUICompressor 构造函数
     *
     * @param array $options
     */
    public function __construct($options)
    {
        $this->_options = $options;
    }

    /**
     * 执行过滤
     * @param string $contents
     * @return string
     */
    public function filter($contents)
    {

        //保存字符吕内容到临时文件中
        file_put_contents(‘temp/my-temp-1.css‘, $contents);

        system(
            $this->_options[‘java-bin‘] .
            ‘ -jar ‘ .
            $this->_options[‘yui‘] .
            ‘ --type css ‘.
            ‘temp/my-temp-file-1.css ‘ .
            $this->_options[‘extra-options‘] .
            ‘ -o temp/my-temp-file-2.css‘
        );

        //返回文件内容
        return file_get_contents("temp/my-temp-file-2.css");
    }
}

用法:

<?php

//取css集合
$css = $this->assets->get(‘head‘);

//添加/启用YUI压缩器
$css->addFilter(new CssYUICompressor(array(
     ‘java-bin‘ => ‘/usr/local/bin/java‘,
     ‘yui‘ => ‘/some/path/yuicompressor-x.y.z.jar‘,
     ‘extra-options‘ => ‘--charset utf8‘
)));

自定义输出(Custom Output)?

OutputJs及outputCss方法可以依据不同的资源类来创建需要的html代码。我们可以重写这个方法或是手动的输出这些资源方法如下:

<?php

foreach ($this->assets->collection(‘js‘) as $resource) {
    echo \Phalcon\Tag::javascriptInclude($resource->getPath());
}
时间: 2024-10-05 05:01:58

Phalcon资源文件管理(Assets Management)的相关文章

资源文件assets和 res下面raw文件的使用不同点

在建立项目中一般会默认建立assets文件,当然我们还可以在res文件下面建立raw文件夹,这里面都可以存放一些图片,音频或者文本信息,可以供我们在程序当中进行使用,不过他们两个也有不同点: assets下面的文件不会被编译,通过路径可以去访问其中的内容.raw中文件会自动编译,我们可以在R.java文件中找到对应的ID, 看下面截图: 那么既然这样那我们平时该怎么样进行把资源放入这两个文件当中呢? 我个人平时喜欢比较文件的大小,如果文件比较大一点的会放入到aeests文件中,因为用这个文件文件

android资源目录---assets与res/raw区别

android资源目录---assets与res/raw的不同 Android 2011-05-24 14:40:21 阅读20 评论0   字号:大中小 订阅 assets:用于存放需要打包到应用程序的静态文件,以便部署到设备中.与res/raw不同点在于,ASSETS支持任意深度的子目录.这些文件不会生成任何资源ID,必须使用/assets开始(不包含它)的相对路径名. res:用于存放应用程序的资源(如图标.GUI布局等),将被打包到编译后的Java中.不支持深度子目录 res/menu:

iOS7——图像资源Images Assets

iOS7初体验(3)——图像资源Images Assets 分类: iOS开发2013-06-18 16:02 17583人阅读 评论(2) 收藏 举报 ios7Images xcassets图像资源 开始之前,首先回顾一下iOS7初体验(1)——第一个应用程序HelloWorld中的一张图,如下所示: 本文分享一下Images.xcassets的体验~_~ 1. 打开此前使用过的HelloWorld项目,然后单击并打开导航区域中的Images.xcassets,看看都有些什么东东:]: 2.

phalcon: 资源文件管 理 引入css,js

<?php class IndexController extends Phalcon\Mvc\Controller { public function index() { //添加本地css资源 $this->assets ->addCss('css/style.css') ->addCss('css/index.css'); //添加本地js资源 $this->assets ->addJs('js/jquery.js') ->addJs('js/bootstr

(文档)流媒体资源 Streaming Assets

Most assets in Unity are combined into the project when it is built. However, it is sometimes useful to place files into the normal filesystem on the target machine to make them accessible via a pathname. An example of this is the deployment of a mov

vue2.0 资源文件assets和static的区别

资源文件处理 在我们的项目结构里,有两个资源文件的路径,分别是:src/assets 和 static/.那这两个到底有什么区别呢? Webpacked 资源 为了回答这个问题,我们首先需要理解webpack是怎样处理静态资源的.在*.vue组件中,所有的templates和css都会被vue-html-loader 和 css-loader解析,寻找资源的URL. 举个例子,在<img src="./logo.png"> 和 background: url(./logo.

转:iOS7初体验(3)——图像资源Images Assets

开始之前,首先回顾一下iOS7初体验(1)——第一个应用程序HelloWorld中的一张图,如下所示: 本文分享一下Images.xcassets的体验~_~ 1. 打开此前使用过的HelloWorld项目,然后单击并打开导航区域中的Images.xcassets,看看都有些什么东东:]: 2. 在图中可以看到中间位置有两个虚线框,感觉应该可以直接拖文件进来.OK,那就先准备一下资源文件,如下图所示: 说明:为方便起见,除Icon7.png之外,其他图标的文件名均沿袭了以往iOS图标的命名规则.

iOS7初体验(3)——图像资源Images Assets

开始之前,首先回顾一下iOS7初体验(1)--第一个应用程序HelloWorld中的一张图,如下所示: 本文便分享一下Images.xcassets的体验~_~ 1. 打开此前使用过的HelloWorld项目,然后单击并打开导航区域中的Images.xcassets,看看都有些什么东东:]: 2. 在图中可以看到中间位置有两个虚线框,感觉应该可以直接拖文件进来.OK,那就先准备一下资源文件,如下图所示: 说明:为方便起见,除Icon7.png之外,其他图标的文件名均沿袭了以往iOS图标的命名规则

WebJars 进行 css js 资源文件管理

WebJars是将这些通用的Web前端资源打包成Java的Jar包,然后借助Maven工具对其管理,保证这些Web资源版本唯一性,升级也比较容易.关于webjars资源,有一个专门的网站http://www.webjars.org/,我们可以到这个网站上找到自己需要的资源,在自己的工程中添加入maven依赖,即可直接使用这些资源了 1. 使用 添加依赖 <dependency> <groupId>org.webjars</groupId> <artifactId&