This starter will help you ( I hope ) to make clean front-end development.
- I - ⚙️ How it works :
- II - 👍 Make it work :
- Install dependencies :
- Install gulp ( in global )
- Build and / or watch :
- III - 📜 Create new scss and js files :
- Tree
- Way to create new components files :
- SCSS
- JS
- IV - 🗄 Dependencies :
This starter is used to :
- Compile files from a source folder to a public folder
- Copy the html and assets files from
srcfolder and paste them topublic - Group styles into a main style file, compiling and minifying it
- Idem for the scripts files
├── public
│ └── .gitkeep
├── src
│ ├── assets
│ │ ├── fonts
│ │ └── images
│ ├── js
│ │ ├── app.js
│ │ └── ui.js
│ ├── scss
│ │ ├── global
│ │ │ ├── fonts.scss
│ │ │ ├── global.scss
│ │ │ ├── mixins.scss
│ │ │ ├── reset.scss
│ │ │ └── variables.scss
│ │ └── master.scss
│ ├── index.html
│ └── test.html
├── .babelrc
├── .eslintrc.json
├── .gitignore
├── gulpfile.js
├── package.json
└── README.md- use
yarnornpm install( I assume that you have already installedyarnornpm)
Now you have all your dependencies installed.
- use
yarn global add gulpornpm install -g gulp
Now you can run gulp tasks !
- use
gulp buildto build your work one time ( openpublic/index.htmlin your browser after that ) - or simply
gulpto build it in a loop and actualize your modifications ( using BrowserSync 🔄 )
Now you have your dev environment ready to work 👍
- Go to
src/scss - Create your file with this structure:
_filename.scss - Don't forget to import this new file in
master.scsslike that:@import: 'component/filename'
- Go to
src/js - Create your file with this structure:
filename.js - Don't forget to import this new file in
app.jslike that:import: './filename'
- Go to
src/ - Create your file
- Don't forget to copy the style and script link:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/master.min.css">
</head>
<body>
<!-- Code goes here -->
<script src="js/app.min.js" charset="UTF-8"></script>
</body>
</html>Just put your assets ( images, music, videos, fonts ) in the src/assets folder, and it'll be copied in public.
package.json
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"browser-sync": "^2.26.3",
"eslint": "^5.7.0",
"eslint-plugin-import": "^2.14.0",
"gulp": "^3.9.1",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.10.0",
"gulp-htmlmin": "^5.0.1",
"gulp-plumber": "^1.2.0",
"gulp-rename": "^1.4.0",
"gulp-resolve-url": "0.0.2",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify-es": "^1.0.4",
"node-sass": "^4.9.4",
"webpack-stream": "^5.1.1"
}