Comment puis-je intégrer de Verdure avec Gulp.js?

Je suis en train d'écrire une gorgée tâche qui n'quelques choses

  1. Installer la Charmille dépendances
  2. Concat ces dépendances dans un seul 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 existe la commande bower list --paths mais je suis pas sûr de savoir si il est possible de l'attacher ensemble.

Toutes les pensées?

Modifier

Donc je suis en train d'utiliser le gulp-bower-fichiers et je suis un eaccess erreur et ce n'est pas de générer 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("/"));
});

de verdure.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 à venir à travers cette erreur

events.js:72
        throw er; //Unhandled 'error' event
              ^
Error: EACCES, open '/libs.js'
InformationsquelleAutor Cully Mason | 2014-04-07
  1. 50

    Utilisation principal-bower-fichiers

    Il s'empare de la totalité de la production (principale) de fichiers de votre Bower paquets définis dans votre projet de verdure.json et de les utiliser comme votre gulp src pour votre tâche.

    l'intégrer dans votre gulpfile:

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

    J'ai fait cette tâche qui attrape tous les fichiers de production, les filtres css/js/polices et les sorties 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'));
});
    • d'où vient gulpFilter viennent? Comment est-il défini
    • Le script que j'ai posté utilise certaines variables et gulp-plugins (gulp-filtre, gulp-uglify, gulp-aplatir, etc.), vous devez les définir comme dans mon exemple, voici comment faire: jsfiddle.net/pznaw4yq
    • solution sympa. mais comment (et quand) pour fusionner vendeur scripts/styles de fichiers avec l'app propres fichiers ? j'ai essayé de le faire avec event-stream et inject mais sans succès.
    • Eh bien, c'est juste un simple script que j'ai fait pour expliquer brièvement une solution, si vous avez besoin de plus, je vous suggère d'essayer de GARDE CECI générateur, il travaille avec gulp et est un bon point de départ.
    • Hey @zok et cully-maçon, les gars, avez-vous résolu sujet? Si oui, partager le vôtre gulpfile s'il vous plaît.
    • Salut milushov, juste pensé que je devais partager un complet gulpfile pour ce genre de chose. pastebin.com/j4E9wQxW j'aimerais compiler une autre tâche dans gulp pour votre application spécifique fichiers qui appelle à la tâche discuté ici.
    • Juste un avis gulp-minify-css a été deprecated en faveur de gulp-clean-css

    InformationsquelleAutor pwnjack
  2. 10

    J'ai été de tenter d'exécuter la liste gulpfile et a couru dans un couple des erreurs. Première gulpFilter.la restauration n'est pas une fonction, et d'autre part, si vous envisagez sur la restauration de fichiers filtrés vous avez besoin pour passer {restaurer: true} lorsque vous définissez vos filtres.
    Comme:

    //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 a fonctionné à la perfection. 🙂

    • Merci!! Cela a résolu pour moi! 😀
    InformationsquelleAutor Benjamin J. Fisher