Gulp bower图像路径

Gulp bower image path

本文关键字：路径 图像 bower Gulp      更新时间：2023-09-26

我对gullow的设置有问题。当我想使用插件时，我看到了这个问题。Ie.add安装"jurejan/raty#bower软件包修复程序"，我看不到图像。

我认为源的路径不好（我的设置..），因为插件想要图像路径"star half-png"，但现在只有当我将其更改为"/images/star half-pnng"时才有效。

在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']);

并在gullfile中：

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/，也可以不更改路径，直接设置图像选项，就像上面的演示一样。

相关文章：