您可以使用gulp根据文件的父文件夹将文件串联在一起吗？

Question

I am trying to set up a generic frame for me to use for multiple projects. I am mostly trying to do this to get experience with gulp/npm and building projects.

I would like to keep all distinct components separated and have gulp tasks to compile each component-folders files together

Specifically, for example...

I would like to use these globs

app/components/**/scripts/**/*.js
app/components/**/*.css

With these files

app/components/about/file1.css
app/components/about/file2.css
app/components/about/scripts/file1.js
app/components/about/scripts/file1.js
app/components/home/file1.css
app/components/home/file2.css
app/components/home/scripts/file1.js
app/components/home/scripts/file1.js

and I would like to combine them into these files

app/components/about/scripts.js
app/components/home/scripts.js
app/assets/css/components/about_styles.css
app/assets/css/components/home_styles.css

I had found this recipe that looks like it does what I want but it seems very clunky.

Is this possible with gulp? If not is there some module I can use to do this with gulp?

Answer 1

Sounds like you want to use gulp-concat

var concat = require('gulp-concat');

gulp.task('aboutScripts', function() {
  return gulp.src('./app/components/about/scripts/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./app/components/about/'));
});

gulp.task('homeScripts', function() {
  return gulp.src('./app/components/home/scripts/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('./app/components/home/'));
});

etc.

and possibly also gulp-concat-css