gulp.src ()에서 현재 파일 이름을 가져옵니다.


138

gulp.js 파일에서 examples폴더의 모든 HTML 파일을 폴더로 스트리밍하고 있습니다 build.

꿀꺽 꿀꺽 만드는 작업은 어렵지 않습니다.

var gulp = require('gulp');

gulp.task('examples', function() {
    return gulp.src('./examples/*.html')
        .pipe(gulp.dest('./build'));
});

그러나 작업에서 발견되고 처리 된 파일 이름을 검색하는 방법을 알 수 없거나 올바른 플러그인을 찾을 수 없습니다.


문제를 해결 한 경우 아래에 답변을 게시해야합니다. 당신은 단순히 솔루션을 사용하여 질문을 편집 해서는 안됩니다 .
Andrew Marshall

2
@AndrewMarshall ... 편집에 대한 나의 의견으로, 당신이 삭제 한 것은, 나는 올바른 대답을 찾았다 고 주장하고 싶지 않지만 그 대답에 대한 크레딧을 부여하고 싶다고 설명합니다. 그래서 작은 수정 사항을 답변으로 게시하지 않았습니다. 내 편집 내용을 제거하는 것이 사용자에게 더 좋다고 생각하거나이 사이트의 규칙을 준수한다고 생각하면 괜찮습니다. 다른 사람은 편집 기록을 클릭하여 이전에 있던 것을 확인하십시오.
dkastl 2016 년

답변:


174

파일 이름을 어떻게 사용하고 싶은지 잘 모르겠지만 다음 중 하나가 도움이 될 것입니다.

  • 이름 만보고 싶다면 gulp-debug비닐 파일의 세부 정보를 나열하는 것과 같은 것을 사용할 수 있습니다 . 목록을 원하는 위치에 다음과 같이 삽입하십시오.

    var gulp = require('gulp'),
        debug = require('gulp-debug');
    
    gulp.task('examples', function() {
        return gulp.src('./examples/*.html')
            .pipe(debug())
            .pipe(gulp.dest('./build'));
    });
  • 다른 옵션은 gulp-filelog내가 사용하지 않았지만 비슷하게 들립니다 (약간 깨끗할 수 있습니다).

  • 또 다른 옵션은 gulp-filesize파일이며 파일 크기를 모두 출력합니다.

  • 더 많은 제어를 원한다면, 같은 gulp-tap기능을 사용하여 자신 만의 기능을 제공하고 파이프의 파일을 볼 수 있습니다.


7
감사합니다! "log"플러그인은 콘솔 로그에만 기록하기 때문에 내가 찾지 않은 플러그인입니다. 그러나 gulp-tap각 파일의 경로를 얻을 수 있으므로 다른 HTML 파일에서 내 목록을 업데이트하는 데 사용할 수 있습니다.
dkastl

모든 src 파일을 배열에 저장하려면 어떻게합니까? 디버그는 많은 옵션을 제공하지 않습니다.
Abhinav Singi

22

나는이 플러그인이 내가 기대했던 것을하고 있음을 발견했다 : gulp-using

간단한 사용 예 : 확장자가 .jsx 인 프로젝트의 모든 파일 검색

gulp.task('reactify', function(){
        gulp.src(['../**/*.jsx']) 
            .pipe(using({}));
        ....
    });

산출:

[gulp] Using gulpfile /app/build/gulpfile.js
[gulp] Starting 'reactify'...
[gulp] Finished 'reactify' after 2.92 ms
[gulp] Using file /app/staging/web/content/view/logon.jsx
[gulp] Using file /app/staging/web/content/view/components/rauth.jsx

gulp-using 은 내가 찾고있는 것을 많이 감사했습니다.
sghosh968

10

여기 또 다른 간단한 방법이 있습니다.

var es, log, logFile;

es = require('event-stream');

log = require('gulp-util').log;

logFile = function(es) {
  return es.map(function(file, cb) {
    log(file.path);
    return cb();
  });
};

gulp.task("do", function() {
 return gulp.src('./examples/*.html')
   .pipe(logFile(es))
   .pipe(gulp.dest('./build'));
});

5
아시다시피, 대부분의 사람들은 커피 스크립트를 모르므로 최대 독자 수에 가장 기본적인 방법으로 답변을 작성하는 것이 훨씬 유리합니다. :)
vsync

나에게 es.map오류가 발생합니다 :SyntaxError: Unexpected token .
vsync

1
이 솔루션의 경우 +1 (플러그인 제외). 그러나 버그 return cb(); 가 있습니다 cb(null, file);. 대신 버그 가 있어야합니다 . 그렇지 않으면 파일이 필터링되어 파이프 체인으로 더 이상 내려 가지 않습니다. es.map ()에 대한
Dimitry K

5

gulp-filenames 모듈을 사용하여 경로 배열을 얻을 수 있습니다 . 네임 스페이스별로 그룹화 할 수도 있습니다.

var filenames = require("gulp-filenames");

gulp.src("./src/*.coffee")
    .pipe(filenames("coffeescript"))
    .pipe(gulp.dest("./dist"));

gulp.src("./src/*.js")
  .pipe(filenames("javascript"))
  .pipe(gulp.dest("./dist"));

filenames.get("coffeescript") // ["a.coffee","b.coffee"]  
                              // Do Something With it 

3

내 경우에는 gulp-ignore 가 완벽했습니다. 옵션으로 함수를 전달할 수 있습니다.

function condition(file) {
 // do whatever with file.path
 // return boolean true if needed to exclude file 
}

그리고 작업은 다음과 같습니다.

var gulpIgnore = require('gulp-ignore');

gulp.task('task', function() {
  gulp.src('./**/*.js')
    .pipe(gulpIgnore.exclude(condition))
    .pipe(gulp.dest('./dist/'));
});

0

Typescript에서 @OverZealous 'answer ( https://stackoverflow.com/a/21806974/1019307 )를 import사용 하려면 대신 다음을 수행해야합니다 require.

import * as debug from 'gulp-debug';

...

    return gulp.src('./examples/*.html')
        .pipe(debug({title: 'example src:'}))
        .pipe(gulp.dest('./build'));

(또한 추가했습니다 title).


import대신에 require?
vsync

그래, 몰라 그것은 JS 개발 초기에 있었고, 그것이 왜 저에게 효과적 이었는지에 대해 더 많은 조사를해야했을 것입니다. 그러나 그렇게 했으므로 내가 그것을 왜 넣었습니까!
HankCa
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.