How to build libraries in the frontend?

Question

css

Let's say I'm building a project that has some libraries, like the slick carousel and normalize.css. How to correctly compile this into dist, just copy the folders with the libraries, and then add the following mess to the html header:

<link rel="stylesheet" href="Libs/normalize-css/normalize.css"/>
  <link rel="stylesheet" href="Libs/slick-carousel/slick/slick-theme.css"/>
  <link rel="stylesheet" href="Libs/slick-carousel/slick/slick.css">
  <link rel="stylesheet" href="css/style.css"/> <!-- Мои стили -->

Or is it better to concatenate everything into one file and include only it?

Answer 1

Learning to use Gulp , well, in the end we collect everything in one css file and one js file using the gulp-concat concatenation plugins

var concat = require('gulp-concat');
 
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

Answer 2

This item may suit you: Grunt