Как настроить вывод файлов gulp?

Question

[Александр]

У меня есть структура проекта:

• /gulpfile.js
  
• /source/
  
• /dist/
  

В папке source лежат проекты. Для каждого своя папка

• /source/proj1
  
• /source/proj2
  

Вопрос, Как сделать в gulp, что бы файлы из source выводились в dist в те же папки с проектами. Для наглядности надо так:
Есть /source/proj1/assets/sass/main.sass
Надо /dist/proj1/assets/css/main.min.css

Comments

[Владимир Скибин]

покажите свой код галпа

[Александр]

Владимир Скибин,

/* ========== Инициализируем пакеты ========== */

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const rimraf = require('rimraf');
const rename = require('gulp-rename');

/* ========== Создаем задачу для запуска сервера ========== */

gulp.task('server', function () {
  browserSync.init({
    server: {
      port: 9000,
      baseDir: './dist'
    }
  });

  /* ========== Устанавливаем watch на просмотр изменений любых файлов в папке dist ========== */

  gulp.watch('./dist/**/*').on('change', browserSync.reload);
});

/* ========== Создаем задачу для компиляции SASS ========== */

gulp.task('sass:compile', function () {
  return gulp.src('./source/assets/sass/**/*.sass')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(rename({
                    suffix: '.min'
                  }))
    .pipe(gulp.dest('./dist/assets/css'))
});

/* ========== Создаем задачу для копирования папок и фалов кроме тех которые не нужны ========== */

gulp.task('copy', function () {
  return gulp.src(['./source/**/*.*', '!./source/assets/sass/**/*.sass'])
  .pipe(gulp.dest('./dist'));
});

/* ========== Создаем задачу для слежения за всеми файлами на изменение (в папка - sass, js, images, fonts, и корневой папке) ========== */

gulp.task('watch', function () {
  gulp.watch('./source/assets/sass/**/*.sass', gulp.series('sass:compile'));
  gulp.watch(['./source/**/*.*', '!./source/assets/sass/**/*.sass'], gulp.series('copy'));
});

/* ========== Создаем задачу для очистки файлов продакшна ========== */

gulp.task('clean', function del(cb) {
  return rimraf('./dist', cb)
})

/* ========== Создаем задачу по умолчания для запуска компиляции SASS, копирования файлов и запуска сервера ========== */

gulp.task('default', gulp.series(
  'clean',
  gulp.parallel('sass:compile', 'copy'),
  gulp.parallel('watch', 'server')
));

[Владимир Скибин]

Александр, в галп можно использовать относительный путь (все что после звездочек), т.е. Вам придется отказаться от ** в относительности проекта, но они Вам будут заменять по сути его имя. В соответствии с новыми путями переписать просто текущие пути и все попадет куда нужно.

[Александр]

Владимир Скибин, Можно пример.
к примеру у меня

gulp.task('copy', function () {
  return gulp.src(['./source/**/*.*', '!./source/assets/sass/**/*.sass'])
  .pipe(gulp.dest('./dist'));
});

Как мне следует поменять пути. Простите просто сам не очень понял

[Владимир Скибин]

Александр, ну вот согласно этой таске - положите 2 файла в ./source/proj1 и ./source/proj2 - оба скопируются куда надо -> ./dist/proj1 и ./dist/proj2. Т.е. с соблюдением относительного пути (** - это уже пойдет относительный путь)

[Александр]

Владимир Скибин, Извини за беспокойство, но эта таска не работает. Она не копирует в /dist/proj#/assets/css. Как исправить это?

gulp.task('sass:compile', function () {
  return gulp.src('./source/**/assets/sass/**/*.sass')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(rename({
                    suffix: '.min'
                  }))
    .pipe(gulp.dest('./dist/**/assets/css'))

[Владимир Скибин]

Александр, нельзя использовать ** дважды, нарушается парадигма двух путей в галп. ну и в dest Вы явно указали копировать в папку **, которой по видимому нет, если он ее не создал

[Александр]

Владимир Скибин, Как тогда сделать то что мне надо?

Answer 1

[Александр]

Решил проблему покопавшись в модуле gulp-rename. Нужно просто при добавлении суффикса добавить функцию которая заменит название папки sass на css:

gulp.task('sass:compile', function () {
  return gulp.src('./source/**/assets/sass/**/*.sass')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(rename(function(path) {
      path.dirname = path.dirname.replace( "sass", "css" );
      path.basename += '.min';}))
    .pipe(gulp.dest('./dist'))
});