Preparing project files and downloading packages takes a lot of time. This starter pack allows you to start a frontend project quickly.
-
If you don't have Bash and Node.js in your computer, install them.
-
Navigate your app directory.
cd app-directory -
Run this command in the app-directory.
exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/erdiucar/frontend-starter-pack/master/frontend-starter-pack.sh 2> /dev/null)
- JQuery
- Bootstrap
- Popper.js
- Font Awesome (Optional)
- Gulp and plugins
- Sass
- ESLint and plugins (Airbnb React JavaScript style)
- Prettier and plugins (Airbnb React JavaScript style)
-
The script builds project folders and files (dist-img-font-css-js folders, gitignore file, css files, js files, gulp file, eslintrc.json and prettierrc.json file, index.html file, scss files).
-
The script installs Git, Default Npm, JQuery, Popper.js, Bootstrap, Font Awesome, ESLint & Prettier, Airbnb's JavaScript style guide packages, Prettier's Eslint and Gulp packages.
When you run the command, bash script works. It downloads the packages and configure the project folder to start to work. When the package downloads are finished, gulp serve command runs. The pack configures css and js paths in the index.html file. You can immediately start your project!
Gulp helps you to minify css and js files. When you type the gulp serve in your command line, Gulp starts to watch scss folder and main.js file. If you save the project when serve command running, Gulp sees your changes on the files and minifies all of that.
gulp serveWhen your production is finished, you can type gulp build command. It creates the "dist" files in the dist folder (.html files, style.min.css file, app.min.js file, img folder, font folder and libraries).
gulp buildI use the default configuration settings prepared by Paulo Ramos. I only add "JQuery" to "env settings" and add the "no-console: off" rule to ".eslintrc.json" file. You can review the settings from his project.
This script was inspired by Paulo Ramos's script.