README

注意：该项目已被终止，以支持 Elixir

资产管理器

这是一个用于Laravel的小助手包，可用于与例如 Gulp 结合使用。

该包的优势在于它 自动处理版本化资源。使用版本化资源，当资源更改时，您可以受益于 缓存破坏。这样，您的客户端将始终使用正确的资源，而不是旧缓存版本。

例如，下面的 gulpfile.js 将生成 public/css/styles-{hash}.css 和 public/js/scripts-{hash}.js 文件，其中 {hash} 是构建文件的MD5哈希。

通过使用 Asset 面具，您将能够包含这些资源，而无需关注这些哈希。

例如，Asset::scripts('frontend') 将产生 <script src="public/js/scripts-627d37eb.js"></script>。

安装

1. 将 "modbase/asset-manager": "0.1.*" 添加到您的 composer.json 文件中。
2. 运行 composer update
3. 将 'Modbase\AssetManager\AssetManagerServiceProvider' 添加到您的服务提供者在 app/config/app.php 中。

示例 gulpfile.js

var gulp = require('gulp');
var styl = require('gulp-styl');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rev = require('gulp-rev');
var clean = require('gulp-clean');
var filename = require('gulp-asset-manifest');

// Paths to your asset files
var paths = {
    frontend: {
        scripts: [
            'app/assets/javascript/vendor/**/*.js',
            'app/assets/javascript/*.js'
        ],
        styles: [
            'app/assets/css/vendor/**/*.css',
            'app/assets/css/*.css'
        ]
    }
}

// CSS task
gulp.task('css', function() {
    // Cleanup old assets
    gulp.src('public/css/styles-*.css', { read: false }).pipe(clean());

    // Prefix, compress and concat the CSS assets
    // Afterwards add the MD5 hash to the filename
    gulp.src(paths.frontend.styles)
        .pipe(styl({ compress: true }))
        .pipe(concat('styles.css'))
        .pipe(rev())
        .pipe(filename({ bundleName: 'frontend.styles' })) // This will create/update the assets.json file
        .pipe(gulp.dest('public/css'));
});

// JavaScript task
gulp.task('js', function() {
    // Cleanup old assets
    gulp.src('public/js/scripts-*.js', { read: false }).pipe(clean());

    // Concat and uglify the JavaScript assets
    // Afterwards add the MD5 hash to the filename
    gulp.src(paths.frontend.scripts)
        .pipe(concat('scripts.js'))
        .pipe(uglify())
        .pipe(rev())
        .pipe(filename({ bundleName: 'frontend.scripts' })) // This will create/update the assets.json file
        .pipe(gulp.dest('public/js'));
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['css', 'js']);

Laravel 面具

在视图中使用此方法：Asset::styles('frontend') 和 Asset::scripts('frontend')。

styles() 和 scripts() 方法的参数对应于在 gulpfile.js 中提供的 bundleName 前缀。在上面的示例中，它是 frontend。始终以 .scripts 或 .styles 结尾 bundleName，以便 AssetManager 知道要获取什么。

示例工作流程

1. 使用上面的示例 gulpfile.js 并更新您想要的任何内容，但请注意 bundleName 选项！
2. 在您的 master.blade.php 中（假设您正在使用出色的 Blade 模板引擎并具有主布局）将 {{ Asset::styles('frontend') }} 添加到您的 head 部分。将 {{ Asset::scripts('frontend') }} 添加到 HTML 的底部（您应该在底部放置JavaScript，就在关闭 body 标签之前，以提高加载速度）。
3. 根据 gulpfile.js 的路径将您的资源添加到 app/assets/css 和 app/assets/js 中。
4. 每次更新资源时运行 gulp 或 gulp css 或 gulp js（或者简单地使用 gulp watch）。
5. 享受吧！