Commit 558f57a5 authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

[TASK] remove old gulp leftovers

parent 442da3a3
'use strict';
let gulp = require('gulp'),
path = require('path'),
settings = require('./settings'),
config = settings.getConfig(),
argv = require('yargs').argv,
plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browser-sync']
}),
buffer = require('vinyl-buffer'),
merge = require('merge-stream'),
filterPattern = ['*', '!**/*.map.min.css'],
lazypipe = require('lazypipe'),
reporter = require('postcss-reporter'),
stylelint = require('stylelint'),
scss = require("postcss-scss");
function processCss() {
let filter = plugins.filter(filterPattern, {restore: true}),
compilationProcess = lazypipe()
.pipe(plugins.sass, {precision: 8})
.pipe(plugins.cssImageDimensions, path.resolve(settings.getPath() + '/' + config.directories.images))
.pipe(plugins.autoprefixer, {
browsers: config.css.supportedBrowsers ? config.css.supportedBrowsers : ['last 1 version', '> 1%', 'ie 8']
})
.pipe(function() {
return plugins.if(config.css.pipeline.cleanCss, plugins.cleanCss({
inline: false
}));
})
.pipe(function() {
return plugins.if(config.css.pipeline.renameToDotMin, plugins.rename({
suffix: '.min'
}));
});
if (argv.production) {
return gulp.src([settings.getPath() + '/' + config.directories.sass + '/**/*.scss', '!**/*scsslint_tmp*.scss'], {since: gulp.lastRun('css')})
.pipe(compilationProcess())
.pipe(filter)
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(filter.restore)
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.css));
} else {
let sourcemapsPath;
if (config.directories.hasOwnProperty('cssSourceMaps') && config.directories.cssSourceMaps !== 'inline') {
sourcemapsPath = path.relative(settings.getPath() + '/' + config.directories.css, settings.getPath() + '/' + config.directories.cssSourceMaps);
}
return gulp.src([settings.getPath() + '/' + config.directories.sass + '/**/*.scss', '!**/*scsslint_tmp*.scss'], {since: gulp.lastRun('css')})
.pipe(plugins.sourcemaps.init())
.pipe(compilationProcess())
.on('error', plugins.sass.logError)
.pipe(plugins.sourcemaps.write(sourcemapsPath))
.pipe(filter)
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(filter.restore)
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.css));
}
}
function processCssAndSync() {
return processCss()
.pipe(plugins.browserSync.stream({match: '**/*.css'}));
}
gulp.task('css:sprites', function() {
// Generate our spritesheet
let spriteData = gulp.src(settings.getPath() + '/' + config.directories.sprites + '/**/*.png').pipe(plugins.spritesmith({
imgName: 'sprites.png',
cssName: '_sprite.scss',
imgPath: '/' + settings.getPath(true) + '/' + config.directories.images + '/sprites.png',
cssTemplate: 'sgc-core/gulp/sprites-template.handlebars'
}));
// Pipe image stream through image optimizer and onto disk
let imgStream = spriteData.img
.pipe(buffer())
.pipe(plugins.imagemin({
progressive: true
}))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.images));
let cssStream = spriteData.css
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.sass));
return merge(imgStream, cssStream);
});
gulp.task('css:svg', function() {
return gulp.src(settings.getPath() + '/' + config.directories.svg + '/**/*.svg')
.pipe(plugins.svgmin())
.pipe(plugins.inlineSvg({
template: 'sgc-core/gulp/inline-svg-template.mustache'
}))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.sass));
});
gulp.task('css:abovethefold', function() {
return gulp.src(config.abovethefold.template)
.pipe(plugins.inlineSource())
.pipe(gulp.dest(config.abovethefold.dest));
});
gulp.task('css:qa', function() {
return gulp.src([settings.getPath() + '/' + config.directories.sass + '/**/*.scss', '!**/*scsslint_tmp*.scss'].concat(config.css.excludeFromQa))
.pipe(plugins.postcss(
[
stylelint({
configBasedir: `${process.cwd()}/sgc-core/`
}),
reporter({ clearMessages: true })
],
{
syntax: scss
}
));
});
gulp.task('css', gulp.series(gulp.parallel('css:sprites', 'css:svg', 'css:qa'), processCss, 'css:abovethefold'));
gulp.task('css:compileAndSync', gulp.series(gulp.parallel('css:sprites', 'css:svg', 'css:qa'), processCssAndSync, 'css:abovethefold'));
'use strict';
const gulp = require('gulp'),
settings = require('./settings'),
config = settings.getConfig(),
path = require('path'),
argv = require('yargs').argv,
glob = require('glob'),
plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browserify', 'browser-sync']
});
let compiler;
function setUpCompiler() {
if (!config.js.compiler) {
plugins.util.log(plugins.util.colors.red('No compiler specified!'));
plugins.util.log(plugins.util.colors.red('You need to specify which JavaScript compiler you want to use inside your .sgc-config file.'));
done();
return;
}
switch (config.js.compiler) {
case 'es6':
plugins.util.log(plugins.util.colors.blue('Using ES6 compiler'));
return new require('./js-compilers/es6')();
case 'typescript':
plugins.util.log(plugins.util.colors.blue('Using Typescript compiler'));
return new require('./js-compilers/typescript')();
default:
plugins.util.log(plugins.util.colors.red('The specified JavaScript compiler "' + config.js.compiler + '" could not be found'));
done();
return;
}
}
gulp.task('js:qa', function() {
return gulp.src([settings.getPath() + '/' + config.directories.javascriptSrc + '/**/*.js', '!**/*.min.js'].concat(config.js.excludeFromQa))
.pipe(plugins.eslint())
.pipe(plugins.eslint.format('sgc-core/node_modules/eslint-formatter-pretty'))
});
gulp.task('js:compile', function(done) {
compiler = setUpCompiler(done);
glob(`${settings.getPath()}/${config.directories.javascriptSrc}/*${compiler.getFileExtension()}`, function(err, files) {
return compiler.compile(files, done, argv.production);
});
});
gulp.task('js:compileAndSync', function(done) {
compiler = setUpCompiler(done);
glob(`${settings.getPath()}/${config.directories.javascriptSrc}/*${compiler.getFileExtension()}`, function(err, files) {
return compiler.compile(files, done, argv.production)
.pipe(plugins.browserSync.stream());
});
});
gulp.task('js', gulp.series('js:qa', 'js:compile'));
module.exports.setUpCompiler = setUpCompiler;
module.exports = function() {
'use strict';
var es6 = {},
gulp = require('gulp'),
settings = require('../settings'),
config = settings.getConfig(),
path = require('path'),
eventStream = require('event-stream'),
babelify = require('babelify'),
rename = require('gulp-rename'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browserify', 'browser-sync']
});
es6.compile = function(files, done, _productionMode) {
var tasks = files.map(function(file) {
var browserify = plugins.browserify({
entries: [file],
paths: config.js.libraryPaths,
debug: true
});
if (_productionMode) {
return browserify.transform(babelify.configure({
presets: [require('babel-preset-es2015')]
}))
.bundle()
.pipe(source(file))
.pipe(buffer())
.pipe(plugins.uglify())
.on('error', console.log)
.pipe(rename({
extname: '.bundled.min.js',
dirname: ''
}))
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.javascriptDest));
} else {
let sourcemapsPath;
if (config.directories.hasOwnProperty('javascriptSourceMaps') && config.directories.javascriptSourceMaps !== 'inline') {
sourcemapsPath = path.relative(settings.getPath() + '/' + config.directories.javascriptDest, settings.getPath() + '/' + config.directories.javascriptSourceMaps);
}
return browserify.transform(babelify.configure({
presets: [require('babel-preset-es2015')]
}))
.bundle()
.pipe(source(file))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.if(config.js.pipeline.uglify, plugins.uglify()))
.on('error', console.log)
.pipe(rename({
extname: config.js.pipeline.renameToDotMin ? '.bundled.min.js' : '.bundled.js',
dirname: ''
}))
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(plugins.sourcemaps.write(sourcemapsPath))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.javascriptDest));
}
});
return eventStream.merge(tasks).on('end', done);
};
es6.getFileExtension = function() {
return '.js';
};
return es6;
};
module.exports = function() {
'use strict';
var typescript = {},
gulp = require('gulp'),
settings = require('../settings'),
config = settings.getConfig(),
path = require('path'),
eventStream = require('event-stream'),
rename = require('gulp-rename'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
tsify = require('tsify'),
plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browserify', 'browser-sync']
});
typescript.compile = function(files, done, _productionMode) {
var tasks = files.map(function(file) {
var browserify = plugins.browserify({
entries: [file],
paths: config.js.libraryPaths,
debug: true
});
if (_productionMode) {
return browserify
.plugin(tsify, {noImplicitAny: true})
.bundle()
.pipe(source(file))
.pipe(buffer())
.pipe(plugins.uglify())
.on('error', console.log)
.pipe(rename({
extname: '.bundled.min.js',
dirname: ''
}))
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.javascriptDest));
} else {
let sourcemapsPath;
if (config.directories.hasOwnProperty('javascriptSourceMaps') && config.directories.javascriptSourceMaps !== 'inline') {
sourcemapsPath = path.relative(settings.getPath() + '/' + config.directories.javascriptDest, settings.getPath() + '/' + config.directories.javascriptSourceMaps);
}
return browserify
.plugin(tsify, {noImplicitAny: true})
.bundle()
.pipe(source(file))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.if(config.js.pipeline.uglify, plugins.uglify()))
.on('error', console.log)
.pipe(rename({
extname: config.js.pipeline.renameToDotMin ? '.bundled.min.js' : '.bundled.js',
dirname: ''
}))
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(plugins.sourcemaps.write(sourcemapsPath))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.javascriptDest));
}
});
return eventStream.merge(tasks).on('end', done);
};
typescript.getFileExtension = function() {
return '.ts';
};
return typescript;
};
{
"directories": {
"basePath": "web/typo3conf/ext/",
"webPath": "typo3conf/ext/",
"css": "Resources/Public/StyleSheets",
"sass": "Resources/Public/Sass",
"cssSourceMaps": "Resources/Public/SourceMaps",
"javascriptSrc": "Resources/Public/JavaScript",
"javascriptDest": "Resources/Public/JavaScript/Dist",
"javascriptSourceMaps": "Resources/Public/SourceMaps",
"images": "Resources/Public/Images",
"sprites": "Resources/Public/Images/Sprites",
"svg": "Resources/Public/Images/Svg"
},
"abovethefold": {
"template": "web/typo3conf/ext/project_theme/Resources/Private/Templates/Abovethefold/Src/PageRenderTemplate.html",
"dest": "web/typo3conf/ext/project_theme/Resources/Private/Templates/Abovethefold/Dist/"
},
"js": {
"compiler": "es6",
"libraryPaths": [
"./web/typo3conf/ext/project_theme/node_modules"
],
"excludeFromQa": [
"!**/Extensions/**/*"
],
"pipeline": {
"uglify": true,
"renameToDotMin": true
}
},
"css": {
"excludeFromQa": [
"!**/FontAwesome/**/*"
],
"supportedBrowsers": ["last 1 version", "> 1%", "ie 8"],
"pipeline": {
"cleanCss": true,
"renameToDotMin": true
}
},
"images": {
"optimize": [
"web/fileadmin",
"web/uploads"
]
},
"extensions": [
"project_theme"
],
"browsersync": {
"url": "https://www.website-base.dev",
"urlparams": "no_cache=1&disableScriptmerger=1"
},
"open": {
"dev": [
"https://website-base.dev"
]
}
}
{
// Default options
'functions': true,
'variableNameTransforms': ['dasherize']
}
{{#block "sprites-comment"}}
/*
SCSS variables are information about icon's compiled state, stored under its original file name
.icon-home {
width: $icon-home-width;
}
The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
{{/block}}
{{#block "sprites"}}
{{#each sprites}}
${{strings.name_name}}: '{{name}}';
${{strings.name_x}}: {{px.x}};
${{strings.name_y}}: {{px.y}};
${{strings.name_offset_x}}: {{px.offset_x}};
${{strings.name_offset_y}}: {{px.offset_y}};
${{strings.name_width}}: {{px.width}};
${{strings.name_height}}: {{px.height}};
${{strings.name_total_width}}: {{px.total_width}};
${{strings.name_total_height}}: {{px.total_height}};
${{strings.name_image}}: '{{{escaped_image}}}';
${{strings.name}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}', '{{name}}', );
{{/each}}
{{/block}}
{{#block "spritesheet"}}
${{spritesheet_info.strings.name_width}}: {{spritesheet.px.width}};
${{spritesheet_info.strings.name_height}}: {{spritesheet.px.height}};
${{spritesheet_info.strings.name_image}}: '{{{spritesheet.escaped_image}}}';
${{spritesheet_info.strings.name_sprites}}: ({{#each sprites}}${{strings.name}}, {{/each}});
${{spritesheet_info.strings.name}}: ({{spritesheet.px.width}}, {{spritesheet.px.height}}, '{{{spritesheet.escaped_image}}}', ${{spritesheet_info.strings.name_sprites}}, );
{{/block}}
{{#block "sprite-functions-comment"}}
{{#if options.functions}}
/*
The provided mixins are intended to be used with the array-like variables
.icon-home {
@include sprite-width($icon-home);
}
.icon-email {
@include sprite($icon-email);
}
Example usage in HTML:
`display: block` sprite:
<div class="icon-home"></div>
To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
// CSS
.icon {
display: inline-block;
}
// HTML
<i class="icon icon-home"></i>
*/
{{/if}}
{{/block}}
{{#block "sprite-functions"}}
{{#if options.functions}}
@function sprite-width($sprite) {
@return nth($sprite, 5);
}
@function sprite-height($sprite) {
@return nth($sprite, 6);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite-image($sprite) {
$sprite-image: nth($sprite, 9);
background-image: url(#{$sprite-image});
}
@mixin sprite($sprite) {
@include sprite-image($sprite);
@include sprite-position($sprite);
width: sprite-width($sprite);
height: sprite-height($sprite);
}
{{/if}}
{{/block}}
{{#block "spritesheet-functions-comment"}}
{{#if options.functions}}
/*
The `sprites` mixin generates identical output to the CSS template
but can be overridden inside of SCSS
@include sprites($spritesheet-sprites);
*/
{{/if}}
{{/block}}
{{#block "spritesheet-functions"}}
{{#if options.functions}}
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}
}
}
{{/if}}
{{/block}}
'use strict';
process.chdir('..');
const gulp = require('gulp');
const settings = require('./gulp/settings');
const config = settings.getConfig();
const hub = new require('gulp-hub')(['gulp/*.js']);
const plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browser-sync']
});
gulp.registry(hub);
gulp.task('watch', () => {
let jsFileExtension = require('./gulp/javascript').setUpCompiler().getFileExtension();
for (let extension in config.extensions) {
if (config.extensions.hasOwnProperty(extension)) {
gulp.watch([
`${config.directories.basePath}${config.extensions[extension]}/${config.directories.sass}/**/*.scss`,
'!**/_sprite.scss',
'!**/_svg.scss',
'!**/*scsslint_tmp*.scss'
], gulp.series('css:compileAndSync')).on('change', setCurrentExtensionName);
gulp.watch([
`${config.directories.basePath}${config.extensions[extension]}/${config.directories.javascriptSrc}/**/*${jsFileExtension}`,
'!**/*.min.js'
], gulp.series('js:qa', 'js:compileAndSync')).on('change', setCurrentExtensionName);
}
}
});
function setCurrentExtensionName(_file) {
// the filepath will contain backslashes instead of slashes on windows. we need to normalize this.
let file = _file.replace(/\\/g, '/');
plugins.util.log(plugins.util.colors.blue('Change detected in ') + plugins.util.colors.green(file));
settings.setPath(file.split(config.directories.basePath)[1].split('/')[0]);
}
gulp.task('execBuild', gulp.series('images', gulp.parallel('css', 'js')));
gulp.task('default', gulp.parallel('server', 'watch'));
Supports Markdown
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