[FEATURE] add svg support and release v3.1.0

README.md

@@ -37,6 +37,11 @@ To run the generator, navigate to the directory you want to create your project
 yo gulp-sgalinski
 ```
 
+### Further documentation
+
+* [Sprite engine](docs/SPRITE-ENGINE.md)
+* [Inline SVG](docs/INLINE-SVG.md)
+
 #### TYPO3 projects
 The purpose of this generator is to scaffold a frontend build process for TYPO3 projects with Extbase Extensions. This
 assumes, that your code is organized in extension folders under typo3conf/ext and that all extensions follow the same
@@ -125,6 +130,7 @@ on your ignorelist (.gitignore, .svnignore, etc.):
 
 ## Changelog
 
+* 2015-06-04   v3.1.0   add inline-svg plugin
 * 2015-05-21   v3.0.0   Remove standalone mode; get rid of asset-path.json; add check-filesize-plugin
 * 2015-02-22   v2.1.0   add cache and scriptmerger deactivation via query string params
 * 2015-02-15   v2.0.0   get rid of compass + update browsersync + add global watcher

app/templates/_package.json

@@ -15,6 +15,8 @@
 		"gulp-cached": "^1.0.2",
 		"gulp-check-filesize": "^1.0.0",
 		"gulp-css-image-dimensions": "^1.0.1",
+		"gulp-inline-svg": "^1.0.0",
+		"gulp-svgmin": "^1.1.2",
 		"gulp-cssimport": "^1.3.1",
 		"gulp-filter": "^2.0.2",
 		"gulp-hash": "^2.0.3",

app/templates/gulp/css.js

@@ -18,10 +18,12 @@ var gulp = require('gulp'),
 	browserSync = require('browser-sync'),
 	filter = require('gulp-filter'),<% if (minifyCss) { %>
 	minifyCss = require('gulp-minify-css'),<% } %>
-	checkFilesize = require('gulp-check-filesize');
+	checkFilesize = require('gulp-check-filesize'),
+	inlineSvg = require('gulp-inline-svg'),
+	svgMin = require('gulp-svgmin');
 
 // compile sass to css
-gulp.task('css', ['hash-sprites'], function() {
+gulp.task('css', ['hash-sprites', 'svg'], function() {
 	var path = require('path');
 	return gulp.src(settings.path().sass + '/**/*.scss')
 		.pipe(cssImageDimensions(path.resolve(settings.path().images)))
@@ -68,3 +70,10 @@ gulp.task('hash-sprites', ['sprites', 'clean-sprites'], function() {
 			del(settings.path().images + '/sprites.png');
 		}));
 });
+
+gulp.task('svg', function() {
+	return gulp.src(settings.path().images + '/Svg/**/*.svg')
+		.pipe(svgMin())
+		.pipe(inlineSvg())
+		.pipe(gulp.dest(settings.path().sass));
+});

app/templates/gulp/settings.js

@@ -4,6 +4,7 @@ module.exports = (function() {
 	var argv = require('yargs').argv,
 		path = require('path'),
 		chalk = require('chalk'),
+		fs = require('fs'),
 		config = require('./config.json'),
 		extension = function() {
 			if (typeof argv.ext === 'undefined') {
@@ -15,17 +16,24 @@ module.exports = (function() {
 			}
 			return argv.ext;
 		},
+		extensionConfig,
 		extensionPath = function() {
-			return path.join('typo3conf', 'ext', extension());
+			var extensionPath = path.join('typo3conf', 'ext', extension());
+			if (fs.existsSync(path.join(extensionPath, 'asset-paths.json'))) {
+				extensionConfig = require('./' + path.relative(__dirname, path.join(extensionPath, 'asset-paths.json')));
+			} else {
+				extensionConfig = config.directories;
+			}
+			return extensionPath;
 		};
 
 	return {
 		path: function() {
 			return {
-				css: path.join(extensionPath(), config.directories.css),
-				sass: path.join(extensionPath(), config.directories.sass),
-				javascript: path.join(extensionPath(), config.directories.javascript),
-				images: path.join(extensionPath(), config.directories.images)
+				css: path.join(extensionPath(), extensionConfig.css),
+				sass: path.join(extensionPath(), extensionConfig.sass),
+				javascript: path.join(extensionPath(), extensionConfig.javascript),
+				images: path.join(extensionPath(), extensionConfig.images)
 			};
 		},
 		setExtension: function(ext) {

docs/INLINE-SVG.md

+## Usage
+SVG files are expected to live inside a 'Svg' folder inside your images directory.
+
+This is taken from the official [gulp-inline-svg Plugin](http://gitlab.sgalinski.de/toolchain/gulp-inline-svg) documentation.
+
+### Usage inside you Sass code
+The _svg.scss file will provide you with the following mixins and functions:
+
+#### inline-svg mixin
+
+```scss
+.my-icon {
+	// will set the svg as background-image and width/height
+	@include inline-svg($icon-name);
+}
+```
+
+#### inline-svg-width function
+
+```scss
+.my-icon {
+	margin-left: inline-svg-width($icon-name);
+}
+```
+
+#### inline-svg-height function
+
+```scss
+.my-icon {
+	margin-bottom: inline-svg-height($icon-name);
+}
+```
+
+## Configuration
+If you want wo customize the default configuration, you can pass an options object to the task function:
+
+```javascript
+gulp.src("css/**/*.css")
+	.pipe(svgMin())
+	.pipe(inlineSvg({
+		filename: '_svg-file.scss',
+		template: 'mytemplate.mustache'
+	}))
+	.pipe(gulp.dest("sass"));
+```
+
+### filename
+Specifies the name of the generated file.
+
+### template
+The plugin will generate an .scss-file by default, but you can easily adopt this for other languages, by using your own template. With this option, you can specify the path to a [mustache](https://github.com/janl/mustache.js/) template.
+
+You can use the default template as a blueprint to create your own. And please don't hesitate to [share](http://gitlab.sgalinski.de/toolchain/gulp-inline-svg/fork/new) your template if you create one for an additional language.

package.json

 {
   "name": "generator-gulp-sgalinski",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Yeoman generator",
   "license": "MIT",
   "main": "app/index.js",