Как создать файл gulp с многократно используемыми функциями - несколько точек наблюдения и несколько пунктов назначения вывода - PullRequest
Новая
       8

Как создать файл gulp с многократно используемыми функциями - несколько точек наблюдения и несколько пунктов назначения вывода

0 голосов
/ 04 февраля 2019

Цель состоит в том, чтобы использовать этот файл Gulp, чтобы выполнить 'n' количество различных источников и мест назначения.

Как мы можем передать аргументы (источник, место назначения), чтобы задача CSS-генератора принимала эти источник и места назначения и выдавала отдельные выходные файлы. 

var gulp = require("gulp"),
  sass = require("gulp-sass"),
  postcss = require("gulp-postcss"),
  autoprefixer = require("autoprefixer"),
  cssnano = require("cssnano");

var paths = {
  styles: {
    src1: "scss/slider-one/index.scss",
    src2: "scss/slider-two/index.scss"

    dest1: "slider-one",
    dest2: "slider-two"
  }
};

function style1() {
  return (
    gulp
     .src(paths.styles.src1)
     .pipe(sass())
     .on("error", sass.logError)
     .pipe(postcss([autoprefixer(), cssnano()]))
     .pipe(gulp.dest(paths.styles.dest1))
  );
 }

 exports.style1 = style1;

 function style2() {
  return (
    gulp
      .src(paths.styles.src2)
      .pipe(sass())
      .on("error", sass.logError)
      .pipe(postcss([autoprefixer(), cssnano()]))
      .pipe(gulp.dest(paths.styles.dest2))
  );
 }

 exports.style2 = style2;

 function watch() {

   style1();
   style2();

   gulp.watch("scss/slider-one/*.scss", style1);
   gulp.watch("scss/slider-two/*.scss", style2);
  }

  exports.watch = watch

1 Ответ

0 голосов
/ 08 февраля 2019

Ваш источник scss/slider-one/index.scss и пункт назначения slider-one, а часы scss/slider-one/*.scss.

slider-one часто встречаются в источнике, пункте назначения и часах.

Таким образом, вы можете определитьмассив paths как ["slider-one","slider-two"]

И вы вызываете style1 & style2 как обратный вызов функции watch.Таким образом, вы можете объединить это и определить это в одной функции.

И вызвать эту функцию внутри for loop с параметрами (source,destination,watch).

Полный код: 

var gulp = require("gulp"),
 sass = require("gulp-sass"),
 postcss = require("gulp-postcss"),
 autoprefixer = require("autoprefixer"),
 cssnano = require("cssnano");

function runGulpSass(src,dest,watch) {
 gulp.watch(watch, function() {
   return gulp.src(src)
          .pipe(sass())
          .on("error", sass.logError)
          .pipe(postcss([autoprefixer(), cssnano()]))
          .pipe(gulp.dest(dest))
 });
}

exports.runGulpSass = runGulpSass;

function startGulp() {
 var paths = ["slider-one","slider-two"];
 for(var i=0;i<paths.length;i++) {
   runGulpSass("scss/"+paths[i]+"/index.scss",paths[i],"scss/"+paths[i]+"/*.scss")
 }
}

exports.watch = startGulp

[Редактировать] Если в source, destination & watch нет общего значения:

Определите массив paths следующим образом: 

var paths = [
    ["scss/slider-one/index.scss","css/slider-one","slider-one/*.scss"],
    ["scss/slider-two/index.scss","css/slider-two","slider-two/*.scss"]
];

И установите параметр функции runGulpSass следующим образом: 

runGulpSass(paths[i][0],paths[i][1],paths[i][2])
...