Automatic append of src folder when injecting the files in temp folder

Question

I am currently migrating gulp 3.x to gulp 4.x, In this gulp html file creates a temp folder. In this there is an automatic update of src/ folder getting appended.

Expected result .tmp/serve

Inside serve following file structure need to be there. app/index.css index.html

Actual Result 1.serve/app/src/app/index.css 2.serve/src/index.html

In this src folder need to be removed. I will attach the entire gulp build.js file along with this.

  (function () {
      'use strict';

        var path = require('path');
        var gulp = require('gulp');
        var conf = require('./conf');
        var inject = require('./inject');

       var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'npmfiles', 'uglify-save-license', 'del']

});

      function partials(){
          return gulp.src([
          path.join(conf.paths.src, '/app/**/*.html'),
         path.join(conf.paths.tmp, '/serve/app/**/*.html')
    ])
  .pipe($.htmlmin({
    removeEmptyAttributes: true,
    removeAttributeQuotes: true,
    collapseBooleanAttributes: true,
    collapseWhitespace: true
  }))
  .pipe($.angularTemplatecache('templateCacheHtml.js', {
    module: 'hubble',
    root: 'app'
  }))
  .pipe(gulp.dest(conf.paths.tmp + '/partials/'));
    };
     gulp.task('partials', gulp.series(partials));


     gulp.task('html', gulp.series('inject', 'partials', function html () 
    {
       var partialsInjectFile = gulp.src(path.join(conf.paths.tmp, 
       '/partials/templateCacheHtml.js'), { read: false });
       var partialsInjectOptions = {
        starttag: '<!-- inject:partials -->',
        ignorePath: path.join(conf.paths.tmp, '/partials'),
        addRootSlash: false
    };

var htmlFilter = $.filter('*.html', { restore: true, dot: true, matchBase: true });
var jsFilter = $.filter('**/*.js', { restore: true , dot: true});
var cssFilter = $.filter('**/*.css', { restore: true , dot: true});

return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
  .pipe($.inject(partialsInjectFile, partialsInjectOptions))
  .pipe($.useref())
  .pipe(jsFilter)
  .pipe($.rev())
  .pipe($.sourcemaps.init())
  .pipe($.ngAnnotate())
  .pipe($.uglify()).on('error', conf.errorHandler('Uglify'))
  //.pipe($.sourcemaps.write('maps'))
  .pipe(jsFilter.restore)
  .pipe(cssFilter)
  // .pipe($.sourcemaps.init())
  .pipe($.replace('Casino_Hand/', '../fonts/'))
  .pipe($.cssnano({
    zindex: false
  }))
  .pipe($.rev())
  // .pipe($.sourcemaps.write('maps'))
  .pipe(cssFilter.restore)
  .pipe($.revReplace())
  .pipe(htmlFilter)
  .pipe($.htmlmin({
    removeEmptyAttributes: true,
    removeAttributeQuotes: false,
    collapseBooleanAttributes: true,
    collapseWhitespace: true
  }))
  .pipe(htmlFilter.restore)
  .pipe(gulp.dest(path.join(conf.paths.dist, '/')))
  .pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true }));

}));

  function other(){
var fileFilter = $.filter(function (file) {
  return file.stat.isFile();
});0

return gulp.src([
  path.join(conf.paths.src, '/**/*'),
  path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss}')
])
.pipe(fileFilter)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')));

};

     function clean(){
return $.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp, 
   '/')]);
  };
     gulp.task('clean',gulp.series(clean));

// Still inject GlobalConfig.js (but not minimised) to allow deployment tool to update existing values if required

      function config(){
return gulp.src(path.join(conf.paths.src, '/GlobalConfig.js'))
.pipe(gulp.dest(path.join(conf.paths.dist, '')));

   };

     gulp.task('build',gulp.series(config, 'html', other));

 })();

Answer 1

Do not use path.join to provide paths to src and all will be ok. For example instead of:

gulp.src([
    path.join(conf.paths.src, '/**/*'),
    path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss}')
])

use:

gulp.src([
    conf.paths.src + '/**/*',
    '!' + conf.paths.src + '/**/*.{html,css,js,scss}'
])