Hello!

Look, if you use bower and gulp in the process of developing your project!

As a rule, at the beginning we have a structure similar to this:

  • Built - production folder.
  • Src - source folder.
  • gulp, bower, pakage, git ....

In the source folder we have folders style js img ...
Inside js, for example, the vendor folder, where bower will add all the downloaded plugins.

OK, yes! But how do we configure gulp to build a project in the Built folder?
Take the same JQ, which lies in SRC / JS / VENDOR / JQ / ....

When building a production version, we need to pull out one minimized jq-file and stuff it into built / js / vendor / jq.min.js

And if we have 5+ different plug-ins, and each still has styles, they are all in folders in SRC / JS / VENDOR / . How do you configure the buid folder then? How to proceed and transfer from src to the build? Or maybe there is another approach?

(I usually configure ivereload css compilation in gulp, and transfer HTML and everything ... and I shake all the plugins with my hands and transfer it to the build folder right away, but I want to somehow automate this process.)

Thanks in advance for your reply!

    1 answer 1

    Download bower packages and then. For gulp, you need concat, main-bower-files, gulp-concat, gulp-filter, and possibly gulp-order in order to preserve the order of js files.

    var gulp = require('gulp'), concat = require('gulp-concat'), filter = require('gulp-filter'), order = require('gulp-order'), mainBowerFiles = require('main-bower-files') ; gulp.task('scripts:vendor', function () { var vendors = mainBowerFiles(); return gulp.src(vendors) .pipe(filter('**.js')) .pipe(order(vendors)) .pipe(concat('vendor.js')) .pipe(gulp.dest('dist/')) ; })

    There is still a similar option .