codesleeve/asset-pipeline

此包已被废弃，不再维护。没有推荐替代包。

一个简单易用的laravel 4资产管道。

维护者

详细信息

github.com/CodeSleeve/asset-pipeline

来源

问题

安装数: 143,355

依赖者: 6

推荐者: 1

安全: 0

星标: 496

关注者: 22

分叉: 54

开放性问题: 50

v2.1.0 2014-12-02 21:34 UTC

Requires

Requires (Dev)

MIT bee3bae4da3f2dd5a94ae0534d02137bb89c8fbf

  • Kelt Dockins <kelt.woop@dockins.org>

This package is not auto-updated.

Last update: 2022-02-01 12:25:26 UTC

README

新Laravel 5特性Elixir，在gulp上运行，可以帮助你管理资产。我们（Codesleeve）没有计划继续开发此项目以包含L5支持。资产管道将继续接受社区拉取请求。如果您愿意，请随时贡献。

什么是资产管道？

如果您熟悉Rails资产管道和sprockets，您应该会在这个包中使用得如鱼得水。

如果您对Rails资产管道和sprockets不熟悉，我建议您阅读指令介绍。

安装

首先通过Composer安装此包。编辑您项目的composer.json文件，以要求codesleeve/asset-pipeline。

可能看起来像这样

  "require": {
    "laravel/framework": "4.1.*",
    "codesleeve/asset-pipeline": "dev-master"
  }

接下来，在终端更新Composer

    composer update

此操作完成后，添加服务提供者。打开app/config/app.php，将以下项添加到提供者数组中。

    'Codesleeve\AssetPipeline\AssetPipelineServiceProvider',

接下来，可选地，确保您的环境设置正确，因为默认情况下，资产管道将在生产环境中缓存和压缩资产。

在bootstrap/start.php中

  $env = $app->detectEnvironment(array(
    'local' => array('your-machine-name'),
  ));

从终端运行artisan命令以执行assets:setup命令。这将为您创建默认的文件夹结构。

    php artisan assets:setup

使用方法

将这些行放入您的Laravel视图/布局中

    <?= stylesheet_link_tag() ?>
    <?= javascript_include_tag() ?>

这将生成一个在app/assets/application.js和app/assets/application.css中列出的所有依赖项的脚本和链接标签列表。

参数

如果您想控制要使用哪个清单文件，甚至可以在标签上放置属性。这遵循了Rails使用的相同模式，例如，如果我们有这个

    <?= javascript_include_tag('interior/application', ['data-foo' => 'bar']) ?>

假设concat => array('production')并且我们处于生产环境，那么这将生成

    <script src="assets/interior/application.js" data-foo="bar"></script>

指令介绍

让我们打开默认的JavaScript清单文件app/assets/javascripts/application.js。您应该看到类似以下内容

//
//= require jquery
//= require_tree .

这将引入文件/provider/assets/javascripts/jquery.min.js，以及/app/assets/javascripts文件夹中的所有文件和子目录。

这就是您如何控制依赖关系。简单吗？

以下是可以使用的指令列表

  • require filename

    这将在您的paths中引入一个特定的资产文件。

  • require_directory some/directory

    这将在some/directory中引入资产（非递归）。您还可以使用'.'和'..'来解析相对于清单文件本身的路径。

  • require_tree some/directory

    就像require_directory一样，但它递归地引入所有子目录和文件。

  • require_tree_df some/directory

    这个功能与require_tree类似，但它是先包括目录后包括文件，而require_tree是先包括文件再包括目录。如果你在子目录中有依赖关系，并且想要在相同目录下的文件之前包括这些子目录，你可能需要使用这个功能。

  • require_self

    这将引入本身作为资产的表现清单文件。如果在目录中，那么在require_tree .中已经完成了这个操作。你可能需要在有如require_tree subdir/这样的表现清单文件时使用这个功能。

  • include 文件名

    这将引入在您的paths中找到的特定资产文件。这与require不同，因为如果找不到文件，它不会抛出异常。

  • stub 路径

    禁止给定路径。这可以是一个文件，也可以是一个整个目录。请注意，一旦路径被禁止，无论你尝试多少次将其包括在内，它都会被忽略。

  • depend_on 文件名

    让资产管道知道一个不是通过表现清单文件要求的依赖项。如果file1 depend_on file2，那么当file2更改时，file1的本地缓存将被破坏。这对于你在less中使用@import非常有用。

