0

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!

georg
  • 21
  • 5
  • Welcome to SO! It's hard to tell what your question is. Do you want a concise way to run the same task on `./app/index.html` (outputting to `./dist`) and on `./app/de/index.html` (outputting to `./dist/de`)? – henry Mar 07 '17 at 02:34
  • Hello Henry, thanks for the reply. I guess this is a rookie question... :) I guess I actually don't understand all of the code what I've written and need some help to see how it should look like to tell gulp correctly what I want. I've edited my question as you will see to be more clear. Hopefully that helps a bit. Thanks again. – georg Mar 08 '17 at 13:13

2 Answers2

0

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.

henry
  • 4,244
  • 2
  • 26
  • 37
  • Thanks henry, a very compact solution. I have already read a bit into this topic (your links). I've only used regexp for searching files - a new experience to use it to code for me. I will try that. – georg Mar 16 '17 at 22:07
0

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));
}
Wilmer SH
  • 1,417
  • 12
  • 20
  • Thanks for your effort and this great split, that was excatly what i was not able to do. I haven't tried it out just yet, but I will update if I have. – georg Mar 16 '17 at 22:01