How to include *.JS in the new edition of OptimizedHTML 5??

Question

JavaScript

Kind!

Question for people who use the OptimizedHTML /v.2/v.3/v.4/v.5
build versions in their structure are quite different from version to version ..

To tell the truth, I had to "jump" from OptimizedHTML 2.0 immediately to 5th .. I had to reconnect everything .. ((

I already figured out how to connect in a new way: fonts/$ colors/bootstrup - there is _config.sass for this (so far it's logical here) But I can't figure out how to include libraries now (JS - various plugins) and most importantly of

course common.js ??? // Custom project scripts

gulp.task('common-js', function() {
  return gulp.src([
    'app/js/common.js',
    ])
  .pipe(concat('common.min.js'))
  .pipe(uglify())
  .pipe(gulp.dest('app/js'));
});

and right behind it, such a handy thing:

gulp.task('scripts', function() {
  return gulp.src([
    './app/libs/modernizr/modernizr.js',
    './app/libs/jquery/jquery-1.11.2.min.js',
    './app/libs/waypoints/waypoints.min.js',
    './app/libs/animate/animate-css.js',
    './app/libs/Magnific-Popup/jquery.magnific-popup.min.js',
    './app/libs/animateNumber/jquery.animateNumber.min.js',
    './app/libs/equalHeights/equalHeights.min.js',
    './app/libs/owl-carousel/owl.carousel.min.js',
    './app/libs/selectize/dist/js/standalone/selectize.min.js',
    './app/libs/parallax/parallax.min.js',
    './app/libs/slider-simple/superslide.2.1.js'
    ])
    .pipe(concat('libs.js'))
    .pipe(uglify()) //Minify libs.js
    .pipe(gulp.dest('./app/js/'));
});

Now it looks like this:

function scripts() {
  return src(paths.scripts.src)
  .pipe(concat(paths.jsOutputName))
  .pipe(uglify())
  .pipe(dest(paths.scripts.dest))
  .pipe(browserSync.stream())
}

I can’t find any analogies and adapt this function to the same functionality as before ((((((

In early versions of OptimizedHTML (I used 2.0) - handwritten scripts were compiled into the 'scripts.min.js' file (for Watch and Build - respectively)

.Now this does not happen.(((It is clear that the Author of this starter disabled everything by default)))

I have HTML Optimized 2.0 on my old computer - and I have to compile common.js on it and transfer it to a new computer already in a compressed form (file 'scripts.min.js').. of course, this is not a solution.. it's a crutch))

Who knows/did it? Please tell me..

How to include *.JS in the new edition so that everything is concatenated again to app.min.js ???

Answer 1

Hmm .. In general, I don’t use this tool, but I went to the github and looked at the gulpfile and everything is clear

scripts: {
    src: [
      // 'node_modules/jquery/dist/jquery.min.js', // npm vendor example (npm i --save-dev jquery)
      baseDir + '/js/app.js' // app.js. Always at the end
    ],
    dest: baseDir + '/js',
  }

Comment this jquery connection example. You type npm i --save-dev jquery in the terminal to install, although I have no idea why the author puts the --save-dev flag, well, in fact, in his build it won’t work at all for its intended purpose. And you need to uncomment the line 'node_modules/jquery/dist/jquery.min.js', the rest of the files are connected in the same way, the path is relative to gulpfile.
UPD For such purposes, it is generally convenient to use the gulp-rigger module, it is more convenient to connect third-party scripts and when they are connected, you do not need to restart the task.

Answer 2

function scripts() {
  return src(paths.scripts.src)
  .pipe(concat(paths.jsOutputName))
  .pipe(uglify())
  .pipe(dest(paths.scripts.dest))
  .pipe(browserSync.stream())
}

what prevents paths.scripts.src from substituting this towel here?
but that's the solution.
I recommend linking webpack to gulp. Gulp doesn't know how to work with js at all, but paired with webpack it can be very good.

you have to compile common.js on it and transfer it to a new computer already in a compressed form (file 'scripts.min.js')

I hope not on floppy disks? sarcasm

Answer 3

OptimizedHTML - this is the analogue of webpack))
As for the "towel", apparently it is necessary, but I can't figure out exactly how:
there is such a construction:

let paths = {

  scripts: {
    src: [
      // 'node_modules/jquery/dist/jquery.min.js', // npm vendor example (npm i --save-dev jquery)
      baseDir + '/js/app.js' // app.js. Always at the end
    ],
    dest: baseDir + '/js',
  },

  styles: {
    src:  baseDir + '/' + preprocessor + '/main.*',
    dest: baseDir + '/css',
  },

  images: {
    src:  baseDir + '/images/src/**/*',
    dest: baseDir + '/images/dest',
  },

  cssOutputName: 'app.min.css',
  jsOutputName:  'app.min.js',
}

Apparently the author meant to add custom JS scripts like this:

baseDir + '/libs/Magnific-Popup/jquery.magnific-popup.min.js',
  baseDir + '/js/app.js' // app.js. Always at the end

but I'm missing something... the scripts don't start..