配置

要创建自定义包配置以配置资产管道，请运行

  php artisan config:publish codesleeve/asset-pipeline

路由数组

  'routing' => array(
    'prefix' => '/assets'
  ),

Sprockets解析器也使用这个来帮助我们生成正确的资产Web路径。它也被资产管道用于路由。

路径

  'paths' => array(
    'app/assets/javascripts',
    'app/assets/stylesheets',
    'app/assets/images',
    'lib/assets/javascripts',
    'lib/assets/stylesheets',
    'lib/assets/images',
    'provider/assets/javascripts',
    'provider/assets/stylesheets',
    'provider/assets/images'
  ),

这是我们搜索文件的目录。你可以把它想象成你的操作系统中PATH环境变量。我们按照下面的顺序搜索路径中的文件。

mimes

  'mimes' => array(
      'javascripts' => array('.js', '.js.coffee', '.coffee', '.html', '.min.js'),
      'stylesheets' => array('.css', '.css.less', '.css.scss', '.less', '.scss', '.min.css'),
  ),

为了知道向服务器发送哪种MIME类型，我们需要知道它是否是JavaScript或样式表类型。如果找不到以下扩展名，则只返回常规下载。你应该在这里包含所有扩展名在你的filters中，否则你可能会遇到意外的行为。这应该允许开发者在同一目录中混合JavaScript和CSS文件。

过滤器

  'filters' => array(
    '.min.js' => array(

    ),
    '.min.css' => array(
      new Codesleeve\AssetPipeline\Filters\URLRewrite,
    ),
    '.js' => array(
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\JSMinPlusFilter, App::environment()),
    ),
    '.js.coffee' => array(
      new Codesleeve\AssetPipeline\Filters\CoffeeScript,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\JSMinPlusFilter, App::environment()),
    ),
    '.coffee' => array(
      new Codesleeve\AssetPipeline\Filters\CoffeeScript,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\JSMinPlusFilter, App::environment()),
    ),
    '.css' => array(
      new Codesleeve\AssetPipeline\Filters\URLRewrite,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\CssMinFilter, App::environment()),
    ),
    '.css.less' => array(
      new Assetic\Filter\LessphpFilter,
      new Codesleeve\AssetPipeline\Filters\URLRewrite,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\CssMinFilter, App::environment()),
    ),
    '.css.scss' => array(
      new Assetic\Filter\ScssphpFilter,
      new Codesleeve\AssetPipeline\Filters\URLRewrite,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\CssMinFilter, App::environment()),
    ),
    '.less' => array(
      new Assetic\Filter\LessphpFilter,
      new Codesleeve\AssetPipeline\Filters\URLRewrite,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\CssMinFilter, App::environment()),
    ),
    '.scss' => array(
      new Assetic\Filter\ScssphpFilter,
      new Codesleeve\AssetPipeline\Filters\URLRewrite,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\CssMinFilter, App::environment()),
    ),
    '.html' => array(
      new Codesleeve\AssetPipeline\Filters\JST,
      new EnvironmentFilter(new Codesleeve\AssetPipeline\Filters\JSMinPlusFilter, App::environment()),
    )
  ),

为了使文件与sprockets一起使用，需要在这里列出扩展名。我们还可以使用Assetic过滤器预处理这些扩展类型。

缓存

  'cache' => array(),   // add 'production' here if you want to cache permanently

默认情况下，我们缓存所有文件，无论环境如何。

然而，只有在生产模式或提供给cache的任何环境中，我们才缓存表现清单文件。

缓存服务器

  'cache_server' => new Assetic\Cache\FilesystemCache(App::make('path.storage') . '/cache/asset-pipeline'),

默认情况下，我们使用Assetic的FilesystemCache来处理缓存，但如果你想要以不同的方式处理缓存，你可以创建自己的CacheInterface。

缓存用于加快本地开发和生产的速度。为了了解这是如何工作的，假设你正在处理80个coffeescript文件。你不希望在每次加载页面时都对所有80个文件进行预编译。管道将缓存所有80个coffeescript文件，所以我们只在没有更改的文件之一时运行预编译。这使得在开发时页面加载速度更快。

唯一的缺点是，如果您更改Laravel环境或资产管道的配置，则需要清除缓存才能看到更改的反映。

如果您想清除缓存，请运行以下命令

   php artisan assets:clean

