Commit 847841b1 authored by Philipp Nowinski's avatar Philipp Nowinski

[FEATURE] introduce sg-cli

parent bda4d813
.idea
node_modules
.sgc_version
deny from all
......@@ -9,15 +9,10 @@ features from time to time.
Details about the commercial licence can be found here:
http://www.binpress.com/license/view/l/fcc5e62729e934a0fa6d1442eda5372d
## Non-commercial usage
This software is made available for any non-commercial projects under the terms and conditions of the MIT-License. This
terms are bound to the freely available version on npmjs.com (https://www.npmjs.com/package/generator-gulp-sgalinski).
### MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
[![sgalinski Internet Services](http://www.sgalinski.de/_Resources/Static/Packages/SGalinski.SgalinskiDe/Images/logo.png "sgalinski Internet Services")](http://www.sgalinski.de/)
# generator-gulp-sgalinski
# sgalinski command line interface
## Installation
To use the sgalinski-generator you need to have node and npm installed. Furthermore, you should have
yeoman and gulp installed globally. To do so, simply run
```bash
npm install -g yo
npm install -g gulp
```
Finally, to install the generator, run
```bash
npm install -g generator-gulp-sgalinski
```
## Usage
To run the generator, navigate to the directory you want to create your project in and run
```bash
yo gulp-sgalinski
```
This will generate all the files you need to run the toolchain, including a config.json file which you will have to adapt to your needs.
Here is what you get in detail:
* gulp | this folder contains the gulp tasks, split into several files, as well as the config.json
* gulpfile.js | The entry point for gulp
* package.json | The package file that contains all needed Node dependencies
* npm-shrinkwrap.json | This file contains all required dependencies, locked down to a specific version number ([learn more](https://docs.npmjs.com/cli/shrinkwrap))
* install.sh | you can execute this file to ensure a proper installation of the toolchain. It will set up the correct version of Node, Gulp and the toolchain.
* .editorconfig | [Editorconfig](http://editorconfig.org/) is a great common way to synchronize editor settings across projects and IDEs/Editors. You can simply remove it, if you don't want to use it.
* .jshintrc | The configuration file for jshint
* .scss-lint.yml | The configuration file for Scss-Linters
### The install script
Since version 4.0.0, the toolchain comes with an installation shell-script. The purpose of this script is to easily set
up the correct version of Node and gulp and to install the toolchains dependencies in one single step.
While this might not seem important during the initial creation of a project, it is rather handy when setting up the
development environment at another machine. After checking out the repository of your project, your fellow co-workers
will simply have to execute the install.sh in order to get the toolchain up and running.
### Useful tasks
#### Updating / Installing the toolchains dependencies
> This task will also be executed by the install.sh script
> **Please note:**
> The sgc currently only supports Linux and OSX operating systems. The CLI is intended to be used with bash or zsh.
In order for the toolchain to work, you need to install all its dependencies. To do so, you can simply run the update task
(this will also work for the initial installation). Please note that you need to go to the website root
(e.g. web/website-base.dev/) in order to execute this command.
```bash
npm run toolchain:update
```
This task will delete all previously installed dependencies and pull in the new ones.
#### Upgrading the toolchain
> **Caution!**
> This task is only meant for finishing up a new release of the toolchain itself.
## Installation
To upgrade all dependencies and rewrite the npm-shrinkwrap, run the following command:
Move the 'sg-cli' folder inside your project root and execute the install script.
```bash
npm run toolchain:upgrade
./sg-cli/install.sh
```
The upgrade task will delete all dependencies, remove the current shrinkwrap and then install the new dependencies (as stated in package.json) and create a new shrinkwrap.
If you run this task, make sure that you know what you're doing, as updating dependencies can break stuff if not propperly tested!
## Configuration
To adjust the toolchain to a certain project, there is a [config.json](app/templates/gulp/config.json) file where the following options can be configured:
To configure the frontend build process to you needs, you will have to modify the config.json inside the sg-cli/gulp folder.
### directories
......@@ -114,7 +48,7 @@ source files change. Extensions that will be watched are defined in [config.json
If you run a specific task, you need to specify the extension you want the task to run on with the --ext parameter.
```bash
gulp css --ext project_base
sgc css --ext project_base
```
There are a few available tasks you need to remember:
......@@ -122,7 +56,7 @@ There are a few available tasks you need to remember:
### default/watch task
```bash
gulp
sgc
```
Starts a project wide watcher that will trigger the css/javascript task when you change any .scss, or .js-file and opens
the website in your browser, as a browsersync session (changed js and css will automatically get injected when recompiled).
......@@ -132,7 +66,7 @@ the website in your browser, as a browsersync session (changed js and css will a
### sprite task
```bash
gulp sprites --ext [extensions name]
sgc sprites --ext [extensions name]
```
Triggers sprite generation inside the given directory.
......@@ -150,17 +84,17 @@ You can then use the following mixins:
```scss
// will output css for a sprite image 'box.png'
.element {
@sprite ($box);
@include sprite ($box);
}
```
The @sprite mixin already contains width and height. If you need these values for something else, use the @sprite-width
and @sprite-height mixins.
and @sprite-height functions.
### css task
```bash
gulp css --ext [extension name]
sgc css --ext [extension name]
```
Triggers css compilation inside the given directory. Note, that this task will also run the sprite task before it starts.
......@@ -173,7 +107,7 @@ Assumptions:
### images task
```bash
gulp images --ext [extension name]
sgc images --ext [extension name]
```
Optimizes all images for the given path.
......@@ -185,13 +119,40 @@ Assumptions:
### optimize images in fileadmin and uploads
```bash
gulp images:uploaded
sgc images:uploaded
```
This task 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) inside the folders you specified in the 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
You can easily extend the sgc functionality by writing your own modules. Simply create a sgc-modules folder next to sg-cli
and put your custom scripts in there. Right now only shell-scripts with are supported, other languages might follow in the future.
Execute your custom scripts by calling sgc <scriptName>
```
+ sg-cli
+ sgc-modules
- updateInstance.sh
- updateDeployData.sh
```
```bash
sgc updateInstance
```
# Troubleshooting
## Strange errors during npm install
If you get strange errors during npm install, it might help to clear the npm cache. To do so, run 'npm cache clean', oder simply delete the .npm directory inside your home folder.
\ No newline at end of file
## Timeouts of the registry while installing the toolchain
Please try to remove the npm-shrinkgwrap.json file and execute the following commands:
```bash
cd sg-cli
rm -rf node_modules
npm set registry http://registry.npmjs.org/
npm install
```
'use strict';
var yeoman = require('yeoman-generator'),
chalk = require('chalk'),
yosay = require('yosay'),
path = require('path');
module.exports = yeoman.Base.extend((function() {
var Generator = {};
Generator.initializing = function() {
Generator.pkg = require('../package.json');
};
Generator.prompting = {
basicPrompts: function() {
// Greet the user
this.log(yosay(
'Welcome to the ' + chalk.red('Sgalinski') + ' generator!'
));
}
};
Generator.writeGeneralConfigs = function() {
this.fs.copy(
this.templatePath('.editorconfig'),
this.destinationPath('.editorconfig')
);
this.fs.copy(
this.templatePath('.jshintrc'),
this.destinationPath('.jshintrc')
);
this.fs.copy(
this.templatePath('.scss-lint.yml'),
this.destinationPath('.scss-lint.yml')
);
};
Generator.writeGulp = function() {
this.fs.copy(
this.templatePath('gulpfile.js'),
this.destinationPath('gulpfile.js')
);
this.fs.copy(
this.templatePath('gulp/settings.js'),
this.destinationPath('gulp/settings.js')
);
this.fs.copy(
this.templatePath('gulp/css.js'),
this.destinationPath('gulp/css.js')
);
this.fs.copy(
this.templatePath('gulp/browsersync.js'),
this.destinationPath('gulp/browsersync.js')
);
this.fs.copy(
this.templatePath('gulp/images.js'),
this.destinationPath('gulp/images.js')
);
this.fs.copy(
this.templatePath('gulp/javascript.js'),
this.destinationPath('gulp/javascript.js')
);
this.fs.copy(
this.templatePath('gulp/config.json'),
this.destinationPath('gulp/config.json')
);
this.fs.copy(
this.templatePath('gulp/sprite-scss-template.mustache'),
this.destinationPath('gulp/sprite-scss-template.mustache')
);
this.fs.copy(
this.templatePath('gulp/inline-svg-template.mustache'),
this.destinationPath('gulp/inline-svg-template.mustache')
);
this.fs.copy(
this.templatePath('install.sh'),
this.destinationPath('install.sh')
);
};
Generator.writeDependencyManagement = function() {
this.fs.copy(
this.templatePath('package.json'),
this.destinationPath('package.json')
);
this.fs.copy(
this.templatePath('npm-shrinkwrap.json'),
this.destinationPath('npm-shrinkwrap.json')
);
};
Generator.install = function() {
this.installDependencies({
skipInstall: this.options['skip-install']
});
};
return Generator;
})());
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
charset = utf-8
# Get rid of whitespace to avoid diffs with a bunch of EOL changes
trim_trailing_whitespace = true
# Unix-style newlines with a newline ending every file
[*]
indent_style = tab
indent_size = 4
end_of_line = lf
insert_final_newline = true
# CSS-Files
[*.css]
indent_style = tab
indent_size = 4
# HTML-Files
[*.html]
indent_style = tab
indent_size = 4
# TMPL-Files
[*.tmpl]
indent_style = tab
indent_size = 4
# LESS-Files
[*.less]
indent_style = tab
indent_size = 4
# JS-Files
[*.js]
indent_style = tab
indent_size = 4
# JSON-Files
[*.json]
indent_style = tab
indent_size = 4
# PHP-Files
[*.php]
indent_style = tab
indent_size = 4
# ReST-Files
[*.rst]
indent_style = space
indent_size = 3
# MD-Files
[*.md]
indent_style = space
indent_size = 4
# package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
# TypoScript
[*.ts]
indent_style = tab
indent_size = 4
# XLF-Files
[*.xlf]
indent_style = tab
indent_size = 4
# SQL-Files
[*.sql]
indent_style = tab
indent_size = 2
{
"asi": false,
"bitwise": true,
"boss": false,
"browser": true,
"camelcase": true,
"couch": false,
"curly": true,
"debug": false,
"devel": false,
"dojo": false,
"eqeqeq": true,
"eqnull": false,
"es5": false,
"esnext": false,
"evil": false,
"expr": false,
"forin": true,
"funcscope": false,
"globals": {},
"globalstrict": false,
"immed": true,
"indent": 4,
"iterator": false,
"jquery": false,
"lastsemic": false,
"latedef": true,
"laxbreak": false,
"laxcomma": false,
"loopfunc": false,
"maxcomplexity": false,
"maxdepth": false,
"maxerr": 50,
"maxlen": false,
"maxparams": 5,
"maxstatements": false,
"mootools": false,
"moz": false,
"multistr": true,
"newcap": true,
"noarg": true,
"node": true,
"noempty": true,
"nonew": false,
"nonstandard": false,
"plusplus": false,
"proto": false,
"prototypejs": false,
"quotmark": "single",
"rhino": false,
"scripturl": false,
"shadow": false,
"strict": true,
"sub": false,
"supernew": false,
"undef": true,
"unused": true,
"validthis": false,
"worker": false,
"wsh": false,
"yui": false,
"predef": ["-console"]
}
linters:
BorderZero:
enabled: true
CapitalizationInSelector:
enabled: true
ColorKeyword:
enabled: true
Comment:
enabled: true
DebugStatement:
enabled: true
DeclarationOrder:
enabled: true
DuplicateProperty:
enabled: true
EmptyLineBetweenBlocks:
enabled: false
EmptyRule:
enabled: true
HexNotation:
enabled: uppercase
IdWithExtraneousSelector:
enabled: true
Indentation:
enabled: true
character: tab
width: 1
LeadingZero:
enabled: true
NameFormat:
enabled: true
PlaceholderInExtend:
enabled: true
PropertySortOrder:
enabled: false
PropertySpelling:
enabled: true
extra_properties: []
SelectorDepth:
enabled: true
max_depth: 3
Shorthand:
enabled: true
SingleLinePerSelector:
enabled: true
SpaceAfterComma:
enabled: true
SpaceAfterPropertyColon:
enabled: true
SpaceAfterPropertyName:
enabled: true
SpaceBeforeBrace:
enabled: true
SpaceBetweenParens:
enabled: true
spaces: 0
StringQuotes:
enabled: true
style: single_quotes # or double_quotes
TrailingSemicolonAfterPropertyValue:
enabled: true
UrlQuotes:
enabled: true
ZeroUnit:
enabled: true
Compass::*:
enabled: false
'use strict';
var gulp = require('gulp'),
config = require('./config.json'),
settings = require('./settings'),
path = require('path'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*', 'browserify', 'browser-sync']
});
function processJs() {
var browserify = plugins.browserify({
entries: settings.getPath() + '/' + config.directories.javascript + '/main.js',
paths: config.js.libraryPaths,
debug: true
});
return browserify.bundle()
.pipe(source('main.bundled.min.js'))
.pipe(buffer())
.pipe(plugins.sourcemaps.init({loadMaps: true}))
.pipe(plugins.uglify())
.on('error', console.log)
.pipe(plugins.checkFilesize({
enableGzip: true
}))
.pipe(plugins.sourcemaps.write('../SourceMaps'))
.pipe(gulp.dest(settings.getPath() + '/' + config.directories.javascript));
}
gulp.task('js:qa', function() {
return gulp.src([settings.getPath() + '/' + config.directories.javascript + '/**/*.js', '!**/*.min.js'].concat(config.js.excludeFromQa))
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('jshint-stylish'));
});
gulp.task('js:compile', function() {
return processJs();
});
gulp.task('js:compileAndSync', function() {
return processJs()
.pipe(plugins.browserSync.stream());
});
gulp.task('js', gulp.series('js:qa', 'js:compile'));
{{#each layouts}}
{{#each layout.items}}
${{#if ../../opt.split}}{{cssesc ../../name}}-{{/if}}{{cssesc meta.name}}: -{{baseDim x}}px -{{baseDim y}}px {{baseDim width}}px {{baseDim height}}px;
{{/each}}
{{/each}}
@mixin sprite-width($sprite) {
width: nth($sprite, 3);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 4);
}
@function sprite-width($sprite) {
@return nth($sprite, 3);
}
@function sprite-height($sprite) {
@return nth($sprite, 4);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 1);
$sprite-offset-y: nth($sprite, 2);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite($sprite) {
@include sprite-position($sprite);
background-repeat: no-repeat;
@include sprite-width($sprite);
@include sprite-height($sprite);
{{#each layouts}}
{{#each sprites}}
background-image: url('{{escimage url}}');
{{/each}}
{{/each}}
}
#!/bin/bash
echo -e "\n"
echo -e "\033[0;31m .__ .__ __ .__\033[0m"
echo -e "\033[0;31m ______ _________ | | |__| ____ _____| | _|__|\033[0m"
echo -e "\033[0;31m / ___// ___\__ \ | | | |/ \ / ___/ |/ / |\033[0m"
echo -e "\033[0;31m \___ \/ /_/ > __ \| |_| | | \\___ \| <| |\033[0m"
echo -e "\033[0;31m/____ >___ (____ /____/__|___| /____ >__|_ \__|\033[0m"
echo -e "\033[0;31m \/_____/ \/ \/ \/ \/\033[0m"
echo -e "\n"