我怎样才能将Bower和Gulp.js整合？ [英] How can I integrate Bower with Gulp.js?

问题描述

1. 安装Bower依赖关系


2. 将这些依赖项按照依赖关系的顺序排列成一个文件
   

我希望不必指定路径到那些依赖关系。我知道有命令 bower list --paths ，但我不确定是否可以将它绑定在一起。

有什么想法？

编辑

我正在尝试使用 gulp-bower-files ，但我得到一个eaccess错误，并且它没有生成连接
$ b gulpfile.js

> var gulp = require（'gulp'）;
var bower = require（'bower'）;
var concat = require（'gulp-concat'）;
var bower_files = require（'gulp-bower-files'）;
$ b 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; //未处理'错误'事件
 ^ 
错误：EACCES，打开'/libs.js'
  

解决方案

使用 main-bower-files

它抓取您项目的bower.json中定义的所有Bower包的生产（主）文件，并将它们用作您的任务的gulp src。 / b>

将其集成到您的gulp文件中：

  var mainBowerFiles = require（'主亭子-文件）; 
  

我制作了抓取所有生产文件的任务，过滤css / js / fonts并在公共文件夹在他们各自的子文件夹（css / js / fonts）。

以下是一个例子：

  var gulp = require（'gulp'）; 
 
 //定义插件
 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'）; 
 
 //定义路径变量
 var dest_path ='www'; 
 //从bower_components获取库文件，缩小并推入/ 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（））
 
 //从bower_components获取供应商js文件，缩小并推入/ public 
 .pipe（jsFilter）
 .pipe（gulp.dest（dest_path +'/ js /'））
。 pipe（uglify（））
 .pipe（重命名（{
后缀：.min
}））
 .pipe（gulp.dest（dest_path +'/ js / '））
 .pipe（jsFilter.restore（））
 
 //从bower_components获取供应商的css文件，缩小并推入/ public 
 .pipe（cssFilter）
 .pipe（gulp.dest（dest_path +'/ css'））
 .pipe（minifycss（））
 .pipe（重命名（{
后缀：.min
}））
 .pipe（gulp.dest（dest_path +'/ css'））
 .pipe （cssFilter.restore（））
 
 //从bower_components获取供应商字体文件并推入/ public 
 .pipe（fontFilter）
 .pipe（flatten（））
 .pipe（gulp.dest（dest_path +'/ fonts'））; 
}）; 
  

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'

解决方案

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

这篇关于我怎样才能将Bower和Gulp.js整合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！