Add support for optional css and js processing

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'
+        }
+    });
 });
-```
+```
+
+```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.

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');
 

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"
   }
 }