From 23e12073ad7e7167b06d2b891f0002b78cf5701f Mon Sep 17 00:00:00 2001 From: Laurent Goussard Date: Fri, 30 Jan 2015 16:29:10 +0100 Subject: [PATCH 01/11] [Add] lodash dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 34f9fa3..9612ad3 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "gulp-minify-css": "^0.3.11", "gulp-notify": "^2.0.0", "gulp-uglify": "^1.0.1", + "lodash": "^3.0.1", "main-bower-files": "^2.1.0" } } From bf090e08886e0a88cb4a30a0369358eae95457b8 Mon Sep 17 00:00:00 2001 From: Laurent Goussard Date: Fri, 30 Jan 2015 16:56:01 +0100 Subject: [PATCH 02/11] [Upg] Handle font files and enable options instead of bower function arguments --- index.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 53 insertions(+), 10 deletions(-) diff --git a/index.js b/index.js index be6ca5d..7b10dbd 100644 --- a/index.js +++ b/index.js @@ -6,14 +6,28 @@ var notify = require('gulp-notify'); var minify = require('gulp-minify-css'); var uglify = require('gulp-uglify'); var concat = require('gulp-concat'); +var _ = require('lodash'); -elixir.extend('bower', function(cssFile, cssOutput, jsFile, jsOutput) { +elixir.extend('bower', function(options) { var config = this; - var cssFile = cssFile || 'vendor.css'; - var jsFile = jsFile || 'vendor.js'; + + var options = _.merge({ + debug: false, + css: { + file: 'vendor.css', + output: config.cssOutput + }, + js: { + file: 'vendor.js', + output: config.jsOutput + }, + font: { + output: 'public/fonts' + } + }, options); - gulp.task('bower', ['bower-css', 'bower-js']); + gulp.task('bower', ['bower-css', 'bower-js', 'bower-fonts']); gulp.task('bower-css', function () { var onError = function (err) { @@ -27,12 +41,12 @@ elixir.extend('bower', function(cssFile, cssOutput, jsFile, jsOutput) { this.emit('end'); }; - return gulp.src(mainBowerFiles()) + return gulp.src(mainBowerFiles({debugging: options.debug})) .on('error', onError) .pipe(filter('**/*.css')) - .pipe(concat(cssFile)) + .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 +69,12 @@ elixir.extend('bower', function(cssFile, cssOutput, jsFile, jsOutput) { this.emit('end'); }; - return gulp.src(mainBowerFiles()) + return gulp.src(mainBowerFiles({debugging: options.debug})) .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 +83,35 @@ 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.debug, + filter: (/\.(eot|svg|ttf|woff|otf)$/i) + })) + .on('error', onError) + .pipe(gulp.dest(options.font.output)) + .pipe(notify({ + title: 'Laravel Elixir', + subtitle: 'Font Bower Files Imported!', + icon: __dirname + '/../icons/laravel.png', + message: ' ' + })); + }); + return this.queueTask('bower'); From 1c3e41c6e0130f288549dcc750446cd86869f74a Mon Sep 17 00:00:00 2001 From: Laurent Goussard Date: Fri, 30 Jan 2015 16:58:06 +0100 Subject: [PATCH 03/11] [Upg] Update readme --- README.md | 70 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 62 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 106f103..860000c 100644 --- a/README.md +++ b/README.md @@ -3,24 +3,78 @@ 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. -These settings can be overwriten by passing them to the `bower()` function. +### Settings +The default settings are the following : + +```javascript +{ + debug: 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 + } +} ``` + +Each setting can be overwritten by passing them as an object to the `bower()` function. + +### Examples + +```javascript elixir(function(mix) { - mix.bower('styles.css', 'public/assets/css', 'scripts.js', 'public/assets/js'); + mix.bower({ + debug: true, + css: { + file: 'plugins.css' + }, + js: { + output: 'public/scripts' + } + }); }); -``` \ No newline at end of file +``` + +```javascript + +var options = {}; +options.debug = true; +options.css = {file: 'plugins.css'}; +options.js = {output: 'public/scripts'}; + +elixir(function(mix) { + mix.bower(options); +}); +``` + +Those examples doe 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. + From 1301bd11f48642dc2edcce636c986e1476a5d19f Mon Sep 17 00:00:00 2001 From: Laurent Goussard Date: Fri, 30 Jan 2015 16:59:30 +0100 Subject: [PATCH 04/11] [Fix] Readme markdown lists --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 860000c..0ce65b9 100644 --- a/README.md +++ b/README.md @@ -16,10 +16,10 @@ elixir(function(mix) { ``` 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. +- 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. ### Settings @@ -73,8 +73,8 @@ elixir(function(mix) { ``` Those examples doe 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. +- 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. From 99c0403f706b5b9d051edd5302c84fa247dcb994 Mon Sep 17 00:00:00 2001 From: Laurent Goussard Date: Wed, 4 Mar 2015 11:28:46 +0100 Subject: [PATCH 05/11] [Fix] Use debugging instead of debug, as main-bower-files does --- README.md | 6 +++--- index.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0ce65b9..9dcbf26 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ The default settings are the following : ```javascript { - debug: false, // Enable/Disable verbose output + debugging: false, // Enable/Disable verbose output css: { file: 'vendor.css', // Merged CSS file output: config.cssOutput // Elixir default css output folder (public/css) @@ -49,7 +49,7 @@ Each setting can be overwritten by passing them as an object to the `bower()` fu ```javascript elixir(function(mix) { mix.bower({ - debug: true, + debugging: true, css: { file: 'plugins.css' }, @@ -63,7 +63,7 @@ elixir(function(mix) { ```javascript var options = {}; -options.debug = true; +options.debugging = true; options.css = {file: 'plugins.css'}; options.js = {output: 'public/scripts'}; diff --git a/index.js b/index.js index 7b10dbd..a3603d2 100644 --- a/index.js +++ b/index.js @@ -13,7 +13,7 @@ elixir.extend('bower', function(options) { var config = this; var options = _.merge({ - debug: false, + debugging: false, css: { file: 'vendor.css', output: config.cssOutput @@ -41,7 +41,7 @@ elixir.extend('bower', function(options) { this.emit('end'); }; - return gulp.src(mainBowerFiles({debugging: options.debug})) + return gulp.src(mainBowerFiles({debugging: options.debugging})) .on('error', onError) .pipe(filter('**/*.css')) .pipe(concat(options.css.file)) @@ -69,7 +69,7 @@ elixir.extend('bower', function(options) { this.emit('end'); }; - return gulp.src(mainBowerFiles({debugging: options.debug})) + return gulp.src(mainBowerFiles({debugging: options.debugging})) .on('error', onError) .pipe(filter('**/*.js')) .pipe(concat(options.js.file)) @@ -99,7 +99,7 @@ elixir.extend('bower', function(options) { }; return gulp.src(mainBowerFiles({ - debugging: options.debug, + debugging: options.debugging, filter: (/\.(eot|svg|ttf|woff|otf)$/i) })) .on('error', onError) From 5d3812adfed84671576bddcffc805ac8c328e840 Mon Sep 17 00:00:00 2001 From: Laurent Goussard Date: Wed, 4 Mar 2015 12:48:57 +0100 Subject: [PATCH 06/11] [Fix] Handle woff2 fonts --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index a3603d2..f5c8d70 100644 --- a/index.js +++ b/index.js @@ -100,7 +100,7 @@ elixir.extend('bower', function(options) { return gulp.src(mainBowerFiles({ debugging: options.debugging, - filter: (/\.(eot|svg|ttf|woff|otf)$/i) + filter: (/\.(eot|svg|ttf|woff|woff2|otf)$/i) })) .on('error', onError) .pipe(gulp.dest(options.font.output)) From 68bde13293902e0e4d18907ae4c3ea4a9c19e4fa Mon Sep 17 00:00:00 2001 From: Laurent Goussard Date: Wed, 4 Mar 2015 17:19:51 +0100 Subject: [PATCH 07/11] [Upg] Add gulp-changed for fonts Font file not modified won't be copied, for a faster gulp process --- index.js | 2 ++ package.json | 1 + 2 files changed, 3 insertions(+) diff --git a/index.js b/index.js index f5c8d70..b8aef4e 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ 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 _ = require('lodash'); elixir.extend('bower', function(options) { @@ -103,6 +104,7 @@ elixir.extend('bower', function(options) { 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', diff --git a/package.json b/package.json index 9612ad3..bc33e9b 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "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", From 3a330cfe0a4319675bb4407bf1fe166b0136b967 Mon Sep 17 00:00:00 2001 From: Thomas GERVAIS Date: Fri, 15 May 2015 21:31:19 +0200 Subject: [PATCH 08/11] Add image support --- index.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++- package.json | 6 +++++- 2 files changed, 65 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index b8aef4e..9397b92 100644 --- a/index.js +++ b/index.js @@ -7,6 +7,11 @@ 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"); + var _ = require('lodash'); elixir.extend('bower', function(options) { @@ -25,10 +30,15 @@ elixir.extend('bower', function(options) { }, font: { output: 'public/fonts' + }, + img: { + output: 'public/imgs', + extInline: [ 'gif', 'png'], + maxInlineSize: 32 * 1024 //max 32k on ie8 } }, options); - gulp.task('bower', ['bower-css', 'bower-js', 'bower-fonts']); + gulp.task('bower', ['bower-css', 'bower-js', 'bower-fonts', 'bower-imgs']); gulp.task('bower-css', function () { var onError = function (err) { @@ -45,6 +55,11 @@ elixir.extend('bower', function(options) { return gulp.src(mainBowerFiles({debugging: options.debugging})) .on('error', onError) .pipe(filter('**/*.css')) + .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(options.css.output)) @@ -113,6 +128,50 @@ elixir.extend('bower', function(options) { 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 bc33e9b..520a7ca 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,10 @@ "gulp-notify": "^2.0.0", "gulp-uglify": "^1.0.1", "lodash": "^3.0.1", - "main-bower-files": "^2.1.0" + "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" } } From c010fc38ab35dbe6bc4874680dba1d3420357912 Mon Sep 17 00:00:00 2001 From: Thomas GERVAIS Date: Fri, 15 May 2015 22:02:14 +0200 Subject: [PATCH 09/11] Update documentation --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9dcbf26..c4a2448 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,7 @@ This will : - 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 @@ -38,6 +39,12 @@ The default settings are the following : }, 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) } } ``` @@ -72,7 +79,7 @@ elixir(function(mix) { }); ``` -Those examples doe the same : +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 From 457d50770f2edc7a0f7cbad06d78ec61c78dad68 Mon Sep 17 00:00:00 2001 From: Joseph Richardson Date: Fri, 15 May 2015 17:08:06 -0400 Subject: [PATCH 10/11] Made all file types optional by checking for false value first. --- index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 9397b92..ba12f1f 100644 --- a/index.js +++ b/index.js @@ -38,7 +38,14 @@ elixir.extend('bower', function(options) { } }, options); - gulp.task('bower', ['bower-css', 'bower-js', 'bower-fonts', 'bower-imgs']); + 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', files ); gulp.task('bower-css', function () { var onError = function (err) { From 3d696c71f42305d14f56e6a9bf29ebbf47895f82 Mon Sep 17 00:00:00 2001 From: Joseph Richardson Date: Wed, 2 Sep 2015 00:53:48 -0400 Subject: [PATCH 11/11] Updated readme with optional example. --- README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/README.md b/README.md index c4a2448..b1916ff 100644 --- a/README.md +++ b/README.md @@ -51,6 +51,8 @@ The default settings are the following : 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 @@ -85,3 +87,27 @@ Those examples do the same : - 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.