如何将Bower与Gulp.js集成?

时间:2014-04-07 00:25:06

标签: bower gulp

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

  1. 安装Bower依赖项
  2. 按依赖项的顺序将这些依赖项绑定到一个文件中
  3. 我希望这样做而不必指定这些依赖项的路径。我知道有bower list --paths命令,但我不确定是否可以将它绑在一起。

    有什么想法吗?

    修改

    所以我正在尝试使用gulp-bower-files,我收到了一个eaccess错误,并且没有生成连接文件。

    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'
    

2 个答案:

答案 0 :(得分:50)

使用main-bower-files

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

将它集成到你的gulpfile中:

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

我做了这个任务,抓取所有生产文件,过滤css / js / fonts并将它们输出到各自子文件夹(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'));
});

答案 1 :(得分:10)

我试图运行列出的gulpfile并遇到一些错误。第一个gulpFilter.restore不是函数,其次,如果您计划还原已过滤的文件,则需要在定义过滤器时传递{restore:true}。 像这样:

// gulpfile.js

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

var gulp = require('gulp');

// define plug-ins
var flatten = require('gulp-flatten'),
  gulpFilter = require('gulp-filter'),
  uglify = require('gulp-uglify'),
  minifycss = require('gulp-minify-css'),
  rename = require('gulp-rename'),
  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', {restore: true}),
      cssFilter = gulpFilter('*.css', {restore: true}),
      fontFilter = gulpFilter(['*.eot', '*.woff', '*.svg', '*.ttf'], {restore: true});

  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'));
});

提到的更改后,它完美运行。 :)