2016-06-25 8 views
1

Gulp를 사용하여 bower 폴더 (main-bower-files를 사용하는) 및 src 폴더의 모든 JS/CSS 파일을 연결/축소합니다. 내가 (node_modules에 존재 모두) package.json에서 다음 종속로드 꿀꺽 -로드 플러그인을 사용하고 있습니다 :Gulp가 main-bower-files를 사용하여 JS 및 CSS 파일을 만들지 않습니다.

// Include Gulp 
var gulp = require('gulp'); 

var src = 'src/'; 
var dest = 'public/'; 

// Include plugins 
var plugins = require("gulp-load-plugins")({ 
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files'], 
    replaceString: /\bgulp[\-.]/ 
}); 

//Concat + Minify JS 
gulp.task('js', function() { 

var jsFiles = ['/src/js/*']; 

gulp.src(plugins.mainBowerFiles().concat(jsFiles)) 
    .pipe(plugins.filter('*.js')) 
    .pipe(plugins.concat('main.js')) 
    .pipe(plugins.uglify()) 
    .pipe(gulp.dest('public/js')); 

}); 
//Concat + Minify CSS 
gulp.task('css', function() { 

var cssFiles = ['src/css/*']; 

gulp.src(plugins.mainBowerFiles().concat(cssFiles)) 
    .pipe(plugins.filter('*.css')) 
    .pipe(plugins.concat('main.min.css')) 
    .pipe(plugins.uglify()) 
    .pipe(gulp.dest(dest + 'css')); 

}); 

// Default Task 
gulp.task('default', ['js','css']); 

꿀꺽가되지 않습니다 : 여기에

"dependencies": { 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-filter": "^4.0.0", 
    "gulp-load-plugins": "^1.2.4", 
    "gulp-rename": "^1.2.2", 
    "gulp-uglify": "^1.5.3", 
    "main-bower-files": "^2.13.1" 
} 

을 gulpfile.js입니다 콘솔에 오류를 제공하지만 JS 또는 CSS 파일을 만들지는 않습니다.

+0

'console.log (plugins.mainBowerFiles())'빈 배열을 반환하는지 확인 하시겠습니까? – kaxi1993

+0

'plugins.mainBowerFiles()'는 예상대로 파일 경로의 배열을 리턴합니다. –

답변

1

궁극적으로 문제는 파일을 반환하지 않는 gulp-filter로 좁혀졌습니다. 비슷한 설정을 시도하는 누군가를 위해, 나는 같은 최종 결과 달성 파일 필터링 mainBowerFiles를 사용하여 약간 다른 경로를 복용 결국 :

// Include Gulp 
var gulp = require('gulp'); 

// Include plugins 
var plugins = require("gulp-load-plugins")({ 
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files'], 
    replaceString: /\bgulp[\-.]/ 
}); 


var src = 'src/'; 
var dest = 'public/'; 


//Concat + Minify JS 
gulp.task('test', function() { 

console.log(plugins); 

}); 


//Concat + Minify JS 
gulp.task('js', function() { 

var jsFiles = ['src/js/*']; 

gulp.src(plugins.mainBowerFiles('**/*.js').concat(jsFiles)) 
    .pipe(plugins.concat('main.min.js')) 
    .pipe(plugins.uglify()) 
    .pipe(gulp.dest(dest + 'js')); 

}); 

gulp.task('css', function() { 

    var cssFiles = ['src/css/*']; 

    gulp.src(plugins.mainBowerFiles('**/*.css', { 
     overrides: { 
      bootstrap: { 
       main: [ 
        './dist/css/bootstrap.min.css' 
       ] 
      } 
     } 
    }).concat(cssFiles)) 
    .pipe(plugins.concat('main.min.css')) 
    .pipe(plugins.cleanCss()) 
    .pipe(gulp.dest(dest + 'css')); 

}); 


// Default Task 
gulp.task('default', ['js','css']); 
+0

안녕하세요 차드, 그러면 다른 파일을 어떻게 필터링합니까? 나는 당신의 접근 방식을 시도하고 그것은 나를 위해 일했지만, 그것은 조금 무서운 것입니다. – moesphemie

1

내가 똑같은 문제가 있었다를하고 '꿀꺽 밝혀

.pipe(plugins.filter('**/*.js')) 

같은이 CSS로 발생해야하고 그것을 잘 작동합니다 :

.pipe(plugins.filter('*.js')) 

그것은 다음과 같이해야한다 : - 필터는 '때문에이 라인의 작동되지 않았습니다.