Skip to content

Instantly share code, notes, and snippets.

@dgpro
Created October 18, 2017 14:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dgpro/866c9b10acb5eb458d3a4b1db90c38c7 to your computer and use it in GitHub Desktop.
Save dgpro/866c9b10acb5eb458d3a4b1db90c38c7 to your computer and use it in GitHub Desktop.
Gulp using Bower main files (jquery, bootstrap and etc) with merging less and css example
var gulp = require('gulp'),
filter = require('gulp-filter'),
mainBowerFiles = require('main-bower-files'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
cleanCss = require('gulp-clean-css'),
order = require('gulp-order'),
flatten = require('gulp-flatten'),
merge = require('merge-stream'),
less = require('gulp-less'),
minify = require('gulp-minify-css');
var assetPath = 'public/assets/',
paths = {
js: assetPath.concat('js'),
css: assetPath.concat('css'),
fonts: assetPath.concat('fonts'),
img: assetPath.concat('img')
},
jsFilter = filter('**/*.js', {restore: true}),
cssFilter = filter('**/*.css', {restore: true}),
lessFilter = filter('**/*.less', {restore: true}),
fontFilter = filter('**/fonts/*', {restore: true}),
imgFilter = filter('**/img/*', {restore: true});
gulp.task('bower', function () {
return gulp
.src(mainBowerFiles(), {base: 'bower_components'})
.pipe(gulp.dest('dist/lib/vendor'));
});
gulp.task('vendor', function () {
return gulp.src('dist/lib/vendor/**')
.pipe(jsFilter)
.pipe(order([
"**/jquery.min.js",
"**/bootstrap.min.js",
"**.js"
]))
.pipe(concat('vendor.min.js'))
.pipe(uglify())
.pipe(gulp.dest(paths.js))
.pipe(jsFilter.restore)
.pipe(fontFilter)
.pipe(flatten())
.pipe(gulp.dest(paths.fonts))
.pipe(fontFilter.restore)
.pipe(imgFilter)
.pipe(flatten())
.pipe(gulp.dest(paths.img))
.pipe(imgFilter.restore);
});
gulp.task('vendor-css', function () {
var lessStream = gulp.src('dist/lib/vendor/**')
.pipe(lessFilter)
.pipe(less());
var cssStream = gulp.src('dist/lib/vendor/**')
.pipe(cssFilter)
.pipe(cleanCss({compatibility: 'ie8'}));
return merge(cssStream, lessStream)
.pipe(concat('vendor.min.css'))
.pipe(minify())
.pipe(gulp.dest(paths.css))
.pipe(lessFilter.restore)
.pipe(cssFilter.restore);
});
gulp.task('default', ['vendor', 'vendor-css']);
@dgpro
Copy link
Author

dgpro commented Oct 18, 2017

bower.js overwrites for jquery 2 and bootstrap 3

"overrides": {
    "jquery": {
      "main": [
        "dist/jquery.min.js"
      ]
    },
    "bootstrap": {
      "main": [
        "dist/css/bootstrap.min.*",
        "dist/fonts/**",
        "dist/js/bootstrap.min.*"
      ]
    },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment