# starter-file

> generating files for project

Latest version **1.1.1** (published 2022-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install starter-file
pnpm add starter-file
yarn add starter-file
bun add starter-file
```

Provides the command `generate`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2022-02-17 |
| First published | 2022-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 1 |
| Unpacked size | 969.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nazimudheen_ti |
| Maintainers | nazimnachu |
| Keywords | starter-file, generator, file |

## Links

- npm: https://www.npmjs.com/package/starter-file
- Repository: https://github.com/nazimudheen267/starter-file
- Homepage: https://github.com/nazimudheen267/starter-file#readme
- Issues: https://github.com/nazimudheen267/starter-file/issues
- npm.io page: https://npm.io/package/starter-file

## Dependencies (1)

- [inquirer](https://npm.io/package/inquirer.md) ^8.2.0

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.1.1 (latest) — 2022-02-17
- 1.1.0 — 2022-02-17
- 1.0.9 — 2022-02-16
- 1.0.8 — 2022-02-16
- 1.0.7 — 2022-02-16
- 1.0.6 — 2022-02-16
- 1.0.5 — 2022-02-16
- 1.0.4 — 2022-02-15
- 1.0.3 — 2022-02-15
- 1.0.2 — 2022-02-13
- 1.0.1 — 2022-02-13
- 1.0.0 — 2022-02-11

## README

![npm](https://img.shields.io/npm/v/starter-file) ![downloads](https://img.shields.io/npm/dw/starter-file) ![license](https://img.shields.io/github/license/nazimudheen267/starter-file?style=flat-square)

# 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`](https://nodejs.org/en/). 

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](https://pugjs.org/api/getting-started.html "pug website") 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](https://sass-lang.com/ "sass website"). 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](https://github.com/eslint/eslint)  
- [babel](https://github.com/babel/babel)
    - [babel-cli](https://github.com/babel/babel/tree/master/packages/babel-cli)
    - [babel-core](https://github.com/babel/babel/tree/master/packages/babel-core)
    - [babel-preset-env](https://github.com/babel/babel-preset-env)
- [pug](https://github.com/pugjs/pug)
    - [pug-cli](https://github.com/pugjs/pug-cli)
- [grunt](https://github.com/gruntjs/grunt)
    - [grunt-cli](https://github.com/gruntjs/grunt-contrib-cssmin)
    - [grunt-cssmin](https://github.com/gruntjs/grunt-contrib-cssmin)
    - [grunt-copy](https://github.com/gruntjs/grunt-contrib-copy)
    - [grunt-concat](https://github.com/gruntjs/grunt-contrib-concat)
    - [grunt-imagemin](https://github.com/gruntjs/grunt-contrib-imagemin)
    - [grunt-sass](https://github.com/gruntjs/grunt-contrib-sass) 
    - [grunt-watch](https://github.com/gruntjs/grunt-contrib-watch)
- [imagemin](https://github.com/imagemin/imagemin)
   - [imagemin-giflossy](https://github.com/imagemin/imagemin-pngquant)
   - [imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg)
   - [imagemin-pngquant](https://github.com/imagemin/imagemin-pngquant)
- [npm-run-all](https://github.com/mysticatea/npm-run-all)
- [nodemon](https://github.com/remy/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

```json
{
  "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](https://medium.com/northcoders/creating-a-project-generator-with-node-29e13b3cd309 "medium article")

---
_Source: https://npm.io/package/starter-file · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._