Commit ae8d715f authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[FEATURE] add svg support and release v3.1.0

parent cdf08838
......@@ -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
......
......@@ -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",
......
......@@ -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));
});
......@@ -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) {
......
## 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.
{
"name": "generator-gulp-sgalinski",
"version": "3.0.0",
"version": "3.1.0",
"description": "Yeoman generator",
"license": "MIT",
"main": "app/index.js",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment