How could i code this more efficiently? - a gulp task

Question

Maybe someone with a bit more java script experience than myself can answer this. So far I've made a copy & paste from the 'usemin' block as shown in a course. Here's the code:

gulp.task('useminTrigger', ['deleteDistFolder'], function() {
  gulp.start("usemin", "usemin-de");
});

gulp.task('usemin', ['styles', 'scripts'], function () {
  return gulp.src("./app/index.html")
    .pipe(usemin({
      css: [function () {return rev()}, function () {return cssnano()}],
      js: [function () {return rev()}, function () {return uglify()}]
    }))
    .pipe(gulp.dest("./dist"));
});

gulp.task('usemin-de', ['styles', 'scripts'], function () {
  return gulp.src("./app/de/index.html")
    .pipe(usemin({
      css: [function () {return rev()}, function () {return cssnano()}],
      js: [function () {return rev()}, function () {return uglify()}]
    }))
    .pipe(gulp.dest("./dist/de"));
});

The script works as it should but maybe there is a easier or more elegant way to code that.

And with elegant i mean: Is there a way to merge the usemin-block together with usemin-de?

Help would be very much appreciated. Thanks in advance!

Answer 1

If you use a glob in your gulp.src (that is, if you use wildcards to select the files you want processed by your gulp.task), the source file structure will be preserved all the way through gulp.dest.

To match just app/index.html and app/de/index.html you could use the glob './app/{,de}/index.html' (it would also work to use './app/{,de/}index.html' or './app/{.,de}/index.html').

Then your task would be

gulp.task('usemin', ['styles', 'scripts'], function () {
  return gulp.src('./app/{,de}/index.html')
    .pipe(usemin({
      css: [function () {return rev()}, function () {return cssnano()}],
      js: [function () {return rev()}, function () {return uglify()}]
    }))
    .pipe(gulp.dest("./dist"));
});

That one task will take ./app/index.html and ./app/de/index.html as source files and will output the files ./dist/index.html and ./dist/de/index.html.

Note that using a glob is necessary - if you just did gulp.src(['./app/index.html','./app/de/index.html']) the relative file structure would not be preserved. The processed version of ./app/index.html would be written to ./dest/index.html, and then the processed version of ./app/de/index.html would be written to ./dest/index.html (overriding the first output file).

Here's a good glob primer, and here's a tester learning tool.

Answer 2

There is nothing in Javascript or Gulp keeping you from extracting the function:

Your Tasks

gulp.task('useminTrigger', ['deleteDistFolder'], function() {
    gulp.start("usemin", "usemin-de");
});

gulp.task('usemin', ['styles', 'scripts'], function () {

    return createMinificationPipe("./app/index.html", "./dist");
});

gulp.task('usemin-de', ['styles', 'scripts'], function () {
    return createMinificationPipe("./app/de/index.html", "./dist/de");
});

Common function

function createMinificationPipe(src, dest){
    return gulp.src(src)
        .pipe(usemin({
          css: [function () {return rev()}, function () {return cssnano()}],
          js: [function () {return rev()}, function () {return uglify()}]
        }))
        .pipe(gulp.dest(dest));
}