Как копировать css в gulp?

Question

[nonamer_city]

Привет.
У меня сборка gulp копирует scss в папку build.scss
Но как сделать чтобы другие файлы css тоже подключил?
Вот мой конфиг

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const watch = require('gulp-watch');

const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const sourcemap = require('gulp-sourcemaps')
const pug = require('gulp-pug')
const del = require('del')

gulp.task('pug', (callback) => {
    return gulp.src('./src/pug/pages/**/*.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('./build/'))
        .pipe(browserSync.stream())
    callback()
})


gulp.task('scss', (callback) => {
    return gulp.src('./src/scss/style.scss')
        .pipe(sourcemap.init())
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 4 versions']
        }))
        .pipe(sourcemap.write())
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream())
    callback()
});


gulp.task('cleanbuild', () => {
    return del('./build')
})

gulp.task('copyimg', (callback) => {
    return gulp.src('./src/img/**/*.*')
        .pipe(gulp.dest('./build/img/'))
    callback()
})

gulp.task('copyjs', (callback) => {
    return gulp.src('./src/js/**/*.*')
        .pipe(gulp.dest('./build/js/'))
    callback()
})


gulp.task('watch', () => {
    watch(['./build/js/**/*.*', './build/img/**/*.*'], gulp.parallel(browserSync.reload))
    watch(['./src/scss/**/*.scss'], gulp.parallel('scss'))
    watch(['./src/pug/**/*.pug'], gulp.parallel('pug'))
    watch(['./src/img/**/*.*'], gulp.parallel('copyimg'))
    watch(['./src/js/**/*.*'], gulp.parallel('copyjs'))
});



gulp.task('server', () => {
    browserSync.init({
        server: {
            baseDir: "./build/"
        }
    });
});

gulp.task('default',
    gulp.series(
        gulp.parallel('cleanbuild'),
        gulp.parallel('scss', 'pug', 'copyimg', 'copyjs'),
        gulp.parallel('server', 'watch')
    )
);

Вот моя структура


Я добавил в папку css стили swiper и мне надо чтобы в dist копировало все

Answer 1

[DanielTonne]

gulp.task('css', (callback) => {
    return gulp.src('./src/css/*.css')
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream())
    callback()
});

Но вообще лучше в папке с исходниками scss сделать папку, например, vendor, туда положить стили Swiper предварительно перегнав исходный css-файл в sass(scss), а после в через import подключить все к входной точке app.scss. Сам файл app.scss указываете в Gulp.

Пример:

const path = {
  css: {
    src: srcPath + 'sass/*.sass',
    app: appPath + 'css/',
    build: buildPath + 'css/',
    watch: srcPath + 'sass/**/*.{sass,scss}'
  },
}

function css(cb) {
  return src(path.css.src, {base: srcPath + 'sass/'})
    .pipe(newer(path.css.app + '*.css'))
    .pipe(sourcemaps.init())
    .pipe(plumber({
      errorHandler: function (err) {
        notify.onError({
          title: 'SASS Error',
          message: 'Error <%= error.message %>'
        })(err)
        this.emit('end')
      }
    }))
    .pipe(sass({
      includePaths: './node_modules/'
    }))
    .pipe(autoprefixer({
      cascade: true,
      remove: false
    }))
    .pipe(sourcemaps.write())
    .pipe(rename({
      suffix: '.min',
      extname: '.css'
    }))
    .pipe(dest(path.css.app))
  cb()
}

Пример структуры:

Comments

[nonamer_city]

спасибо!