starter-file v1.1.1

starter-file

starter-file is a file generator tool. It help your various file creation time and also boost your productivity.

Installation

First and for most you have nodejs, npm installed '!latest version recommended'. If not in your system you can install the given link Nodejs.

For local installation

npm i --save-dev starter-file 

For global installation

npm i -g starter-file

Global vs Local installation

In this two types of installation generator will treat you differently, if you want to load a template for single time use, you can choose local installation.

or

If you are a project killer want to generate templates different directory/time? Yes!! you can pick up global installation.This single generate command will help you

For generate locally

$ node ./node_modules/.bin/generate

For generate globally

$ generate

After you will get options in your terminal, and you can choose any option either your preference, and after you need to type your project-name, then generator successfully build that project for you. At this time only two option available. We will update soon

Usage

Install dependencies

npm install 

Normal-frontend

This template use case same as it's name "normal". After the generating process 3 types of Directories you will get

• HTML

• CSS

• JS

And you can also check the project-structure block what is inside these directories. We have not added any other library like Bootstrap, Jquery. You can include it if you want

Advanced-frontend

In advanced-frontend template you need to focus on two directories 1. src 2. build

when you are working on development side, must type all your code inside the src folder and you are on production side choose to import build folder. Because it carrying files are minified or compressed, that will give you better user experience and loading faster sites.

Development side

You need to run 3 commands at a time, for that purpose click the terminal and press **shift+ctrl+5** and the result is another new terminal will open for you, and repeat this once more

Template-engine We are using pug template engine. Because pug has many powerful features like conditions, loops, includes, mixins using which we can render HTML code based on user input or reference data. Pug also support JavaScript natively, hence using JavaScript expressions, we can format HTML code. These code you can see in..

build > html

for compile pug into html

npm run pug

It will compile your files that were inside the page directory.

Style For styling we are using sass. Sass is a preprocessor for css. Enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organized and allows you to create style sheets faster. Sass is compatible with all versions of CSS.

build > css

For watching css files and other grunt-dependencies. run this command

npm run grunt

For eslint config

npm run eslint

Code errors watch in javascript and transpile into es5. type this command

npm run watch

Available tools

• eslint
• babel
  • babel-cli
  • babel-core
  • babel-preset-env
• pug
  • pug-cli
• grunt
  • grunt-cli
  • grunt-cssmin
  • grunt-copy
  • grunt-concat
  • grunt-imagemin
  • grunt-sass
  • grunt-watch
• imagemin
  • imagemin-giflossy
  • imagemin-mozjpeg
  • imagemin-pngquant
• npm-run-all
• nodemon

If you want to align your code better structure, follow this

• Install prettier plugin in your code editor
• Create a .vscode folder in your root directory
• Create a settings.json file inside that folder, and paste the code

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // you can also add prettier configurations
  "prettier.bracketSpacing": true,
  "prettier.semi": true,
}

inspired from Harriet Ryder