2017-05-19 6 views
2

다음 스 니펫에서 .pipe(gulpIf('*.css', cssnano()))의 입력과 출력은 어떻게됩니까?.pipe() 함수는 꿀꺽 꿀꺽 마시면서 무엇을 반환합니까?

gulp.task('useref', function(){ 
    return gulp.src('app/*.html') 
    .pipe(useref()) 
    .pipe(gulpIf('*.js', uglify())) 
    .pipe(gulpIf('*.css', cssnano())) 
    .pipe(gulp.dest('dist')) 
}); 

API 문서는 (link)는, 그래서 .pipe(gulpIf('*.js', uglify()))가 축소 된의 .js 파일 스트림을 반환하는 경우 .pipe(destination)는, 체인을 설정하기위한 대상 스트림에 대한 참조를 반환 말한다 어떻게이 .pipe(gulpIf('*.css', cssnano()))로 파이프 할 수 있는가?

+0

스트림은 축소 된'.js' 파일이 아니며 처리중인 [비닐 파일] (https://github.com/gulpjs/vinyl-fs) 스트림입니다 (예 : Gulp 스트림). , 파일 스트림이 아닙니다. –

+0

내가 아는 한, 파일이 아니라 [비닐] (https://github.com/gulpjs/ 비닐) 파일 시스템 스트림입니다. –

+2

@ ÁlvaroGonzález 좋은 골리, 놀라운 타이밍. 질문은 14 분 동안 여기에 있었고, 우리는 거의 똑같은 것을 * 1 초 *마다 따로 언급했습니다. :-) –

답변

1

꿀꺽 꿀꺽 마심은 단순히 기본 기능이있는 작업 주자입니다. 그 힘은 타사 패키지의 광범위한 생태계에서 비롯됩니다.이 중 일부는 최소 4 개를 사용합니다. 그리고 네가 그렇게 말했기 때문에 네가 말하길 gulpfile.js 소스 코드;

"dependencies": { 
    "archy": "^1.0.0", 
    "chalk": "^1.0.0", 
    "deprecated": "^0.0.1", 
    "gulp-util": "^3.0.0", 
    "interpret": "^1.0.0", 
    "liftoff": "^2.1.0", 
    "minimist": "^1.1.0", 
    "orchestrator": "^0.3.0", 
    "pretty-hrtime": "^1.0.0", 
    "semver": "^4.1.0", 
    "tildify": "^1.0.0", 
    "v8flags": "^2.0.2", 
    "vinyl-fs": "^0.3.0" 
}, 

을 ... 직접 개발 종속의 비슷한 번호 : 자신을 쭉 마시는 것은 13 direct runtime dependencies 있습니다.

꿀꺽 거리는 스트림은 vinyl-fs에 의해 제공되며 단일 파일이 아니라 가상 파일 시스템을 나타냅니다.

코드에 대한, 당신은 확실히 HTML 파일 만 시작합니다

gulp.src('app/*.html') 

...하지만 당신은 gulp-useref라는 타사 패키지 실행 바로 그 후 : 당으로

.pipe(useref()) 

을 그 문서들 :

은 HTML의 빌드 블록을 구문 분석하고 바꿉니다. 파 그 파일을 통해 파일입니다. 빌드 블록 내부의 애셋은 연결되며 은 스트림에서도을 통과합니다.

즉, HTML 파일을 구문 분석하여 자산 파일을 식별/생성하고 추가 처리를 위해 스트림에 추가되도록합니다.

+0

"HTML에서 빌드 블록을 구문 분석합니다"~ 무슨 뜻입니까? 여기에 빌드 블록은 무엇입니까? –

+1

아! 당신은' ->'이 빌드 블록, 맞습니까? –

+0

@ AlokMishra 그게 다야. 하지만 제가 말씀 드렸듯이 그것은 주어진 제 3 자 패키지의 특정 기능입니다. –