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
│ │ ├── components
│ │ │ ├── _footer.scss
│ │ │ └── _header.scss
│ │ ├── global
│ │ │ ├── fonts.scss
│ │ │ ├── global.scss
│ │ │ ├── mixins.scss
│ │ │ ├── reset.scss
│ │ │ └── variables.scss
│ │ └── master.scss
│ ├── index.html
│ └── test.html
├── .babelrc
├── .gitignore
├── .jshintrc
├── gulpfile.js
├── package.json
├── README.md
└── yarn.lock- 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/components - 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.
The
url()of backgrounds in SCSS will be updated too 😉
package.json
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.24.6",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1",
"gulp-cssmin": "^0.2.0",
"gulp-plumber": "^1.2.0",
"gulp-rename": "^1.4.0",
"gulp-resolve-url": "^0.0.2",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify-es": "^1.0.4",
"jshint": "^2.9.5",
"webpack-stream": "^4.0.3"
}.jshintrc