web-dev-qa-db-ja.com

BowerをGulp.jsと統合するにはどうすればよいですか？

私はいくつかのことをするgulpタスクを書き込もうとしています

  1. Bower依存関係をインストールする
  2. 依存関係の順序でこれらの依存関係を1つのファイルに連結します

これらの依存関係へのパスを指定せずにこれを実行したいと思っていました。コマンド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'
bowergulp
30
Cully Mason

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

リストされたgulpfileを実行しようとして、いくつかのエラーが発生しました。最初のgulpFilter.restoreは関数ではありません。2番目に、フィルター処理されたファイルの復元を計画している場合、フィルターを定義するときに{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'));
});

言及された変更の後、完全に実行されました。 :)

10
Benjamin J. Fisher