diff --git a/README.md b/README.md index 106f103..b1916ff 100644 --- a/README.md +++ b/README.md @@ -3,24 +3,111 @@ laravel-elixir-bower Elixir Wrapper Around Bower -``` +### Usage + +```javascript var elixir = require('laravel-elixir'); require('laravel-elixir-bower'); elixir(function(mix) { - mix.bower() - .routes() - .events(); + mix.bower(); }); ``` -This will scan your bower files and concat all css files, by default, in a `css/vendor.css` file. And all js files in a `js/vendor.js` file. +This will : +- scan your bower files +- concat all css files in a `public/css/vendor.css` file +- concat all js files in a `public/js/vendor.js` file +- copy all webfonts in a `fonts/` folder. +- copy all images in a `imgs/` folder. + +### Settings -These settings can be overwriten by passing them to the `bower()` function. +The default settings are the following : +```javascript +{ + debugging: false, // Enable/Disable verbose output + css: { + file: 'vendor.css', // Merged CSS file + output: config.cssOutput // Elixir default css output folder (public/css) + }, + js: { + file: 'vendor.js', // Merged JS file + output: config.jsOutput // Elixir default js output folder (public/js) + }, + font: { + output: 'public/fonts' // Web fonts output folder + }, + img: { + output: 'public/imgs', + extInline: ['gif','png'], // Extensions to inline + maxInlineSize: 32 * 1024 // [kB] Inline as data uri images below specified size + // (use 0 to disable, max 32k on ie8) + } +} ``` + +Each setting can be overwritten by passing them as an object to the `bower()` function. + +Any setting can also be set to `false` to prevent generation and output of those files. + +### Examples + +```javascript elixir(function(mix) { - mix.bower('styles.css', 'public/assets/css', 'scripts.js', 'public/assets/js'); + mix.bower({ + debugging: true, + css: { + file: 'plugins.css' + }, + js: { + output: 'public/scripts' + } + }); }); -``` \ No newline at end of file +``` + +```javascript + +var options = {}; +options.debugging = true; +options.css = {file: 'plugins.css'}; +options.js = {output: 'public/scripts'}; + +elixir(function(mix) { + mix.bower(options); +}); +``` + +Those examples do the same : +- scan your bower files +- concat all css files in a `public/css/plugins.css` file +- concat all js files in a `public/scripts/vendor.js` file +- copy all webfonts in a `fonts/` folder. + +```javascript +elixir(function(mix) { + mix.bower({ + debugging: true, + css: false, + js: false, + font: { + output: 'public/fonts' + }, + img: { + output: 'public/css', + extInline: ['gif', 'png'], // Extensions to inline + maxInlineSize: 32 * 1024 // [kB] Inline as data uri images below specified size + // (use 0 to disable, max 32k on ie8) + } + }); +}); +``` +This example does the following: +- scan your bower files +- skips css and js files +- copy all webfonts in a `public/fonts/` folder. +- copy all gif or png images into `public/css` folder. +- inline any of those images which are smaller than 32k. diff --git a/index.js b/index.js index be6ca5d..ba12f1f 100644 --- a/index.js +++ b/index.js @@ -6,14 +6,46 @@ var notify = require('gulp-notify'); var minify = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); +var changed = require('gulp-changed'); +var base64 = require('gulp-base64'); +var test = require('gulp-if'); +var ignore = require('gulp-ignore'); +var getFileSize = require("filesize"); -elixir.extend('bower', function(cssFile, cssOutput, jsFile, jsOutput) { +var _ = require('lodash'); + +elixir.extend('bower', function(options) { var config = this; - var cssFile = cssFile || 'vendor.css'; - var jsFile = jsFile || 'vendor.js'; + + var options = _.merge({ + debugging: false, + css: { + file: 'vendor.css', + output: config.cssOutput + }, + js: { + file: 'vendor.js', + output: config.jsOutput + }, + font: { + output: 'public/fonts' + }, + img: { + output: 'public/imgs', + extInline: [ 'gif', 'png'], + maxInlineSize: 32 * 1024 //max 32k on ie8 + } + }, options); + + var files = []; + + if(options.css !== false) files.push('bower-css'); + if(options.js !== false) files.push('bower-js'); + if(options.font !== false) files.push('bower-fonts'); + if(options.img !== false) files.push('bower-imgs'); - gulp.task('bower', ['bower-css', 'bower-js']); + gulp.task('bower', files ); gulp.task('bower-css', function () { var onError = function (err) { @@ -27,12 +59,17 @@ elixir.extend('bower', function(cssFile, cssOutput, jsFile, jsOutput) { this.emit('end'); }; - return gulp.src(mainBowerFiles()) + return gulp.src(mainBowerFiles({debugging: options.debugging})) .on('error', onError) .pipe(filter('**/*.css')) - .pipe(concat(cssFile)) + .pipe(test(options.img.maxInlineSize > 0, base64({ + extensions: options.img.extInline, + maxImageSize: options.img.maxInlineSize, // bytes + debug: options.debugging, + }))) + .pipe(concat(options.css.file)) .pipe(minify()) - .pipe(gulp.dest(cssOutput || config.cssOutput)) + .pipe(gulp.dest(options.css.output)) .pipe(notify({ title: 'Laravel Elixir', subtitle: 'CSS Bower Files Imported!', @@ -55,12 +92,12 @@ elixir.extend('bower', function(cssFile, cssOutput, jsFile, jsOutput) { this.emit('end'); }; - return gulp.src(mainBowerFiles()) + return gulp.src(mainBowerFiles({debugging: options.debugging})) .on('error', onError) .pipe(filter('**/*.js')) - .pipe(concat(jsFile)) + .pipe(concat(options.js.file)) .pipe(uglify()) - .pipe(gulp.dest(jsOutput || config.jsOutput)) + .pipe(gulp.dest(options.js.output)) .pipe(notify({ title: 'Laravel Elixir', subtitle: 'Javascript Bower Files Imported!', @@ -69,6 +106,80 @@ elixir.extend('bower', function(cssFile, cssOutput, jsFile, jsOutput) { })); }); + + gulp.task('bower-fonts', function(){ + + var onError = function (err) { + + notify.onError({ + title: "Laravel Elixir", + subtitle: "Bower Files Font Copy Failed!", + message: "Error: <%= error.message %>", + icon: __dirname + '/../icons/fail.png' + })(err); + + this.emit('end'); + }; + + return gulp.src(mainBowerFiles({ + debugging: options.debugging, + filter: (/\.(eot|svg|ttf|woff|woff2|otf)$/i) + })) + .on('error', onError) + .pipe(changed(options.font.output)) + .pipe(gulp.dest(options.font.output)) + .pipe(notify({ + title: 'Laravel Elixir', + subtitle: 'Font Bower Files Imported!', + icon: __dirname + '/../icons/laravel.png', + message: ' ' + })); + }); + + gulp.task('bower-imgs', function () { + + var onError = function (err) { + + notify.onError({ + title: "Laravel Elixir", + subtitle: "Bower Files Images Copy Failed!", + message: "Error: <%= error.message %>", + icon: __dirname + '/../icons/fail.png' + })(err); + + this.emit('end'); + }; + + var isInline = function (file) { + + var filesize = file.stat ? getFileSize(file.stat.size) : getFileSize(Buffer.byteLength(String(file.contents))); + var fileext = file.path.split('.').pop(); + + if (options.debugging) + { + console.log("Size of file:" + file.path + " (" + 1024*parseFloat(filesize) +" / max="+options.img.maxInlineSize+")"); + } + + return options.img.extInline.indexOf(fileext) > -1 && 1024*parseFloat(filesize) < options.img.maxInlineSize; + } + + return gulp.src(mainBowerFiles({ + debugging: options.debugging, + filter: (/\.(png|bmp|gif|jpg|jpeg)$/i) + })) + .on('error', onError) + .pipe(ignore.exclude(isInline)) // Exclude inlined images + .pipe(changed(options.img.output)) + .pipe(gulp.dest(options.img.output)) + .pipe(notify({ + title: 'Laravel Elixir', + subtitle: 'Images Bower Files Imported!', + icon: __dirname + '/../icons/laravel.png', + message: ' ' + })); + + }); + return this.queueTask('bower'); diff --git a/package.json b/package.json index 34f9fa3..520a7ca 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,18 @@ "url": "https://github.com/Crinsane/laravel-elixir-bower/issues" }, "dependencies": { + "gulp-changed": "^1.1.1", "gulp-concat": "^2.4.1", "gulp-filter": "^1.0.2", "gulp-load-plugins": "^0.7.0", "gulp-minify-css": "^0.3.11", "gulp-notify": "^2.0.0", "gulp-uglify": "^1.0.1", - "main-bower-files": "^2.1.0" + "lodash": "^3.0.1", + "main-bower-files": "^2.1.0", + "gulp-base64" :"^0.1.2", + "gulp-if" :"^1.2.5", + "gulp-ignore" :"^1.2.1", + "filesize":"^2.0.0" } }