将gulp任务与PHP视图文件结合使用


Using gulp tasks with PHP view files

这个问题更多的是理论性的,而不是实践性的。假设我有一个基于PHP框架Symphony/Zend的项目,我也使用gulp进行前端工作。我想以专业的方式完成这个项目,所以我使用了gull插件,如jade、clean、uglify、minimy、gzip、imagemin和rev。如果有人不知道这是什么,我们开始:

Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css

例如,缓存静态文件是件好事。

所以,这里有一个问题
我运行gullow任务,我得到了以下文件:

- assets
  - css
    - style-bfd65634.css
  - js
    - vendor-mkg5454.js
  - img
    - background-ok54353.png
   etc...

在我完成前端工作后,我想把它放在PHP框架的视图文件(phtml文件)中,例如:layout.phtml

...
<link type="text/css" rel="stylesheet" media="screen" href="<?php echo $this->basePath(); ?>/assets/css/style-bfd65634.css">
...
<div id="logo">
    <img src="<?php echo $this->basePath(); ?>/assets/img/background-ok54353.png" />
</div>
...

js文件、图像等也是如此。
几周后,我不得不更改CSS样式,现在怎么办?如何在不需要更改PHP框架中的phtml文件的情况下重新运行gull任务?或者我必须手动更改每个phtml文件中修改的文件吗
如果是这样的话,那么使用gulp-rev这样的插件有什么意义呢?只针对静态网站?据我所知,没有任何插件可以将jade文件转换为带有PHP标签

的phtml

您需要使用gulp-inject将那些新创建的文件注入到特定位置。

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:css -->
  <link rel="stylesheet" href="/src/style1.css">
  <link rel="stylesheet" href="/src/style2.css">
  <!-- endinject -->
</head>
<body>

只针对静态网站?

大部分是肯定的。

要对php执行同样的操作,您应该使用包装器函数来显示资源资产url。

该包装器函数将获取相对url,将其与实际文件路径匹配,获取文件的最后更新时间,并将其附加到返回的url中,例如url/to/asset.some?l=<filemtime value>

参见http://php.net/manual/fr/function.filemtime.php


我必须提到的是,另一种方法是通过grunt构建链构建php文件,请参阅wiredep。但我不推荐。看https://github.com/stephenplusplus/grunt-wiredep

插件gulp-rev生成带有映射的rev-manifest.json文件:

{
  "css/main.css": "css/main-f95991b528.css",
  "js/main.js": "js/main-5598f71801.js"
}

Laravel框架中有一个漂亮的解决方案,使用php中的elixir函数。

<link rel="stylesheet" type="text/css" href="<?php echo elixir("css/main.css") ?>">

elixir功能:

    function elixir($file)
    {
        static $manifest = null;
        if (is_null($manifest)) {
            $manifest = json_decode(file_get_contents(public_path('build/rev-manifest.json')), true);
        }
        if (isset($manifest[$file])) {
            return '/build/'.$manifest[$file];
        }
        throw new InvalidArgumentException("File {$file} not defined in asset manifest.");
    }