รับชื่อไฟล์ปัจจุบันใน gulp.src ()


138

ในไฟล์ gulp.js ของฉันฉันกำลังสตรีมไฟล์ HTML ทั้งหมดจาก examplesโฟลเดอร์ไปยังbuildโฟลเดอร์

เพื่อสร้างงานอึกไม่ยาก:

var gulp = require('gulp');

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

แต่ฉันไม่สามารถหาวิธีเรียกค้นชื่อไฟล์ที่พบ (และประมวลผล) ในงานหรือฉันไม่สามารถหาปลั๊กอินที่เหมาะสม


หากคุณแก้ไขปัญหาแล้วคุณควรโพสต์คำตอบด้านล่าง คุณไม่ควรแก้ไขคำถามด้วยคำตอบ
แอนดรูมาร์แชลล์

2
@AndrewMarshall ... เนื่องจากความคิดเห็นของฉันต่อการแก้ไขที่คุณลบไปแล้วอธิบายว่าฉันไม่ต้องการอ้างสิทธิ์ว่าได้พบคำตอบที่ถูกต้อง แต่ต้องการให้เครดิตกับคำตอบที่สมควรได้รับ นั่นเป็นเหตุผลที่ฉันไม่ได้โพสต์การดัดแปลงเล็กน้อยเป็นคำตอบ หากคุณคิดว่าการลบการแก้ไขของฉันนั้นดีกว่าสำหรับผู้ใช้ (หรือเพียงแค่ปฏิบัติตามกฎของไซต์นี้) แสดงว่าฉันไม่เป็นไร สำหรับคนอื่นเพียงคลิกที่ประวัติการแก้ไขเพื่อดูสิ่งที่เคยมีมาก่อน
dkastl

คำตอบ:


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
ขอบคุณ! ปลั๊กอิน "บันทึก" ที่ไม่ใช่สิ่งที่ฉันกำลังมองหาเพราะมันเขียนลงในบันทึกคอนโซลเท่านั้น แต่gulp-tapอนุญาตให้รับพา ธ สำหรับแต่ละไฟล์ดังนั้นฉันสามารถใช้มันเพื่ออัปเดตรายการของฉันในไฟล์ HTML อื่น
dkastl

ถ้าฉันต้องการเก็บไฟล์ src ทั้งหมดในอาเรย์ การแก้ปัญหาไม่ได้มีตัวเลือกมากมาย
Abhinav Singi

22

ฉันพบปลั๊กอินนี้เพื่อทำสิ่งที่ฉันคาดหวัง: ใช้อึก

ตัวอย่างการใช้งานอย่างง่าย: ค้นหาไฟล์ทั้งหมดในโครงการด้วยนามสกุล. 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

ใช้อึกทำสิ่งที่ฉันกำลังมองหาขอบคุณมาก
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);มิฉะนั้นไฟล์จะถูกกรองออกและจะไม่ลงไปที่ห่วงโซ่ท่อเพิ่มเติม ข้อมูลเพิ่มเติมตรวจสอบ docs สำหรับ 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

สำหรับกรณีของฉันอึก - ไม่สนใจก็สมบูรณ์แบบ เป็นตัวเลือกคุณอาจผ่านฟังก์ชั่นที่นั่น:

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

หากคุณต้องการใช้ @OverZealous 'answer ( https://stackoverflow.com/a/21806974/1019307 ) ใน Typescript คุณต้อง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.