Как я могу кодировать это более эффективно? - глоточное задание

Question

Может быть, кто-то с немного большим опытом в Java-скрипте, чем я, может ответить на это Пока что я сделал копию и вставку из блока 'usemin', как показано в курсе. Вот код:

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"));
});

Сценарий работает так, как должен, но, возможно, есть более простой или более элегантный способ его кодирования.

И под элегантным я имею в виду: есть ли способ объединить блок usemin и блок usemin-de?

Помощь будет очень ценится. Заранее спасибо!

Answer 1

Если вы используете шарик в вашем gulp.src (то есть, если вы используете подстановочные знаки, чтобы выбрать файлы, которые вы хотите обработать gulp.task), структура исходного файла будет сохранена до конца gulp.dest,

Чтобы соответствовать просто app/index.html а также app/de/index.html Вы могли бы использовать шар './app/{,de}/index.html' (это также будет работать, чтобы использовать './app/{,de/}index.html' или же './app/{.,de}/index.html').

Тогда ваша задача будет

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"));
});

Это одна задача займет ./app/index.html а также ./app/de/index.html в качестве исходных файлов и будет выводить файлы ./dist/index.html а также ./dist/de/index.html,

Обратите внимание, что использование глобуса необходимо - если вы только что сделали gulp.src(['./app/index.html','./app/de/index.html']) относительная файловая структура не будет сохранена. Обработанная версия ./app/index.html будет написано ./dest/index.html, а затем обработанная версия ./app/de/index.html будет написано ./dest/index.html (переопределение первого выходного файла).

Вот хороший учебник для начинающих, и вот инструмент обучения тестера.

Answer 2

Ничто в Javascript или Gulp не мешает вам извлечь функцию:

Ваши задачи

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");
});

Общая функция

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));
}