Gulp bower 图片路径

Gulp bower image path

我的设置有问题 gulp。当我想使用插件时,我看到了这个问题。 IE。添加安装 "juriejan/raty#bower-package-fix",我 看不到图像

我认为源路径不正确(我的设置..),因为插件需要图像路径 'star-half.png',但现在只有当我将其更改为“/images/star-half.png”时才能正常工作。

在 build.js 我有:

var gulp = require('gulp');

var paths = gulp.paths;

var $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});

gulp.task('images', function () {
  return gulp.src($.mainBowerFiles())
    .pipe($.filter('**/*.{png,jpg,jpeg,bmp}'))
    .pipe($.flatten())
    .pipe(gulp.dest(paths.dist + '/images/'));
});
gulp.task('build', ['html', 'images', 'fonts', 'misc']);

并在 gulp 文件中:

var gulp = require('gulp');

gulp.paths = {
  src: 'src',
  dist: '../public',
  tmp: '.tmp',
  e2e: 'e2e'
};

bower 安装在 'public/images/'

中创建图像文件

项目树是

my-app   
  |-front
    |- bower.json
    |- package.json
  |- public
    |-images

我试过这样的东西,但是钢不工作:

gulp.task('images', function () {
    return gulp.src(paths.src + '/images/**/*')
        .pipe(gulp.dest(paths.dist + '/images/'));
});

查看 raty

中包含的演示

您可以在这里看到他们如何声明图像的路径:

$('#starHalf').raty({
  half     : true,
  path     : null,
  starHalf : 'demo/images/star-half-mono.png',
  starOff  : '../lib/images/star-off.png',
  starOn   : '../lib/images/star-on.png'
});

https://github.com/wbotelhos/raty/blob/master/demo/index.html#L3702

如果您已经在使用 gulp 将图像复制到 /images/ 文件夹,您可以将路径设置为 /images/ 或者不更改路径并设置图像选项直接像上面的演示一样。