Commit 2a6ab754 authored by Philipp Nowinski's avatar Philipp Nowinski
Browse files

Merge branch 'feature_nextVersion' into 'master'

Feature next version



See merge request !1
parents 8dc568ae 4b59a557
[![sgalinski Internet Services](http://www.sgalinski.de/_Resources/Static/Packages/SGalinski.SgalinskiDe/Images/logo.png "sgalinski Internet Services")](http://www.sgalinski.de/)
[![sgalinski Internet Services](https://www.sgalinski.de/fileadmin/files/for-external-usage/logo.svg "sgalinski")](https://www.sgalinski.de/typo3-produkte-webentwicklung/gulp-frontend-toolchain/)
# sgalinski command line interface
> **Please note:**
> The sgc currently only supports Linux and OSX operating systems. The CLI is intended to be used with bash or zsh.
> The CLI is intended to be used with bash or zsh. In order for scss-lint to work, you need to have ruby installed on your machine.
## Installation
......@@ -21,6 +21,18 @@ If you don't want to install the sgc command globally (e.g. in a server environm
./sgc-core/install.sh --local
```
### Windows
If you want to install the SGC on a Windows machine, there are some additional preparations are required:
* All commands are to be executed in **git-bash** window, do not try to use the cmd! You'll probably already have the git-bash
installed if you are using git for Windows.
* Install NVM for Windows: https://github.com/coreybutler/nvm-windows
* You might run into an error where the SGC is not able to install the scss_lint ruby gem. This is due to an SSL error
with rubygems that occurs on Windows. In this case, you will have to install scss_lint manually. Read more about that
error here: https://gist.github.com/luislavena/f064211759ee0f806c88
* You have to open git-bash with administrator privileges to run the installation script
## Configuration
To configure the frontend build process to your needs, you will have to modify the .sgc-config.json that the installer
......@@ -32,7 +44,10 @@ will put into your projects root-directory.
### directories
Holds the paths to the css, sass, javascript, images, sprites and inline-svgs, relative to the extensions root.
Holds the paths to the css, sass, javascript, images, sprites, sourcemaps and inline-svgs, relative to the extensions root.
* webPath: *path to your extension folder as seen from the web*
* basePath: *path to your extension folder as seen from the filesystem*
### abovethefold
......@@ -43,7 +58,11 @@ Configuration for the critical path css.
### js
* libraryPaths: *additional locations that should be searched when resolving CommonJS requires*
The SGC will support you with writing next generation JavaScript and executing it in Browsers today, by transpiling it
to EcmaScript 5 compliant code. Currently EcmaScript 6 Syntax and TypeScript are supported.
* compiler: *es6|typescript*
* libraryPaths: *additional locations that should be searched when resolving CommonJS require statements*
* excludeFromQa: *glob patterns with locations that hold JavaScript that does not need to be linted (vendor stuff)
### images
......@@ -54,9 +73,17 @@ Configuration for the critical path css.
A list of extensions that should be included in the watch task. Please note, that the very first extension in this list is expected to be your project_theme.
### browsersync
BrowserSync is a neat tool that will help you during the development and testing process. When you run `sgc`, it will spin
up a small webserver that proxies the URL specified in your .sgc-config.json. If you change a JavaScript or Sass file
inside an extension that is on your watch list (see the option above), BrowserSync will automatically reload the page
or inject your changes directly into the browser. You can also open several instances of the BrowserSync URL in different
browser windows and BS will take care of synchronizing all input and scroll events between them.
## Usage
You can run a specific task on a specific component, or start a watcher that will fire up BrowserSync and run tasks when
source files change. Extensions that will be watched are defined in [config.json](gulp/config.json).
source files change. Extensions that will be watched are defined in your .sgc-config.json file for each project.
If you run a specific task, you need to specify the extension you want the task to run on with the --ext parameter.
......@@ -76,10 +103,10 @@ the website in your browser, as a browsersync session (changed js and css will a
*Hint:* If you already have a browsersync instance open in your browser, you can pass the argument -s to restart the session without opening a browser.
### sprite task
### sprite task (will be called by the css task automatically)
```bash
sgc sprites --ext [extensions name]
sgc css:sprites --ext [extension name]
```
Triggers sprite generation inside the given directory.
......@@ -104,6 +131,37 @@ You can then use the following mixins:
The @sprite mixin already contains width and height. If you need these values for something else, use the @sprite-width
and @sprite-height functions.
### css:svg task (will be called by the css task automatically)
```bash
sgc css:svg --ext [extension name]
```
Triggers the generation of Sass-mixins for all SVGs inside the given directory. Each mixin will enable the usage of the
associated SVG as a css background image.
```scss
@import 'svg'; // imports the file with the generated mixins (inside your Sass-root)
.icon-globe {
@include inline-svg($icon-globe); // inserts the file icon-globe.svg as an inlined background-image
}
```
### css:abovethefold (will be called by the css task automatically)
```bash
svg css:abovethefold
```
This task will read the html file you specified as abovethefold.template, read every <link> statement in it and replace
it with the css styles the referenced file contains, as an inline style tag. To make use of this feature, you should
create a separate css file in your project (abovethefold.scss -> abovethefold.css), as well as an html-template file
that references this stylesheet (note that the path needs to be relative to the template file). You can then set this
template file as your [PageRenderTemplate](https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Config/Index.html#pagerenderertemplatefile).
All styles inside your abovethefold.css file will now be inlined directly into the HTML of your website. Note that you
should think about what to put in this file only styles that should be available directly after the render process on
_every_ page should go there.
### css task
```bash
......@@ -135,7 +193,7 @@ Assumptions:
sgc images:uploaded
```
This tasks optimizes all images (png, jpg, gif) inside the folders you specified in the config.json file. You might want to
This tasks optimizes all images (png, jpg, gif, svg) inside the folders you specified in the sgc-config.json file. You might want to
run this task on a regular basis to compress user uploaded media.
# Extending the sgc with your own modules
......
......@@ -13,20 +13,42 @@ if [ $SGC_VERSION != $INSTALLED_SGC_VERSION ]; then
fi
if [ "$1" == "shortlist" ]; then
echo -e "server images css css:sprites css:svg css:abovethefold images:uploaded js:compile js:qa js updateInstance shortlist " `ls sgc-scripts | grep .sh$ | cut -f 1 -d .`;
taskList="server images css css:sprites css:svg css:abovethefold images:uploaded js:compile js:qa js shortlist "
if [ -e sgc-scripts ]
then
echo -e ${taskList} `ls sgc-scripts | grep .sh$ | cut -f 1 -d .`;
else
echo -e ${taskList}
fi
elif [ -e "sgc-core/modules/$1.sh" ]; then
./sgc-core/modules/$1.sh
elif [ -e "./sgc-scripts/$1.sh" ]; then
./sgc-scripts/$1.sh
else
cd sgc-core
. ~/.nvm/nvm.sh
# the nvm config file will only exist on unix systems
if [ ! $OSTYPE == "msys" ]
then
. ~/.nvm/nvm.sh
fi
# include version config
. ./core/node.sh
# set node version
nvm use ${nodeversion}
if [ ! $OSTYPE == "msys" ]
then
# set node version
nvm use ${nodeversion}
else
# interestingly, setting the node version here will break on windows. for some reason the node and npm commands
# wont't be available anymore afterwards. tell the user instead.
if [ ! $(node -v) == "v${nodeversion}" ]
then
echo -e "\033[0;31mWrong node version! Please run 'nvm use ${nodeversion}\033[0m";
exit 1;
fi
fi
node ./node_modules/gulp/bin/gulp.js $@
fi
#!/bin/bash
if [ ! -z `which ruby` > /dev/null ]
then
echo -e "\033[0;34mInstall scss-lint\033[0m";
if [ $OSTYPE == "msys" ]
then
gem install scss_lint
else
sudo gem install scss_lint
fi
else
echo -e "\n\033[0;31mYou need to have ruby installed on your machine in order for scss-lint to work!\033[0m\n";
fi
nodeversion="6.3.0"
nodeversion="6.7.0"
SGC_VERSION=1.1.0
SGC_VERSION=2.0.0
......@@ -10,7 +10,7 @@ var gulp = require('gulp'),
gulp.task('server', function() {
return plugins.browserSync.init({
proxy: config.browsersync.url,
proxy: getUrl(),
middleware: function (req, res, next) {
var conjunction;
if (req.url.match(/\?/)) {
......@@ -24,3 +24,32 @@ gulp.task('server', function() {
open: typeof argv.s === 'undefined' ? 'local' : false
});
});
/**
* Get the correct domain name from the SGC configuration
*
* @returns {string}
*/
function getUrl() {
const configuredUrl = config.browsersync.url;
let desiredDomain = argv.d;
if (typeof configuredUrl === 'string') {
return configuredUrl;
} else if (typeof configuredUrl === 'object') {
if (typeof desiredDomain === 'undefined') {
for (let key in configuredUrl) {
if (configuredUrl.hasOwnProperty(key)) {
return configuredUrl[key];
}
}
} else {
if (configuredUrl.hasOwnProperty(desiredDomain)) {
return configuredUrl[desiredDomain];
} else {
throw new Error(plugins.util.colors.red('The key "' + desiredDomain + '" could not be resolved ' +
'to any domain. Please check your SGC configuration.'));
}
}
}
}
......@@ -43,7 +43,7 @@ function processCss() {
.pipe(plugins.sourcemaps.init())
.pipe(compilationProcess())
.on('error', plugins.sass.logError)
.pipe(plugins.sourcemaps.write('../SourceMaps'))
.pipe(plugins.sourcemaps.write(path.relative(settings.getPath() + '/' + config.directories.css, settings.getPath() + '/' + config.directories.cssSourceMaps)))
.pipe(filter)
.pipe(plugins.checkFilesize({
enableGzip: true
......@@ -54,10 +54,8 @@ function processCss() {
}
function processCssAndSync() {
var filter = plugins.filter(filterPattern);
return processCss()
.pipe(filter)
.pipe(plugins.browserSync.stream());
.pipe(plugins.browserSync.stream({match: '**/*.css'}));
}
gulp.task('css:sprites', function() {
......@@ -98,6 +96,13 @@ gulp.task('css:abovethefold', function() {
.pipe(gulp.dest(config.abovethefold.dest));
});
gulp.task('css', gulp.series(gulp.parallel('css:sprites', 'css:svg'), processCss, 'css:abovethefold'));
gulp.task('css:qa', function() {
return gulp.src([settings.getPath() + '/' + config.directories.sass + '/**/*.scss', '!**/*scsslint_tmp*.scss'].concat(config.css.excludeFromQa))
.pipe(plugins.scssLint({
customReport: plugins.scssLintStylish
}));
});
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'), processCssAndSync, 'css:abovethefold'));
gulp.task('css:compileAndSync', gulp.series(gulp.parallel('css:sprites', 'css:svg', 'css:qa'), processCssAndSync, 'css:abovethefold'));
......@@ -9,9 +9,10 @@ var gulp = require('gulp'),
});
gulp.task('images', function() {
return gulp.src(settings.getPath() + '/' + config.directories.images + '/**/*{.png,.jpg,.gif}')
return gulp.src(settings.getPath() + '/' + config.directories.images + '/**/*.{png,jpg,gif,svg}')
.pipe(plugins.imagemin({
progressive: true
progressive: true,
verbose: true
}))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.images));
});
......@@ -21,9 +22,10 @@ gulp.task('images:uploaded', function() {
merged = plugins.mergeStream();
for (var path in config.images.optimize) {
plugins.util.log(plugins.util.colors.blue('Optimize images in ') + plugins.util.colors.green(config.images.optimize[path]));
var stream = gulp.src(config.images.optimize[path] + '/**/*.{png,jpg,gif}')
var stream = gulp.src(config.images.optimize[path] + '/**/*.{png,jpg,gif,svg}')
.pipe(plugins.imagemin({
progressive: true
progressive: true,
verbose: true
}))
.pipe(gulp.dest(config.images.optimize[path]));
streams.push(stream);
......
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
$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);
}
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
@return $string;
}
{{#svgs}}
......
......@@ -4,58 +4,33 @@ var gulp = require('gulp'),
settings = require('./settings'),
config = settings.getConfig(),
path = require('path'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
argv = require('yargs').argv,
rename = require('gulp-rename'),
glob = require('glob'),
eventStream = require('event-stream'),
compiler,
plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browserify', 'browser-sync']
});
function processJs(files, done) {
var tasks = files.map(function(file) {
var browserify = plugins.browserify({
entries: [file],
paths: config.js.libraryPaths,
debug: true
});
if (argv.production) {
return browserify.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 {
return browserify.bundle()
.pipe(source(file))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.uglify())
.on('error', console.log)
.pipe(rename({
extname: '.bundled.min.js',
dirname: ''
}))
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(plugins.sourcemaps.write('../SourceMaps'))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.javascriptDest));
}
});
return eventStream.merge(tasks).on('end', done);
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() {
......@@ -65,16 +40,20 @@ gulp.task('js:qa', function() {
});
gulp.task('js:compile', function(done) {
glob(settings.getPath() + '/' + config.directories.javascriptSrc + '/*.js', function(err, files) {
return processJs(files, 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) {
glob(settings.getPath() + '/' + config.directories.javascriptSrc + '/*.js', function(err, files) {
return processJs(files, 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 {
return browserify.transform(babelify.configure({
presets: [require('babel-preset-es2015')]
}))
.bundle()
.pipe(source(file))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.uglify())
.on('error', console.log)
.pipe(rename({
extname: '.bundled.min.js',
dirname: ''
}))
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(plugins.sourcemaps.write(path.relative(settings.getPath() + '/' + config.directories.javascriptDest, settings.getPath() + '/' + config.directories.javascriptSourceMaps)))
.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 {
return browserify
.plugin(tsify, {noImplicitAny: true})
.bundle()
.pipe(source(file))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.uglify())
.on('error', console.log)
.pipe(rename({
extname: '.bundled.min.js',
dirname: ''
}))
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(plugins.sourcemaps.write(path.relative(settings.getPath() + '/' + config.directories.javascriptDest, settings.getPath() + '/' + config.directories.javascriptSourceMaps)))
.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": "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"
......@@ -15,6 +17,7 @@
"dest": "web/typo3conf/ext/project_theme/Resources/Private/Templates/Abovethefold/Dist/"
},
"js": {
"compiler": "es6",
"libraryPaths": [
"./web/typo3conf/ext/project_theme/node_modules"
],
......@@ -22,6 +25,11 @@
"!**/Extensions/**/*"
]
},
"css": {
"excludeFromQa": [
"!**/FontAwesome/**/*"
]
},
"images": {
"optimize": [
"web/fileadmin",
......