Commit 00ec8009 authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[FEATURE] prepare featureset for v3.2

parent 2816a3e9
......@@ -13,7 +13,9 @@ module.exports = yeoman.generators.Base.extend((function() {
cssPath: path.join('Resources', 'Public', 'StyleSheets'),
sassPath: path.join('Resources', 'Public', 'Sass'),
imagesPath: path.join('Resources', 'Public', 'Images'),
javascriptPath: path.join('Resources', 'Public', 'Scripts')
javascriptPath: path.join('Resources', 'Public', 'Scripts'),
spritePath: 'Sprites',
svgPath: 'Svg'
};
Generator.initializing = function() {
......@@ -74,6 +76,18 @@ module.exports = yeoman.generators.Base.extend((function() {
message: 'Please specify the path to the images',
default: resourcePathsSuggestions.imagesPath
},
{
type: 'input',
name: 'spritePath',
message: 'Please specify the path to the sprite images (relative to images)',
default: resourcePathsSuggestions.spritePath
},
{
type: 'input',
name: 'svgPath',
message: 'Please specify the path to the svg files (relative to images)',
default: resourcePathsSuggestions.svgPath
},
{
type: 'input',
name: 'extensions',
......@@ -103,16 +117,16 @@ module.exports = yeoman.generators.Base.extend((function() {
var done = this.async();
this.prompt([
{
type: 'confirm',
name: 'minifyCss',
message: 'Do you want to include minification for CSS files?\nYou won\'t need this if you have the ' +
'Scriptmerger Extension installed (http://typo3.org/extensions/repository/view/scriptmerger)',
default: false
type: 'input',
name: 'filesizeLimitCss',
message: 'Specify a maximum size (in Bytes) for CSS files. Leave blank if you don\'t want to ' +
'specify a limit',
default: ''
},
{
type: 'input',
name: 'maxCssFileSize',
message: 'Specify a maximum size (in Bytes) for CSS files. Leave blank if you don\'t want to ' +
name: 'filesizeLimitGzippedCss',
message: 'Specify a maximum size (in Bytes) for CSS files after gzip compression. Leave blank if you don\'t want to ' +
'specify a limit',
default: ''
}
......@@ -125,22 +139,16 @@ module.exports = yeoman.generators.Base.extend((function() {
var done = this.async();
this.prompt([
{
type: 'confirm',
name: 'browserify',
message: 'Do you want to use Browserify for organizing you JS modules?',
default: true
},
{
type: 'confirm',
name: 'jsuglify',
message: 'Do you want to include uglify for JavaScript?\nYou won\'t need this if you have the ' +
'Scriptmerger Extension installed (http://typo3.org/extensions/repository/view/scriptmerger)',
default: false
type: 'input',
name: 'filesizeLimitJs',
message: 'Specify a maximum size (in Bytes) for JavaScript files. Leave blank if you don\'t want to ' +
'specify a limit',
default: ''
},
{
type: 'input',
name: 'maxJsFileSize',
message: 'Specify a maximum size (in Bytes) for JavaScript files. Leave blank if you don\'t want to ' +
name: 'filesizeLimitGzippedJs',
message: 'Specify a maximum size (in Bytes) for JavaScript files after gzip compression. Leave blank if you don\'t want to ' +
'specify a limit',
default: ''
}
......@@ -186,6 +194,10 @@ module.exports = yeoman.generators.Base.extend((function() {
this.templatePath('_jshintrc'),
this.destinationPath('.jshintrc')
);
this.fs.copy(
this.templatePath('_scss-lint.yml'),
this.destinationPath('.scss-lint.yml')
);
};
Generator.writeGulp = function() {
......@@ -229,6 +241,11 @@ module.exports = yeoman.generators.Base.extend((function() {
this.destinationPath('gulp/sprite-scss-template.mustache'),
answers
);
this.fs.copy(
this.templatePath('gulp/inline-svg-template.mustache'),
this.destinationPath('gulp/inline-svg-template.mustache'),
answers
);
};
Generator.writeDependencyManagement = function() {
......
......@@ -9,6 +9,16 @@ var gulp = require('gulp'),
require('require-dir')('./gulp');
function getExtensionName(changedFile, task) {
var extension = changedFile.path.split('/' + task)[0].split('typo3conf/ext/')[1];
gutil.log(chalk.green('Change in "') + chalk.magenta(path.relative('.', changedFile.path)) + chalk.green('"'));
return extension;
}
function setExtensionName(file) {
settings.setExtension(getExtensionName(file, config.directories.javascript));
}
gulp.task('watch', function() {
var sassWatchers = [];
......@@ -26,10 +36,7 @@ gulp.task('watch', function() {
for (i = config.extensions.length; i--;) {
gulp.watch(
['typo3conf/ext/' + config.extensions[i] + '/' + config.directories.javascript + '/**/*.js'],
['javascript']).on('change', function(file) {
settings.setExtension(getExtensionName(file, config.directories.javascript));
}
);
['javascript']).on('change', setExtensionName);
}
});
......@@ -37,10 +44,3 @@ gulp.task('watch', function() {
gulp.task('default', function() {
gulp.start('browser-sync', 'watch');
});
function getExtensionName(changedFile, task) {
var extension = changedFile.path.split('/' + task)[0].split('typo3conf/ext/')[1];
gutil.log(chalk.green('Change in "') + chalk.magenta(path.relative('.', changedFile.path)) + chalk.green('"'));
return extension;
}
......@@ -8,29 +8,23 @@
"browser-sync": "^2.1.0",
"browserify": "^10.2.1",
"chalk": "^0.5.0",
"css-sprite": "^0.9.8",
"del": "^1.1.1",
"sprity": "^1.0.6",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^2.0.0",
"gulp-cached": "^1.0.2",
"gulp-check-filesize": "^1.0.0",
"gulp-check-filesize": "^2.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",
"gulp-hash-references": "^1.0.2",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.1.0",
"gulp-jshint": "^1.10.0",
"gulp-livereload": "^3.2.0",<% if (minifyCss) { %>
"gulp-minify-css": "^1.1.1",<% } %>
"gulp-rename": "^1.2.0",
"gulp-minify-css": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^1.3.2",
"gulp-sourcemaps": "^1.3.0",
"gulp-tap": "^0.1.3",<% if (jsuglify) { %>
"gulp-uglify": "^1.2.0",<% } %>
"gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.4",
"jshint-stylish": "^1.0.0",
"require-dir": "^0.1.0",
......
......@@ -13,7 +13,7 @@ gulp.task('browser-sync', function() {
} else {
conjunction = '?';
}
req.url = req.url + conjunction + "no_cache=1&disableScriptmerger=1";
req.url = req.url + conjunction + 'no_cache=1&disableScriptmerger=1';
next();
}
});
......
......@@ -3,7 +3,9 @@
"css": "<%= cssPath %>",
"sass": "<%= sassPath %>",
"javascript": "<%= javascriptPath %>",
"images": "<%= imagesPath %>"
"images": "<%= imagesPath %>",
"sprites": "<%= imagesPath %>/<%= spritePath %>",
"svg": "<%= imagesPath %>/<%= svgPath %>"
},
"extensions": [
<%= extensions %>
......
......@@ -5,75 +5,66 @@ var gulp = require('gulp'),
sass = require('gulp-sass'),
cssImageDimensions = require('gulp-css-image-dimensions'),
cssImport = require('gulp-cssimport'),
cssmin = require('gulp-minify-css'),
rename = require('gulp-rename'),
gulpif = require('gulp-if'),
sprite = require('css-sprite').stream,
sprity = require('sprity'),
imagemin = require('gulp-imagemin'),
tap = require('gulp-tap'),
del = require('del'),
hash = require('gulp-hash'),
path = require('path'),
sourcemaps = require('gulp-sourcemaps'),
references = require('gulp-hash-references'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
filter = require('gulp-filter'),<% if (minifyCss) { %>
minifyCss = require('gulp-minify-css'),<% } %>
filter = require('gulp-filter'),
checkFilesize = require('gulp-check-filesize'),
inlineSvg = require('gulp-inline-svg'),
svgMin = require('gulp-svgmin');
// compile sass to css
gulp.task('css', ['hash-sprites', 'svg'], function() {
gulp.task('css', ['sprites', 'svg'], function() {
var path = require('path');
return gulp.src(settings.path().sass + '/**/*.scss')
.pipe(cssImageDimensions(path.resolve(settings.path().images)))
.pipe(sourcemaps.init())
.pipe(sass({errLogToConsole: true}))
.pipe(cssImport())
.pipe(autoprefixer(<%= autoprefixerBrowserSelection %>))<% if (minifyCss) { %>
.pipe(minifyCss())<% } %>
.pipe(autoprefixer(<%= autoprefixerBrowserSelection %>))
.pipe(sourcemaps.write('../SourceMaps'))
.pipe(gulp.dest(settings.path().css))
.pipe(filter('**/*.css'))
.pipe(checkFilesize(<%= maxCssFileSize %>))
.pipe(browserSync.reload({stream: true}));
.pipe(browserSync.reload({stream: true}))
.pipe(cssmin())
.pipe(filter(['*', '!rte.css']))
.pipe(rename({
suffix: '.min'
}))
.pipe(checkFilesize({
enableGzip: true<% if (filesizeLimitCss) { %>,
filesizeLimit: <%= filesizeLimitCss %><% } %><% if (filesizeLimitGzippedCss) { %>,
filesizeLimitGzipped: <%= filesizeLimitGzippedCss %><% } %>
}))
.pipe(gulp.dest(settings.path().css));
});
// create spritesheet
gulp.task('sprites', function() {
return gulp.src(path.join(settings.path().images, '/sprites') + '/**/*')
.pipe(sprite({
return sprity.src({
src: settings.path().sprites + '/**/*.png',
name: 'sprites',
style: '_sprite.scss',
cssPath: path.relative(path.resolve(settings.path().css), path.resolve(settings.path().images)) + '/',
template: 'gulp/sprite-scss-template.mustache',
orientation: 'binary-tree'
}))
orientation: 'binary-tree',
cachebuster: true
})
.pipe(imagemin())
.pipe(gulpif('*.png', gulp.dest(settings.path().images), gulp.dest(settings.path().sass)));
});
// remove old spritesheet
gulp.task('clean-sprites', function() {
del(settings.path().images + '/sprites-*.png');
});
// cache-busting
gulp.task('hash-sprites', ['sprites', 'clean-sprites'], function() {
return gulp.src(settings.path().images + '/sprites.png')
.pipe(hash())
.pipe(gulp.dest(settings.path().images))
.pipe(hash.manifest('manifest.json'))
.pipe(references(gulp.src(settings.path().sass + '/_sprite.scss')))
.pipe(gulp.dest(settings.path().sass))
.pipe(tap(function() {
del(settings.path().images + '/sprites.png');
}));
});
gulp.task('svg', function() {
return gulp.src(settings.path().images + '/Svg/**/*.svg')
return gulp.src(settings.path().svg + '/**/*.svg')
.pipe(svgMin())
.pipe(inlineSvg())
.pipe(inlineSvg({
template: 'gulp/inline-svg-template.mustache'
}))
.pipe(gulp.dest(settings.path().sass));
});
......@@ -12,3 +12,19 @@ gulp.task('images', function() {
}))
.pipe(gulp.dest(settings.path().images));
});
gulp.task('images-fileadmin', function() {
gulp.src('fileadmin/**/*.{png,gif,jpg}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(gulp.dest('fileadmin'));
gulp.src('uploads/**/*.{png,gif,jpg}')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(gulp.dest('uploads'));
});
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
{{#svgs}}
${{{name}}}: '{{{inline}}}' {{width}} {{height}};
{{/svgs}}
@mixin inline-svg($name, $color: null) {
@if ($color) {
$color: str-replace($color + '', '#', '');
background: transparent url(str-replace(nth($name, 1), '%23FFF', '%23' + $color)) no-repeat 50% 50%;
color: $color;
} @else {
background: transparent url(nth($name, 1)) no-repeat 50% 50%;
}
background-size: 100%;
width: nth($name, 2);
height: nth($name, 3);
}
@function inline-svg-width($name) {
@return nth($name, 2);
}
@function inline-svg-height($name) {
@return nth($name, 3);
}
......@@ -5,13 +5,16 @@ var gulp = require('gulp'),
jshint = require('gulp-jshint'),
browserify = require('browserify'),
buffer = require('vinyl-buffer'),
source = require('vinyl-source-stream'),<% if (jsuglify) { %>
uglify = require('gulp-uglify'),<% } %>
source = require('vinyl-source-stream'),
browserSync = require('browser-sync'),
checkFilesize = require('gulp-check-filesize');
checkFilesize = require('gulp-check-filesize'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
filter = require('gulp-filter'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('jshint', function() {
return gulp.src([settings.path().javascript + '/**/*.js', '!' + settings.path().javascript + '/**/*.min.js'])
return gulp.src([settings.path().javascript + '/**/*.js', '!bundled.min.js'])
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
});
......@@ -20,12 +23,25 @@ gulp.task('javascript', function() {
gulp.src([settings.path().javascript + '/**/*.js', '!' + settings.path().javascript + '/**/*.min.js'])
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
return browserify('./' + settings.path().javascript + '/main.js')
return browserify({
entries: settings.path().javascript + '/main.js',
debug: true
})
.bundle()
.pipe(source(<% if (jsuglify) { %>'main.min.js'<% } else { %>'main.js'<% } %>))
.pipe(buffer())<% if (jsuglify) { %>
.pipe(uglify())<% } %>
.pipe(source('main.js'))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(rename({
suffix: '.bundled.min'
}))
.pipe(uglify())
.pipe(sourcemaps.write('../SourceMaps'))
.pipe(filter(['*', '!.css.map']))
.pipe(checkFilesize({
enableGzip: true<% if (filesizeLimitJs) { %>,
filesizeLimit: <%= filesizeLimitJs %><% } %><% if (filesizeLimitGzippedJs) { %>,
filesizeLimitGzipped: <%= filesizeLimitGzippedJs %><% } %>
}))
.pipe(gulp.dest('./' + settings.path().javascript))
.pipe(checkFilesize(<%= maxJsFileSize %>))
.pipe(browserSync.reload({stream: true}));
});
......@@ -33,7 +33,9 @@ module.exports = (function() {
css: path.join(extensionPath(), extensionConfig.css),
sass: path.join(extensionPath(), extensionConfig.sass),
javascript: path.join(extensionPath(), extensionConfig.javascript),
images: path.join(extensionPath(), extensionConfig.images)
images: path.join(extensionPath(), extensionConfig.images),
sprites: path.join(extensionPath(), extensionConfig.sprites),
svg: path.join(extensionPath(), extensionConfig.svg)
};
},
setExtension: function(ext) {
......
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