这将清除缓存的文件application.js和application.css以及manifest文件中所有必要的文件。如果您想清理其他文件，可以通过-f或--file参数传入。

  php artisan assets:clean -f interior/application.js -f exterior/application.js -f interior/application.css -f exterior/application.css

如果您不想递归删除manifest文件的缓存文件，则可以传递--recursive=false标志。

注意 如果您使用默认的管道配置，则可以在此目录中删除缓存的文件

  $ rm -f app/storage/cache/asset-pipeline/*

cache_client

  'cache_client' => new Codesleeve\AssetPipeline\Filters\ClientCacheFilter,

如果您想处理304等状态码，以防止用户重新获取您的资产并节省您的带宽，则可以使用处理此功能的缓存客户端驱动程序。这不会在服务器端处理资产，请使用cache_server进行此操作。

注意，这需要实现接口

Codesleeve\Sprockets\Interfaces\ClientCacheInterface

否则将无法正常工作。这是一个围绕您的缓存服务器驱动程序的包装类，并使用AssetCache类帮助访问文件lastModifiedTime，因为Assetic\Cache\CacheInterface没有提供这种能力。

concat

  'concat' => array('production', 'local')

这允许我们在列出的特定环境中打开资产连接。出于性能原因，我们建议保持此功能开启，除非您正在尝试解决javascript问题。

directives

  'directives' => array(
    'require ' => new Codesleeve\Sprockets\Directives\RequireFile,
    'require_directory ' => new Codesleeve\Sprockets\Directives\RequireDirectory,
    'require_tree ' => new Codesleeve\Sprockets\Directives\RequireTree,
    'require_tree_df ' => new Codesleeve\Sprockets\Directives\RequireTreeDf,
    'require_self' => new Codesleeve\Sprockets\Directives\RequireSelf,
    'include ' => new Codesleeve\Sprockets\Directives\IncludeFile,
    'stub ' => new Codesleeve\Sprockets\Directives\Stub,
    'depend_on ' => new Codesleeve\Sprockets\Directives\DependOn,
  ),

这是我们尝试在manifest文件中处理的指令。这允许您替换、添加新指令或修改现有指令以配置管道。

javascript_include_tag

  'javascript_include_tag' => new Codesleeve\AssetPipeline\Composers\JavascriptComposer,

当您执行<?= javascript_include_tag() ?>时，此composer类将被调用。这允许您自己组合javascript标签，如果您想修改javascript标签的打印方式。

stylesheet_link_tag

  'stylesheet_link_tag' => new Codesleeve\AssetPipeline\Composers\StylesheetComposer,

当您执行<?= stylesheet_link_tag() ?>时，此composer类将被调用。这允许您自己组合样式表标签，如果您想修改样式表标签的打印方式。

controller_action

  'controller_action' => '\Codesleeve\AssetPipeline\AssetPipelineController@file',

这是管道将所有传入请求路由到的控制器操作。如果您想替换为您自己的实现，您可以编辑此操作。这允许您完全控制如何将资产服务到浏览器。

sprockets_filter

  'sprockets_filter' => '\Codesleeve\Sprockets\SprocketsFilter',

当连接开启时，从sprockets生成器获取的所有资产都会通过此过滤器类进行过滤。这允许我们在需要以不同方式行为时修改sprockets过滤器。

FAQ

我能否在运行时修改资产管道配置？

您可以监听asset.pipeline.boot事件，这将传递管道对象以供您进行任何更改。

  Event::listen('asset.pipeline.boot', function($pipeline) {
    $config = $pipeline->getConfig();

    $config['paths'][] = 'some/special/javascripts';
    $config['paths'][] = 'some/special/stylesheets';

    $config['mimes']['javascripts'][] = '.foo.bar';

    $config['filters']['.foo.bar'] = array(
      new My\Special\Filter
    );

    $pipeline->setConfig($config);
  });

此代码注册了两个新的路径并创建了一个名为 .foo.bar 的新扩展，该扩展通过 My\Special\Filter 进行过滤。使用事件监听器可以让我们在单独的包中扩展资产管道的功能。

我能否使用 JavaScript 模板（JST）

可以。默认情况下，你可以在 app/assets/javascripts 文件夹中的某个地方使用 .html 文件，你将在前端 JavaScript 中获得一个包含 HTML 页面的 JST 数组。如果你想使用不同的扩展名（例如 jst.hbs），你需要引入它。

我能否处理图片、字体和其他文件？

不在我们配置中的 mime 和 filters 数组中的文件将被视为常规文件。你仍然可以通过 Web URL 访问它们，但它们将触发 Response::download 而不是作为 JavaScript 或 CSS 文件提供。

我能否进行条件包含？

资产管道中没有内置机制用于条件包含资产。我使用的一种技术是在布局视图中对我的 HTML 页面进行命名空间。我创建了一个 View::share，它总是包含当前的路由。

  <html class="<?= $currentRoute ?>" lang="en">

这允许我在 CSS 前缀中包含路由。所以，如果我只想在主页上使用蓝色背景，我可以这样做。

  html.home.index body {
    background-color: blue;
  }

如果你正在尝试在页面上条件性地包含 JavaScript，我建议使用绑定。创建特定的脚本，只有当找到某些数据属性或类名时才会运行。

  $('[data-foo]').each(function()
  {
    console.log('only run when we find data-foo="" attribute');
  });

所以如果我们有一个这样的元素，它将运行

  <a data-foo="bar" href="#">Hey there</a>

如果你在条件性地包含资产时遇到问题，你可能最好将你的清单文件分解成对应用程序有意义的部分。例如，如果你的应用程序被分割成管理部分和用户部分，那么为每个部分有一个单独的清单文件可能是有意义的。

我能否将我的自己的包钩入资产管道？

可以。通过使用事件监听器 asset.pipeline.boot，你可以拦截管道对象并根据自己的意愿修改配置数组。但记住，权力越大，责任越大。以下是一个示例：

Event::listen('asset.pipeline.boot', function($pipeline)
{
    $config = $pipeline->getConfig();
    $config['directives']['awesome_directive'] = new MyAwesomeDirective;
    $pipeline->setConfig($config);
});

那么 MyAwesomeDirective 看起来是什么样子？这完全取决于你。

class MyAwesomeDirective extends Codesleeve\Sprockets\Directives\RequireFile
{
  public function process($param)
  {
      $files = array();

      if (App::environment() === 'local' && $param == 'foobar')
      {
        // do chicken dance and add some files to array
        // also, this needs to be an absolute path to file
        $files[] = __DIR__ . '/chicken/dance.js';
      }

      return $files;
  }
}

我能否使用 nginx？

你可能需要配置 nginx。文件不在 /assets/ 中，所以你很可能会得到一个 404。因此，你需要告诉 nginx，如果找不到文件，则将请求通过 index.php 路由。这可以通过以下方式实现：

  location ~ ^/(assets)/{
    try_files $uri $uri/ /index.php?$args;
    expires max;
    add_header Cache-Control public;
  }

我能否使用旧版本的资产管道？

资产管道已被重构以变得更加智能、简洁和更好。然而，由于事物的工作方式不同，这也带来了破坏性的变化。所以如果你的旧项目指向 dev-master，你可能需要找到一个适合你的标签版本。如果它最近才崩溃，尝试最新的标签减 1。我还通常将更改推送到 dev-testing。

我能否进行图像优化？

资产管道不会为你做这件事。但是，没有任何阻止你通过单独的脚本处理图像优化，然后再通过资产管道包含优化后的图像。

更多信息请参阅 此问题。

缓存是如何工作的？

出于性能考虑，所有文件都使用资产管道配置文件中的cache_server驱动程序进行缓存。这样做是为了您每次重新加载页面和获取资源时，不必预先编译100多个coffeescript和less/sass文件。然而，这有时可能会引起混淆，例如，如果您在资产管道配置中更新了一个过滤器，然后刷新页面，内容仍然被缓存。在这种情况下，您应该手动清除缓存。

当您的环境与配置的缓存数组中找到的环境相匹配时，资源将被永久缓存，直到手动使用assets:clean清除。默认情况下，这曾是production，但由于许多开发者都感到沮丧和困惑，因此已将其删除。因此，如果您想在服务器上使用缓存，则需要选择并编辑您的配置文件。

许可协议

codesleeve资产管道是开源软件，许可协议为MIT许可协议

支持

在您为新增功能提交拉取请求之前，请先提出一个提案请求。对于错误修复，请将其放入问题中跟踪，即使您自己修复了错误并提交了拉取请求。所有拉取请求都在dev-master之前发送到dev-testing。

我们使用Travis CI进行测试，您可以在以下链接查看：https://travis-ci.org/CodeSleeve/asset-pipeline

享受吧！祝您有个愉快的一天！