Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I integrate Bower with Gulp.js?

Tags:

gulp

bower

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

  1. Install the Bower dependencies
  2. Concat those dependencies into one file in the order of the dependencies

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.

Any thoughts?

Edit

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

and I keep coming across this error

events.js:72         throw er; // Unhandled 'error' event               ^ Error: EACCES, open '/libs.js' 
like image 507
Cully Mason Avatar asked Apr 07 '14 00:04

Cully Mason


People also ask

What is Bower and Gulp?

Bower can be classified as a tool in the "Front End Package Manager" category, while gulp is grouped under "JS Build Tools / JS Task Runners". Some of the features offered by Bower are: Bower operates at a lower level than previous attempts at client-side package management – such as Jam, Volo, or Ender.

How do I run gulp locally?

Install Gulp into your local project To install Gulp locally, navigate to your project directory and run npm install gulp . You can save it to your package. json dependencies by running npm install gulp --save-dev . Once you have Gulp installed locally, you can then proceed to create your gulpfile.

What is the use of Gulp JS?

Gulp is a tool that helps you out with several tasks when it comes to web development. It's often used to do front end tasks like: Spinning up a web server. Reloading the browser automatically whenever a file is saved.

How do I cancel Gulp?

Gulp is just running as a never ending process. The way to abort a process is Ctrl + C .


2 Answers

Use main-bower-files

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.

integrate it in your gulpfile:

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

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).

Here's an example:

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')); }); 
like image 186
pwnjack Avatar answered Oct 04 '22 13:10

pwnjack


I was attempting to run the listed gulpfile and ran into a couple errors. First gulpFilter.restore is not a function, and secondly if you plan on restoring the filtered files you need to pass {restore: true} when you define your filters. Like so:

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

After the changes mentioned it ran perfectly. :)

like image 36
Benjamin J. Fisher Avatar answered Oct 04 '22 13:10

Benjamin J. Fisher