node.js - It seems gulp doesn't upload css folder to local production server - newbie in node and gulp

Question

As the topic. In my app I have gulp task to create and send files to local server. I work with GitHub repo clone; here's the original project

Problem: in this app everything looks good, dist css folder exists, .css files are updated, .js as well. But when I call task to build an application on a local server, the css folder in dist (inside production directory) is not created.

App structure:

|--dist/                   # →  Static version of the website ready to upload (never edit)
|
|--gulpfile.babel.js/      # →  Gulpfile config and tasks
|--node_modules/           # →  Node.js packages (never edit)
|--src/                    # →  Source files
|  |--assets/              # →  Assets
|  |  |--fonts/            # →  Assets: Fonts
|  |  |--img/              # →  Assets: Images
|  |--modules/             # →  Modules: Multi-part components e.g. Navbar (HTML, CSS and JS)
|  |--scripts/             # →  JS
|  |  |--components/       # →  JS: Components
|  |  |--app.js            # →  JS: Main file
|  |--styles/              # →  Styles: ITCSS Architecture + BEM Methodology
|  |  |--main.scss         # →  Styles: Main stylesheet file
|  |--templates/           # →  Site templates (Twig.js)
|  |  |--layouts/          # →  Templates: Layouts
|  |  |--components/       # →  Templates: Components
|  |  |--pages/            # →  Templates: Pages
|--.babelrc                # →  Babel presets
|--.eslintrc               # →  ESLint config
|--.gitignore              # →  Gitignore
|--.stylelintrc            # →  Stylelint config
|--package-lock.json       # →  NPM lock file (never edit)
|--package.json            # →  Node.js dependencies and scripts
|--webpack.config.js       # →  Webpack config
|--yarn.lock               # →  Yarn lock file (never edit)

My style.js in guplfile task has one commit (I fixed bug with autoprefixer browser list - solution found here: https://github.com/browserslist/browserslist/issues/386) but except it is still same as origin.

    import { src, dest, series } from 'gulp';
    import gulpif from 'gulp-if';
    import plumber from 'gulp-plumber';
    import sass from 'gulp-sass';
    import sassGlob from 'gulp-sass-glob';
    import sourcemaps from 'gulp-sourcemaps';
    import postcss from 'gulp-postcss';
    import autoprefixer from 'autoprefixer';
    import gulpStylelint from 'gulp-stylelint';
    import errorHandler from '../util/errorHandler.js';


    import { reload } from '../tasks/server';
    import browserSync from 'browser-sync'

    // Config
    import { paths, isProd } from "../config";

    export function scss() {
     return src(paths.styles.src)
     .pipe(plumber({errorHandler}))
     .pipe(gulpif(isProd, sourcemaps.init() ))
     .pipe(sassGlob())
     .pipe(sass({
     includePaths: [
      'node_modules'
     ],
     outputStyle: 'compressed'
     }))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulpif(isProd, sourcemaps.write('.') ))
    .pipe(dest(paths.styles.dest))
    .pipe(browserSync.stream())
   }

  export function stylelint() {
   return src(paths.styles.watch)
   .pipe(gulpStylelint({
   failAfterError: isProd,
   reporters: [{ formatter: 'string', console: true }],
   syntax: 'scss'
  }));
 }

 export const styles = series(stylelint, scss);

Config file:

    export const paths = {
      src: './src',
      dest: './dist',
      deploy: './dist/**/*',
     styles: {
      src: './src/styles/main.scss', //I've been tried without ./ - still doesn't work
      watch: 'src/styles/**/*.scss',
      modules: 'src/modules/**/*.scss',
      dest: 'dist/css',
      lint: 'src/styles/**/*.s+(a|c)ss'
     },
    scripts: {
     src: './src/scripts/app.js',
     watch: 'src/scripts/**/*.js',
     modules: 'src/modules/**/*.js',
     dest: 'dist/js',
   },
   templates: {
     src: 'src/templates/pages/*.{twig,html}',
     watch: 'src/templates/**/*.{twig,html}',
     modules: 'src/modules/**/*.{twig,html}',
     dest: 'dist/'
  },
  images: {
   src: 'src/assets/img/**/*',
   dest: 'dist/assets/img'
  },
  fonts: {
   src: 'src/assets/fonts/**/*',
   dest: 'dist/assets/fonts'
  },
  copy: {
   src: 'src/robots.txt',
   dest: 'dist/'
  },
  wp: {
   proxy: 'localhost/mysitefolder',
   src: '**/*.php',
 }
 };

 export const isProd = process.env.NODE_ENV === 'production';

I don't know what else you need (I'm newbie and this is my "learning" project), but all files are in GitHub repository, just let me know if I should paste something more.

I will be great full for any help or advice.

question from:https://stackoverflow.com/questions/65879393/it-seems-gulp-doesnt-upload-css-folder-to-local-production-server-newbie-in-n

Answer 1

Waitting for answers