如何将 Bower 与 Gulp.js 集成? [英] How can I integrate Bower with Gulp.js?

问题描述

我正在尝试编写一个执行一些操作的 gulp 任务

I am trying to write a gulp task that does a few things

1. 安装 Bower 依赖项
2. 将这些依赖项按照依赖项的顺序合并到一个文件中

我希望这样做而不必指定这些依赖项的路径.我知道有命令 bower list --paths 但我不确定是否可以将它捆绑在一起.

I was hoping to do this without having to specify the paths to those dependencies. I know there is the command bower list --paths but I am unsure of if it is possible to tie it together.

有什么想法吗?

所以我正在尝试使用 gulp-bower-files 并且我收到一个 eaccess 错误及其不生成连接文件.

So I am trying to use the gulp-bower-files and I am getting an eaccess error and its not generating the concatenated file.

gulpfile.js

var gulp = require('gulp');
var bower = require('bower');
var concat = require('gulp-concat');
var bower_files = require('gulp-bower-files');

gulp.task("libs", function(){
    bower_files()
    .pipe(concat('./libs.js'))
    .pipe(gulp.dest("/"));
});

bower.json

{
  "name": "ember-boilerplate",
  "version": "0.0.0",
  "dependencies": {
    "ember": "1.6.0-beta.1",
    "ember-data": "1.0.0-beta.7"
  }
}

我一直遇到这个错误

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: EACCES, open '/libs.js'

推荐答案

使用 main-bower-文件

它会抓取项目的 bower.json 中定义的 Bower 包的所有生产(主)文件，并将它们用作任务的 gulp src.

It grabs all production (main) files of your Bower packages defined in your project's bower.json and use them as your gulp src for your task.

将它集成到您​​的 gulpfile 中:

integrate it in your gulpfile:

var mainBowerFiles = require('main-bower-files');

我做了这个任务，它抓取所有生产文件，过滤 css/js/fonts 并将它们输出到它们各自子文件夹 (css/js/fonts) 的公共文件夹中.

I made this task that grabs all production files, filters css/js/fonts and outputs them in the public folder in their respective subfolders (css/js/fonts).

这是一个例子:

var gulp = require('gulp');

// define plug-ins
var flatten = require('gulp-flatten');
var gulpFilter = require('gulp-filter'); // 4.0.0+
var uglify = require('gulp-uglify');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var mainBowerFiles = require('main-bower-files');

// Define paths variables
var dest_path =  'www';
// grab libraries files from bower_components, minify and push in /public
gulp.task('publish-components', function() {

        var jsFilter = gulpFilter('**/*.js');
        var cssFilter = gulpFilter('**/*.css');
        var fontFilter = gulpFilter(['**/*.eot', '**/*.woff', '**/*.svg', '**/*.ttf']);

        return gulp.src(mainBowerFiles())

        // grab vendor js files from bower_components, minify and push in /public
        .pipe(jsFilter)
        .pipe(gulp.dest(dest_path + '/js/'))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest(dest_path + '/js/'))
        .pipe(jsFilter.restore())

        // grab vendor css files from bower_components, minify and push in /public
        .pipe(cssFilter)
        .pipe(gulp.dest(dest_path + '/css'))
        .pipe(minifycss())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(gulp.dest(dest_path + '/css'))
        .pipe(cssFilter.restore())

        // grab vendor font files from bower_components and push in /public
        .pipe(fontFilter)
        .pipe(flatten())
        .pipe(gulp.dest(dest_path + '/fonts'));
});

这篇关于如何将 Bower 与 Gulp.js 集成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！