Yeoman that scaffolds out a front end starterkit. 📦
Yeoman generator that scaffolds out a front end development starterkit.
styles
: Sass / Less auto compiling, prefixing, minifiying and sourcemapping.templates
: Pug / Html auto compiling and minifiying.scripts
: Scripts concatenation, transpiling with Babel, 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 and uncss, to improve your page speed.For more information about gulp workflow / tasks go to starterkit gulp tasks
$ npm install -g yo
$ npm install -g generator-starterkit
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:
$ mkdir project
$ cd project
$ yo starterkit
$ gulp
Now the 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)
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).
--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..
├── /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.
The code is available under the MIT license.