Hello. I use gulp and bower, and, to be honest, only a year later came the enlightenment that I use this bundle at 10% of all power. I use it now like this:

There is a simple bower task that goes in the array of subtasks in the watch task:

 gulp.task('bower', function() { return bower({ directory: './dist/js/' }) });

Those. gulp stupidly copies all files from bower_components to build / js (all folders, to be exact).

Question: what are the ways to use this bundle to the maximum, that is, how to transfer all * .min.js files to / dist / js, and all * .min.css files to / dist / css? And even better, how to organize the concatenation of these files into one (js and css, naturally) - i.e. lib.min.js and lib.min.css? How will be more correct? Thank you in advance!

  • Do you need an example of using gulp for the most common tasks like gluing and minifying? - Vladimir Gamalyan
  • It was a good tool. But I do not advise. In a recent project, I encountered a number of unsolvable problems due to bower, due to the fact that it was no longer supported, and with the updating of components, such problems are increasing, they offer alternatives and manuals in their blog , how to migrate as painlessly as possible. - kizoso

1 answer 1

I do not think that this is a good idea, because they contain several .min.js / .min.css, often duplicating the contents of each other, for example bootstrap:

bootstrap.min.css, bootstrap-grid.min.css, bootstrap-reboot.min.css

But, you can do it like this:

 var gulp = require("gulp"), concat = require("gulp-concat"), csso = require("gulp-csso"), uglify = require("gulp-uglifyjs"),

...

  gulp.task('concats', ['concat:js','concat:css'], () => {return} ) gulp.task('concat:js', () => { return gulp.src("app/libs/**/*.min.js") .pipe(concat("concatedjs.js")) .pipe(uglify()) .pipe(gulp.dest("app/js/test")) }) gulp.task('concat:css', () => { return gulp.src("app/libs/**/*.min.css") .pipe(concat("concatedcss.css")) .pipe(csso()) .pipe(gulp.dest("app/css/test")) })

In watch shove 'concats'