Giter Site home page Giter Site logo

bower-main's Introduction

bower-main

Made to be used with Gulp. Based on asset type, get bower main files as normal file names array and as minimized file names array. If no minified version is found for some files, these file names will be available as a 3rd array so you can minify them yourself. The order of the files is as set in bower.json.

It uses main-bower-files, manipulates the result and checks for the availability of a minimized version (in the bower package).

Installation

  npm install --save-dev bower-main

Usage

Require the module and get a set of asset files by giving two paramenters: First paramenter is the non-mimified file extension, like 'js' or 'css'. Second parameter (optional) is the minified file extension, like 'min.js' or 'min.css'. Here is a usage with JavaScript files:

var bowerMain = require('bower-main');
var bowerMainJavaScriptFilesObject = bowerMain('js','min.js');

var normalJavaScriptFileNamesArray           = bowerMainJavaScriptFilesObject.normal;
var minifiedJavaScriptFileNamesArray         = bowerMainJavaScriptFilesObject.minified;
var minifiedJavaScriptFileNamesNotFoundArray = bowerMainJavaScriptFilesObject.minifiedNotFound;

Minify non-minified scripts in Gulp

Again, this example uses JavaScript files.

var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var merge2 = require('merge2');
var bowerMain = require('bower-main');

var bowerMainJavaScriptFiles = bowerMain('js','min.js');

gulp.task('vendorScriptsDevelopment', function() {
  return gulp.src(bowerMainJavaScriptFiles.normal)
    .pipe(concat('vendor-scripts.js'))
    .pipe(gulp.dest('dev'))
});

gulp.task('vendorScriptsProduction', function() {
  return merge2(
    gulp.src(bowerMainJavaScriptFiles.minified),
    gulp.src(bowerMainJavaScriptFiles.minifiedNotFound)
      .pipe(concat('tmp.min.js'))
      .pipe(uglify())
  )
    .pipe(concat('vendor-scripts.min.js'))
    .pipe(gulp.dest('dist'))
});

Copy your Bower dependencies with Gulp

Assuming your Bower dependencies contain various extension files (css, js, fonts, eot, svg, etc.), it may seem heavy to select ALL the possible extensions. So, here is a sample that shows how to...

  • Copy the minified JS and CSS scripts when they exists.
  • Copy the full JS and CSS scripts when no minified version exist.
  • Copy all the other Bower dependencies (no matter their extension).
// Include our plug-ins
var bowerMain = require('bower-main');
var mainBowerFiles = require('main-bower-files');
var exists = require('path-exists').sync;
var gulpIgnore = require('gulp-ignore');

// Create some task
gulp.task( 'copy-bower-dep', function() {

	// Copy minified resources (Bower)
	gulp.src( bowerMain( 'js', 'min.js' ).minified, {base: './my-bower-components/dir'})
			.pipe( gulp.dest( './target/dist/lib' ));
	
	gulp.src( bowerMain( 'css', 'min.css' ).minified, {base: './my-bower-components/dir'})
			.pipe( gulp.dest( './target/dist/lib' ));
	
	// Copy non-minified resources (Bower)
	// Notice we filter these resources to distinguish which one are minified.
	gulp.src( mainBowerFiles(), {base: './my-bower-components/dir'})
			.pipe( gulpIgnore.include( keepNonMinified ))
			.pipe( gulp.dest( './target/dist/lib' ));
});

/*
 * A function that checks whether a Bower file has a minified version.
 */
function keepNonMinified( file ) {
	
	var keep = true;
	if( file.path.match( '\.js$' )) {
		var minPath = file.path.replace( '.js', '.min.js' );
		keep = ! exists( minPath );
		
	} else if( file.path.match( '\.css$' )) {
		var minPath = file.path.replace( '.css', '.min.css' );
		keep = ! exists( minPath );
	}
	
	// gutil.log( file.path + ' => ' + keep );
	return keep;
}

Based on this gist.

Issues

If you find a bug, have a feature request or similar, then create an issue on https://github.com/frodefi/bower-main/issues.

LICENSE

MIT © Frode Fikke

bower-main's People

Contributors

frodefi avatar vincent-zurczak avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.