Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carloscuesta/generator-starterkit
Yeoman that scaffolds out a front end starterkit. 📦
https://github.com/carloscuesta/generator-starterkit
gulp scaffold starterkit yeoman-generator
Last synced: 4 months ago
JSON representation
Yeoman that scaffolds out a front end starterkit. 📦
- Host: GitHub
- URL: https://github.com/carloscuesta/generator-starterkit
- Owner: carloscuesta
- License: mit
- Created: 2015-09-19T16:52:36.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-14T20:41:57.000Z (over 7 years ago)
- Last Synced: 2024-09-10T14:16:52.517Z (5 months ago)
- Topics: gulp, scaffold, starterkit, yeoman-generator
- Language: JavaScript
- Homepage: https://generatorstarterkit.carloscuesta.me
- Size: 697 KB
- Stars: 30
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# generator-starterkit
[](https://travis-ci.org/carloscuesta/generator-starterkit)
[](https://david-dm.org/carloscuesta/generator-starterkit)
[](https://www.npmjs.com/package/generator-starterkit)
[](http://npmjs.com/package/generator-starterkit)
[](https://github.com/sindresorhus/xo)
> Yeoman generator that scaffolds out a front end development [starterkit](https://github.com/carloscuesta/starterkit).
## Technologies
- [**Gulp**](http://gulpjs.com): Automate and enhance your workflow.
- CSS Preprocessors
- [**Sass**](http://sass-lang.com): CSS with superpowers.
- [**Less**](http://lesscss.org): Less extends CSS with dynamic behavior.
- Templating / Markup
- [**Pug**](https://pugjs.org): Templating engine.
- [**Html**](https://developer.mozilla.org/es/docs/Web/HTML)
- JavaScript
- [**Babel**](https://babeljs.io): Use next generation JavaScript, today.
- [**Npm**](https://www.npmjs.com): Package manager used to install dependencies and everything you need.
- Linters
- [**JSCS**](http://jscs.info): Code style linter for programmatically enforcing your style guide.
- [**JSHint**](http://jshint.com): A Static Code Analysis Tool for JavaScript.
## Features
- ```styles```: [Sass](http://sass-lang.com) / [Less](http://lesscss.org) auto compiling, prefixing, minifiying and sourcemapping.
- ```templates```: [Pug](http://Pug-lang.com) / Html auto compiling and minifiying.
- ```scripts```: Scripts concatenation, transpiling with [Babel](https://babeljs.io), minifiying and sourcemapping.
- ```lint```: Lint your JavaScript files.
- ```images```: Images optimization.
- ```deploy```: Deploying your project into a github pages surge or ftp server.
- ```beautify```: Beautify preproduction files.
- ```browsersync```: Automatically injects all your changes in ```styles```, ```templates``` and ```scripts``` into your browser and other devices on save.
- ```optimize```: Automatically autoptimize your project using [critical](https://github.com/addyosmani/critical) and [uncss](https://github.com/giakki/uncss), to improve your page speed.
For more information about gulp workflow / tasks go to [starterkit gulp tasks](https://github.com/carloscuesta/starterkit#tasks)
## Requirements and Use
### Requirements
- [NodeJS](https://nodejs.org/en/)
- [Yeoman](http://yeoman.io)
- [Generator-Starterkit](https://github.com/carloscuesta/generator-starterkit)
```bash
$ npm install -g yo
$ npm install -g generator-starterkit
```
### Use
Before running the generator you will need to **create a folder** for your project where the generator will create all the project files and directories.
Once you have, **NodeJS**, **Yeoman**, **generator-starterkit** installed and your project folder created you can run the generator using:
```bash
$ mkdir project
$ cd project
$ yo starterkit
$ gulp
```
Now the [generator-starterkit](https://github.com/carloscuesta/generator-starterkit) will start to ask some questions to setup the project for you; project information, technologies and languages that you want to use and will install the dependencies automatically based on your decisions.
Also there are a lot of files being created dynamically such as gulp.js, package.json, readme.md, styles and templates to match the technologies and options that you choose from the generator. (See the [technologies available](https://github.com/carloscuesta/generator-starterkit#technologies))
**Don't forget to run ```gulp``` after the yeoman finishes.** Also you can use **```npm run```** to list the gulp tasks available and running them using for example ```npm run dev```, (dev will run the default gulp task).
## Options
- ```--skip-install```: Skips the installation of dependencies with npm.
- ```--skip-welcome-message```: Skips the welcome message.
- ```--skip-install-message```: Skips the message after the installation of dependencies.
- ```--skip-cache```: Do not remember prompt answers.
## Project Structure
```
.
├── /dist/ # Minified, optimized and compiled files.
│ ├── /assets/ # Assets folder.
│ │ ├── /css/ # CSS style files.
│ │ ├── /files/ # Static files.
│ │ │ └── img/ # Images folder.
│ │ └── /js/ # JS files.
│ └── *.html # Minified HTML files.
├── /node_modules/ # Node modules dependencies and packages.
├── /src/ # Source files.
│ ├── /images/ # Images non compressed.
│ ├── /scripts/ # JavaScript files.
│ ├── /styles/ # SCSS / Less style files.
│ │ └── _includes/ # Styles SCSS / Less partials.
│ ├── /templates/ # Templating Pug files / Html files.
│ │ └── _includes/ # Templating Pug partials.
└── gulpfile.js # Gulp automatization file.
```
## Demo
## License
The code is available under the [MIT](https://github.com/carloscuesta/generator-starterkit/blob/master/LICENSE) license.