Compilation 使用Gulp在Rails应用程序中编译Bower组件

我用一组Gulp任务设置了我的Rails应用程序，这些任务将我的应用程序资产和供应商资产（样式和脚本）编译在一起，并将它们适当地输出到

public

目录中。这很好，但它确实意味着当图像等资产从组件js或css文件链接到组件js或css文件时，由于主文件已编译，因此无法找到它

我已经研究了各种各样的解决方案，但似乎没有什么能满足我的需求，或者我似乎无法让它们发挥作用

理想情况下（我认为），我希望找出组件请求的图像等，并将它们移动到我的

public/assets

目录中的适当位置，然后更新引用以反映这一点

我在下面发布了我的完整的吞咽文件，这样你就可以看到我到目前为止所拥有的东西，但是任何关于我如何进行上述工作的帮助都将不胜感激

var gulp          = require('gulp');
var sass          = require('gulp-sass');
var concat        = require('gulp-concat');
var rename        = require('gulp-rename');
var util          = require('gulp-util');
var postcss       = require('gulp-postcss');
var autoprefixer  = require('autoprefixer');
var cssnano       = require('cssnano');
var svgstore      = require('gulp-svgstore');
var svgmin        = require('gulp-svgmin');
var path          = require('path');
var replace       = require('gulp-replace');


// ===============================================================

var is_production = !(util.env.dev);

// ===============================================================

var vendor_styles = [
  './vendor/assets/bower-components/flickity/dist/flickity.css',
  './vendor/assets/bower-components/animate.css/animate.css',
  './vendor/assets/bower-components/leaflet/dist/leaflet.css'
];

var vendor_scripts = [
  './vendor/assets/bower-components/jquery/dist/jquery.min.js',
  './vendor/assets/bower-components/flickity/dist/flickity.pkgd.min.js',
  './vendor/assets/bower-components/jquery-ujs/src/rails.js',
  './vendor/assets/bower-components/modernizr/modernizr.js',
  './vendor/assets/bower-components/fancybox/source/jquery.fancybox.js',
  './vendor/assets/bower-components/jquery-backstretch/jquery.backstretch.js',
  './vendor/assets/bower-components/photoswipe/dist/photoswipe.min.js',
  './vendor/assets/bower-components/photoswipe/dist/photoswipe-ui-default.min.js',
  './vendor/assets/bower-components/drop/drop.min.js',
  './vendor/assets/bower-components/uri.js/src/URI.js',
  './vendor/assets/bower-components/svg4everybody/dist/svg4everybody.js',
  './vendor/assets/bower-components/css-element-queries/src/ResizeSensor.js',
  './vendor/assets/bower-components/leaflet/dist/leaflet.js',
  './vendor/assets/markermanager.js',
  './vendor/assets/jquery-throttle-debounce.js'
];

// ===============================================================

gulp.task('styles', function() {
  var postcss_tools = [
    autoprefixer({
      browsers: ['last 3 versions']
    })
  ];

  if (is_production) {
    postcss_tools.push(cssnano());
  }

  gulp.src('./app/assets/stylesheets/**/*.{sass,scss}')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(rename('application.css'))
    .pipe(postcss(postcss_tools))
    .pipe(replace(/(url\(\.\.\/|\.\.\/)/i, '../bower_components/'))
    .pipe(gulp.dest('./public/assets/stylesheets'));
});

gulp.task('scripts', function() {
  gulp.src('./app/assets/javascripts/**/*.js')
    .pipe(concat('application.js'))
    .pipe(gulp.dest('./public/assets/javascripts'))
});

gulp.task('vendor_styles', function() {
  gulp.src(vendor_styles)
    .pipe(concat('vendor.css'))
    .pipe(gulp.dest('./public/assets/stylesheets'))
});

gulp.task('vendor_scripts', function() {
  gulp.src(vendor_scripts)
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('./public/assets/javascripts'))
});

gulp.task('svgs', function () {
  gulp.src('./app/assets/svgs/**/*.svg')
    .pipe(svgmin(function getOptions (file) {
      var prefix = path.basename(file.relative, path.extname(file.relative));
      return {
        plugins: [{
          cleanupIDs: {
            prefix: prefix + '-',
            minify: true
          }
        }]
      }
    }))
    .pipe(svgstore())
    .pipe(rename('application.svg'))
    .pipe(gulp.dest('./public/assets/svgs'));
});

// ===============================================================

gulp.task('watch', ['styles', 'scripts', 'vendor_styles', 'vendor_scripts', 'svgs'], function() {
  gulp.watch('./app/assets/stylesheets/**/*.scss', ['styles']);
  gulp.watch('./app/assets/javascripts/**/*.js', ['scripts']);
  gulp.watch('./app/assets/svgs/**/*.svg', ['svgs']);
});

gulp.task('default', ['watch']);

---

如果将引用的资产复制到正确的相对路径中，则不需要修改URL

实例 假设您有一个名为componentA的bower组件，其

styleA.css

引用了

logoA.jpg

：

.logo {
   background-image: url('./img/logoA.jpg') top left no-repeat;
}

该模块的结构如下所示：

bower_comonents/
\_ componentA/
  \_ styleA.css
  \_ img/
    \_ logoA.jpg

编译在

public/

文件夹中生成

application.css

。此文件包含对

logoA.jpg

（

/img/logoA.jpg

）的引用。为了使此引用生效，

logoA.jpg

需要复制到正确的相对路径中， 因此，编译后的结构如下所示：

public/
\_ application.css
\_ img/
  \_ logoA.jpg

解决方案 我建议您做与JavaScript和CSS源代码相同的事情。只需在一个变量中列出它们，并在一个单独的吞咽任务中复制到

public

比如：

var vendor_assets = [
  './vendor/assets/bower-components/flickity/dist/images/flickity.jpg',
  './vendor/assets/bower-components/leaflet/dist/images/leaflet.png',
];

gulp.task('vendor_assets', function() {
  gulp.src(vendor_assets)
    .pipe(gulp.dest('./public/assets/'))
});

---

这并不是我一直坚持的。这是如何将文件中的所有引用更改为我遇到问题的资产位置。是的，但如果将引用的资产复制到正确的相对路径中，则不需要这样做。我将预兆我的答案。这显然不是Rails项目。你为什么这么说？它实际上是一个Rails应用程序