README

Baun 插件，用于添加 gulp 资产清单助手

• Packagist 上的 Laravel 仓库
• GitHub 上的 Laravel 仓库

安装

在命令行中运行

$ composer require torann/baun-asset-manifest

安装完成后，您需要将插件与应用程序注册。打开 config/plugins.php 文件，添加插件命名空间。

<?php

return [

    ...

    'Torann\AssetManifest\Manifest',

];

资产目录

在您的 config/app.php 文件中添加资产目录名称，相对于 public 目录。

<?php

return [

    ...

    // Assets folder name
    'assets_dir' => 'assets',
    
];

使用 Gulp 的资产

示例 gulp 文件，当运行 gulp --env=production 时创建 manifest JSON 文件。

var gulp       = require('gulp'),
    gulpif     = require('gulp-if'),
    less       = require('gulp-less'),
    concat     = require('gulp-concat'),
    minifyCSS  = require('gulp-minify-css'),
    uglify     = require('gulp-uglify'),
    watch      = require('gulp-watch'),
    rename     = require('gulp-rename'),
    argv       = require('yargs').argv,
    prefix     = require('gulp-autoprefixer'),
    rev        = require('gulp-rev');

// Options
var options = {
    target: argv.target || 'public/assets',
    env: argv.env || 'local'
};

// Is a production build
var IS_PROD_BUILD = (options.env === 'production');

// Error catcher
function swallowError (err) {
    console.error(err);
    throw err;
}

// Compile Less and save to stylesheets directory
gulp.task('less', function () {

    var destDir = options.target + '/css/',
        destFile = 'app.css';

    return gulp.src('resources/assets/less/app.less')
        .pipe(less())
        .on('error', swallowError)
        .pipe(prefix('last 2 versions', '> 1%', 'Explorer 7', 'Android 2'))
        .pipe(gulpif(IS_PROD_BUILD, minifyCSS()))
        .pipe(rename(destFile))
        .pipe(gulp.dest(destDir));
});

// Publish JavaScript
gulp.task('scripts', function () {

    var destDir = options.target + '/js/',
        destFile = 'app.js';

    return gulp.src([
            'resources/assets/js/main.js'
        ])
        .on('error', swallowError)
        .pipe(concat(destFile))
        .pipe(gulpif(IS_PROD_BUILD, uglify()))
        .pipe(gulp.dest(destDir));
});

// What tasks does running gulp trigger?
gulp.task('default', ['build']);

gulp.task('watch', ['build'], function() {
    gulp.watch('resources/assets/less/**/*.less', ['less']);
    gulp.watch('resources/assets/js/**/*.js', ['scripts']);
});

gulp.task('build', ['less', 'scripts'], function () {
    // Create manifest of assets
    if (IS_PROD_BUILD) {
        return gulp.src(options.target + '/**/*.{css,js}')
            .pipe(gulp.dest(options.target))
            .pipe(rev())
            .pipe(gulp.dest(options.target))
            .pipe(rev.manifest())
            .pipe(gulp.dest('./'));
    }
});

用法

在模板内部，您可以使用 {{ asset('css/app.css') }} 简单地从清单文件获取资产。

<link rel="stylesheet" href="{{ asset('css/app.css') }}">