Question

我迟到了Bower场景。我以为我会用我目前的Express项目尝试一下。我安装了它，并按照说明创建了.bowercc和bower.json文件。我安装了一个我计划使用的Bootstrap皮肤，它带来了jQuery。问题是，你得到了大量的文件，而且我只想使用缩小版的JS，CSS和字体。

在搜索网络之后，我发现了很多关于使用gulp或grunt来筛选文件，并将它们传输到Express提供的/public文件夹。我的问题是：你怎么做得好？我如何获得我需要的文件？或者我是否更好地关注前面的凉亭，只需下载zip文件，获取最终结果并放入/public文件夹？

Answer 1

查看评论，似乎答案是肯定的 - 需要手动作业才能将您的组件分发到public文件夹。使用gulp将自动化它，但基本上它一开始就是一个小小的错过，需要一些微调。如果有人提出这个问题，这就是我采用的解决方案：

1）在bower.json文件中提供包覆盖，以确保只暴露缩小的文件：

{
  "name": "charlie",
  "dependencies": {
    "bootstrap-material-design": "~0.3.0"
  },
  "overrides": {
    "bootstrap-material-design": {
      "main": ["**/dist/js/*.min.js", "**/dist/css/*.min.css", "**/dist/fonts/*"]
    },
    "jquery": {
      "main": "**/dist/jquery.min.js"
    }
  }
}

2）使用main-bower-files gulp包抓住那些“主电源”并将它们分发到最终位置。这是我的gulpfile.json（只是凉亭部分：

var bower = require('main-bower-files');
var gulpFilter = require('gulp-filter');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var clean = require('gulp-clean');
var debug = require('gulp-debug');


var getDist = function(vendor) {
  var publicDir = 'public';
  var dist = vendor ? publicDir + '/vendor' : publicDir;
  return {
    dir: dist,
    css: dist + '/css/',
    js: dist + '/js/',
    fonts: dist + '/fonts/'
  };
};

gulp.task('cleanVendor', function() {
  return gulp.src(getDist(true).dir, {read: false})
    .pipe(clean());
});

gulp.task('bower', ['cleanVendor'], function() {
  var dist = getDist(true);
  var jsFilter = gulpFilter('**/*.js');
  var cssFilter = gulpFilter('**/*.css');
  var fontsFilter = gulpFilter(['**/*.woff*', '**/*.eot', '**/*.svg', '**/*.ttf']);
  return gulp.src(bower())
    .pipe(fontsFilter)
    .pipe(gulp.dest(dist.fonts))
    .pipe(fontsFilter.restore())
    .pipe(jsFilter)
    .pipe(gulp.dest(dist.js))
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe(gulp.dest(dist.css))
    .pipe(cssFilter.restore());
});

3）在您的HTML文件中，添加/vendor/js/blah.min.js或/vendor/css/blah.min.css

注意：令人讨厌的部分是我必须在fontsFilter中指定每个字体扩展名。我尝试使用'**/fonts/*'，但main-bower-files返回一个平面文件列表，如果你提供{base: 'mybase'}参数，它会返回一个树，这意味着你得到每个文件的整个树结构 - 任何人可以拿出一个修复，邀请提交答案。

使用Bower和Express

1 个答案: