Bower와 Gulp.js를 어떻게 통합 할 수 있습니까?

Question

나는 몇 가지

1. 정자가 종속

I가 바라고의 순서로 하나 개의 파일에 그 종속 CONCAT

종속성 설치를 수행하는 꿀꺽 작업을 쓰기 위해 노력하고 있어요 이러한 종속성에 대한 경로를 지정하지 않아도됩니다. 나는 명령이 있다는 것을 알고있다. 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' 

Answer 1

사용 main-bower-files

에 걸쳐 계속오고

프로젝트의 bower.json에 정의 된 Bower 패키지의 모든 프로덕션 (주) 파일을 가져 와서 작업의 힙 src로 사용합니다.

은 gulpfile에 통합 :

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

내가 모든 생산 파일을 잡고이 작업을 만든 CSS/JS/글꼴을 필터링하고 각각의 하위 폴더 (CSS/JS/글꼴 대중 폴더에 출력). 나는 나와 gulpfile를 실행하려고하고 몇 가지 오류에 달렸다

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

Answer 2

:

다음은 예입니다. 첫 번째 gulpFilter.restore는 함수가 아니며 두 번째로 필터링 된 파일을 복원하려는 경우 필터를 정의 할 때 {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')); 
}); 

변경 사항이 언급 된 후 완벽하게 실행되었습니다. :)