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

[FEATURE] add generator

parent d857fdee
# License
## Dual License
### Non-commercial usage
This software is made available for any non-commercial project under the terms and conditions of the MIT-License.
#### 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.
### Commercial usage
The usage of this software for commercial projects, requires the payment of a small fee. Please contact us under stefan@sgalinski.de
if you wish to use this software in a commercial context.
\ No newline at end of file
'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;
})());
......@@ -15,7 +15,7 @@ function processCss() {
.pipe(plugins.sourcemaps.init())
.pipe(plugins.cssImageDimensions(path.resolve(settings.getPath() + '/' + config.directories.images)))
.pipe(plugins.sass())
.pipe(plugins.autoprefixer('last 1 version', '> 1%', 'ie 8'))
.pipe(plugins.autoprefixer(<%= autoprefixerBrowserSelection %>))
.pipe(plugins.cleanCss({
"restructuring": false,
"advanced": false
......
{
"name": "website-base",
"description": "The sgalinski Internet Services frontend toolchain based on gulp",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"toolchain:upgrade": "rm -rf node_modules && rm npm-shrinkwrap.json && npm install && npm shrinkwrap --dev",
"toolchain:update": "rm -rf node_modules && npm install"
},
"de_sgalinski": {
"developmentStandard": "~1.2.0"
},
"license": "SEE LICENSE IN LICENSE.md",
"devDependencies": {
"browser-sync": "^2.11.0",
"browserify": "^12.0.1",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-check-filesize": "^2.0.1",
"gulp-clean-css": "^2.0.2",
"gulp-css-image-dimensions": "^1.1.4",
"gulp-filter": "^3.0.1",
"gulp-hub": "^0.7.1",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.4.0",
"gulp-inline-source": "^2.1.0",
"gulp-inline-svg": "^1.0.1",
"gulp-jshint": "^2.0.0",
"gulp-load-plugins": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-svgmin": "^1.2.0",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"jshint": "^2.8.0",
"jshint-stylish": "^2.1.0",
"merge-stream": "^1.0.0",
"sprity": "^1.0.8",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"yargs": "^3.31.0"
},
"engines": {
"node": "~5.2.0"
},
"dependencies": {}
}
# Frontend Setup
The build process for the frontend is completely handled by [gulp](http://gulpjs.com/).
## Installation
### Install Node
Depending on your Operating System, there are several ways to install Node. The recommended way is to install it via
NVM (Node Verison Manager).
> **Note from the NVM installation manual:**
> First you'll need to make sure your system has a c++ compiler. For OSX, XCode will work, for Ubuntu, the build-essential and libssl-dev packages work.
To install nvm, clone this repo to get the latest version:
rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags` && cd -
To activate nvm, you need to source/activate it from your shell:
source ~/.nvm/nvm.sh
**You must add the previous command to your .bashrc file inside your home directory. If you are using another shell
than the bask, please use the corresponding configuration file.**
To install a specific version of Node, you can run 'nvm install [node-version]'. This project requires Node v5.2.x. To install this version, run:
```bash
nvm install 5.2
```
Finally, to make '5.2.x' the default version, run:
```bash
nvm alias default 5.2
```
Update npm to the latest version:
```bash
npm install -g npm
```
Make sure that you have node and npm installed. To do so, refer to the manual above. Once you got node installed, you'll need to install gulp globally. To do so, run:
### Install Gulp
```bash
npm install gulpjs/gulp-cli#4.0 -g
```
### Updating / Installing the toolchains dependencies
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 the website root
(e.g. web/website-base.dev/) in order to executing this command.
```bash
npm run-script 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. If you want to upgrade the toolchain in your project, you need to sync it with the latest [website-base](https://gitlab.sgalinski.de/toolchain/website_base)
To upgrade all dependencies and rewrite the npm-shrinkwrap, run the following command:
```bash
npm run-script toolchain:upgrade
```
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](gulp/config.json) file where the following options can be configured:
### directories
Holds the paths to the css, sass, javascript, images, sprites and inline-svgs, relative to the extensions root.
### abovethefold
Configuration for the critical path css.
* template: *path to the src template*
* dest: *path to the destination*
### js
* libraryPaths: *additional locations that should be searched when resolving CommonJS requires*
* excludeFromQa: *glob patterns with locations that hold JavaScript that does not need to be linted (vendor stuff)
### images
* optimize: *locations of user uploaded images that should be optimized*
### extensions
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.
## 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).
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
```
There are a few available tasks you need to remember:
### default/watch task
```bash
gulp
```
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).
*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
```bash
gulp sprites --ext [extensions name]
```
Triggers sprite generation inside the given directory.
Assumptions:
* all sprite images are inside images/sprites, relative to the given path.
* all sprite images are PNGs.
* there is a sass directory, next to the images folder.
This task will generate a png inside the images folder, containing all the sprites and a .scss file inside the sass
folder, which will provide the necessary mixins. To use the sprites inside your SASS code, import the _sprite.scss file.
You can then use the following mixins:
```scss
// will output css for a sprite image 'box.png'
.element {
@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.
### css task
```bash
gulp css --ext [extension name]
```
Triggers css compilation inside the given directory. Note, that this task will also run the sprite task before it starts.
Assumptions:
* all scss files are inside the sass directory, relative to the given path.
* all css files go into the stylesheets directory, relative to the given path.
### images task
```bash
gulp images --ext [extension name]
```
Optimizes all images for the given path.
Assumptions:
* all images are inside the image directory, relative to the given path.
### optimize images in fileadmin and uploads
```bash
gulp images:uploaded
```
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.
# 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.
{
"name": "generator-gulp-sgalinski",
"version": "4.0.0",
"description": "The sgalinski Internet Services frontend toolchain based on gulp",
"license": "SEE LICENSE IN LICENSE.md",
"main": "app/index.js",
"repository": {
"type": "git",
"url": "git@gitlab.sgalinski.de:toolchain/generator-gulp-sgalinski.git"
"url": "https://gitlab.sgalinski.de/toolchain/generator-gulp-sgalinski.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"toolchain:upgrade": "rm -rf node_modules && rm npm-shrinkwrap.json && npm install && npm shrinkwrap --dev",
"toolchain:update": "rm -rf node_modules && npm install"
"author": {
"name": "Philipp Nowinski",
"email": "philipp@sgalinski.de"
},
"de_sgalinski": {
"developmentStandard": "~1.2.0"
"engines": {
"node": ">=5.2.0"
},
"license": "Apache-2.0",
"devDependencies": {
"browser-sync": "^2.11.0",
"browserify": "^12.0.1",
"gulp": "github:gulpjs/gulp#4.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-check-filesize": "^2.0.1",
"gulp-clean-css": "^2.0.2",
"gulp-css-image-dimensions": "^1.1.4",
"gulp-filter": "^3.0.1",
"gulp-hub": "^0.7.1",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.4.0",
"gulp-inline-source": "^2.1.0",
"gulp-inline-svg": "^1.0.1",
"gulp-jshint": "^2.0.0",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.3",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-svgmin": "^1.2.0",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"jshint": "^2.8.0",
"jshint-stylish": "^2.1.0",
"merge-stream": "^1.0.0",
"sprity": "^1.0.8",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"yargs": "^3.31.0"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"engines": {
"node": "~5.2.0"
"files": [
"app"
],
"keywords": [
"yeoman-generator"
],
"dependencies": {
"chalk": "^1.1.1",
"yeoman-generator": "^0.22.5",
"yosay": "^1.1.0"
},
"dependencies": {}
"devDependencies": {}
}
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