javascript - Gulp bower 图像路径

Question

我的设置有问题。当我想使用插件时我看到这个问题。 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']);

并在 gulpfile 中:

var gulp = require('gulp');

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

bower install 在'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/'));
});

Answer 1

看看 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/ 或不更改路径并设置像上面的演示一样直接选择图像。