web-dev-qa-db-fra.com

Comment puis-je intégrer Bower à Gulp.js?

J'essaie d'écrire une tâche de gorgée qui fait quelques choses

  1. Installer les dépendances Bower
  2. Concattez ces dépendances dans un fichier dans l'ordre des dépendances

J'espérais le faire sans avoir à spécifier les chemins d'accès à ces dépendances. Je sais qu'il y a la commande bower list --paths mais je ne sais pas s'il est possible de le lier ensemble.

Des pensées?

Éditer

J'essaie donc d'utiliser les gulp-bower-files et j'obtiens une erreur d'accès et cela ne génère pas le fichier concaténé.

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"
  }
}

et je continue de rencontrer cette erreur

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

Utilisez main-bower-files

Il saisit tous les fichiers de production (principaux) de vos packages Bower définis dans bower.json de votre projet et les utilise comme votre gulp src pour votre tâche.

intégrez-le dans votre gulpfile:

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

J'ai fait cette tâche qui saisit tous les fichiers de production, filtre les css/js/polices et les sort dans le dossier public dans leurs sous-dossiers respectifs (css/js/fonts).

Voici un exemple:

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

J'essayais d'exécuter le gulpfile répertorié et j'ai rencontré quelques erreurs. Tout d'abord, gulpFilter.restore n'est pas une fonction, et deuxièmement, si vous prévoyez de restaurer les fichiers filtrés, vous devez passer {restore: true} lorsque vous définissez vos filtres. Ainsi:

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

Après les changements mentionnés, il s'est parfaitement déroulé. :)

10
Benjamin J. Fisher