Gulp : 스타일러스를 컴파일하고 순수 CSS로 연결

Question

나는 './styles/stylus/**.styl'에 스타일러스 파일을 많이 넣었고 './styles/css/**.css'에 CSS 파일을 많이 넣었습니다.

Gulp를 사용하여 스타일러스 파일을 컴파일하고 결과를 모든 CSS 파일과 연결하여 './styles/out.css'으로 출력하려면 어떻게해야합니까?

Answer 1

당신이 좋아하는 gulp-filter 사용할 수 있습니다 : 당신의 스타일러스 파일 내에서

var gulp = require('gulp'); 
var stylus = require('gulp-stylus'); 
var concat = require('gulp-concat'); 
var Filter = require('gulp-filter'); 

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

    var filter = Filter('**/*.styl', { restore: true }); 

    return gulp.src([ 
      './styles/stylus/**.styl', 
      './styles/css/**.css' 
     ]) 
     .pipe(filter) 
     .pipe(stylus()) 
     .pipe(filter.restore) 
     .pipe(concat('out.css')) 
     .pipe(gulp.dest('./styles')); 
}); 

Answer 2

당신은 파일의 두 개의 별도의 스트림을 생성 할 수 및 event-stream으로 병합해야합니다

이

var es = require('event-stream'); 

gulp.task('styles', function() { 
    var stylusStream = gulp.src('./styles/stylus/**.styl') 
    .pipe(stylus()); 

    return es.merge(stylusStream, gulp.src('./styles/css/**.css')) 
    .pipe(concat('out.css')) 
    .pipe(gulp.dest('./styles')); 
}); 

Answer 3

을 수행 할 수 있습니다 단지 @require CSS 파일 :

@require 'something.css' 

n Gulp에서 연결 또는 기타 복잡성이 필요하지 않으며 파일로드 순서가 .styl 파일 내에서 명시 적으로 설정됩니다.

Answer 4

방금 ​​main.styl 파일의 다른 .styl 파일에 @require를 사용하고 gulp.src ('src/css/main.styl')를 보시오.