trentrichardson/cakephp-shrink

编译、合并和压缩javascript、coffee、less、scss和css

3.0.6 2017-12-07 15:19 UTC

This package is not auto-updated.

Last update: 2024-09-10 18:16:19 UTC


README

关于

Shrink 插件可以编译、合并和压缩javascript和css。它目前支持原生javascript和css,Less(php和node版本),Sass(php和ruby版本),CoffeeScript和TypeScript。

Shrink 是一个配置简单的插件。如果您需要功能强大且可配置的资产压缩器,请考虑使用 Mark Story的asset_compress

安装

本版本适用于 CakePHP 3,对于其他版本的 CakePHP,请检查 GitHub 上的分支。

建议使用 composer 安装: "trentrichardson/cakephp-shrink": "~3.0"。然后在 bootstrap.php 中启用插件 Plugin::load('Shrink');Plugin::loadAll();

您也可以手动下载 Shrink 并将其放置在 app/Plugin 文件夹中

在 bootstrap.php 中使用 Plugin::load('Shrink',['autoload'=>true]);Plugin::loadAll(); 启用插件。手动安装时,需要将自动加载标志设置为 true。

将 "Shrink.Shrink" 添加到您控制器中的 $helpers 属性。通常是 AppController.php。

使用方法

您可以使用 Shrink 的方式与您已经使用的 Html 辅助函数使用 js 和 css 相同。细微的区别是您必须包含文件扩展名(因为您现在可以处理 less,sass,coffee),以及文件后的参数。

/**
* Adds a css file to the file queue
* @param array/string files - string name of a file or array containing multiple string of files
* @param bool immediate - true to immediately process and print the file, false to merge with others
* @param string how - 'link' to print <link>, 'embed' to use <style>...css code...</style>
* @return string - when $immediate=true the tag will be printed, "" otherwise
*/
public function css($files, $immediate=false, $how='link')

/**
* Adds a js file to the file queue
* @param array/string files - string name of a file or array containing multiple string of files
* @param bool immediate - true to immediately process and print the file, false to merge with others
* @param string how - 'link' for <script src="">, 'async' for <script src="" async>, 'embed' for <script>...js code...</script>
* @return string - when $immediate=true the tag will be printed, "" otherwise
*/
public function js($files, $immediate=false, $how='link')

/**
* Processes/minify/combines queued files of the requested type.
* @param string type - 'js' or 'css'. This should be the end result type
* @param string how - 'link' for <script src="">, 'async' for <script src="" async>, 'embed' for <script>...js code...</script>
* @param array files - string name of a file or array containing multiple string of files
* @return string - the <script> or <link>
*/
$this->Shrink->fetch($type, $how='link')

假设您有一个布局和一个位于 users 控制器的视图中。视图顶部可能包含

<?php
	// View/Users/edit.ctp
	$this->Shrink->css(['users/edit.less']);
	$this->Shrink->js(['users/edit.coffee']);
?>

然后在布局中

<?php
	// View/Layouts/default.ctp
	$this->Shrink->css(['bootstrap.css', 'site.less']);
	echo $this->Shrink->fetch('css');

	$this->Shrink->js(['jquery.js', 'site.coffee']);
	echo $this->Shrink->fetch('js');
?>

Shrink 会看到有视图传递 js 和 css 以及布局,并将它们合并在一起(布局的 css 和 js,然后是视图的 css 和 js)

一旦调用 fetch,该类型的队列就会清除,您可以再次排队。

选项

选项的传递方式与其他辅助函数相同。

// in your AppController.php
$helpers = array('Form','Html',
	'Shrink.Shrink'=>array(
		'url'=>'http://assets.trentrichardson.com'
	)
);

您还可以使用 Configure 传递选项,但是任何直接传递给辅助函数的选项(如上所示)将覆盖使用 Configure 设置的选项

Configure::write('Shrink.url', 'http://assets.trentrichardson.com');

可传递的可用选项有

public $settings = array(
	'js'=>array(
			'path'=>'js/',        // folder to find src js files
			'cachePath'=>'js/',   // folder to create cache files
			'minifier'=>'jsmin'   // minifier to minify, false to leave as is
		),
	'css'=>array(
			'path'=>'css/',       // folder to find src css files
			'cachePath'=>'css/',  // folder to create cache files
			'minifier'=>'cssmin', // minifier name to minify, false to leave as is
			'charset'=>'utf-8'    // charset to use
		),
	'url'=>'',                     // url without ending /, incase you access from another domain
	'prefix'=>'shrink_',           // prefix the beginning of cache files
	'debugLevel'=>1                // compared against Core.debug, eq will recompile, > will not minify
);

扩展

扩展 Shrink 非常简单,可能只需要几行代码。有两个抽象层,编译器和压缩器。

编译器用于类似 Coffee、Less 等文件类型。这些可以在 app/Plugin/Shrink/src/Lib/ShrinkCompiler 文件夹中找到。文件和类名按照文件扩展名命名。Less 文件具有 .less 扩展名,因此将创建 ShrinkCompilerLess.php。每个编译器都必须将 $resultType 变量设置为 'js' 或 'css'(最终结果类型),并实现 compile 方法。

压缩器用于在编译为 js 或 css 之后压缩代码。这些可以在 app/Plugin/Shrink/src/Lib/ShrinkCompressor 中找到。文件和类名按照设置中的选项命名(js 或 css 的最小化器选项)。例如,如果将 css 的最小化器选项设置为 cssmin,则文件名将为 ShrinkCompressorCssmin.php。每个压缩器类必须实现 compress 方法。

扩展编译器或压缩器的最简单方法是将现有版本之一复制。您还会注意到编译器和压缩器扩展了 ShrinkBase。这是一个实用程序类,目前提供了一个 "cmd" 方法来执行命令。

测试

如果您正在对代码进行修改,创建测试并确保您的代码处于通过状态是一个好主意。测试通过phpunit运行。由于cakephp-shrink提供了对命令行工具和composer包的支持,您必须在运行测试之前安装它们。

composer install
npm install -g less
npm install -g coffee-script
npm install -g typescript
gem install sass

根据您的配置,您可能需要使用sudo。要运行测试,只需调用phpunitvendor/bin/phpunit

Build Status

许可证

版权所有 2015 Trent Richardson

您可以在MIT或GPL许可证下使用此项目。

http://trentrichardson.com/Impromptu/GPL-LICENSE.txt

http://trentrichardson.com/Impromptu/MIT-LICENSE.txt