a boilerplate to start the most basic projects
This project was created to be a boilerplate for creating simple frontend sites (HTML,CSS,JS) with the help of more advanced tools like a task runner (Gulp) with various plugins (sass, babel, autoprefixer, autoreload, etc..) to make development more efficient.
You need to have node.js and npm(comes with node.js) installed in your computer.
You also need to be familiar with the task runner gulp.js since that is the backbone of this project. (Please do send a pull request if you want to implement a different task runner or to use plain npm scripts). There is a good tutorial from css-tricks on how to use gulp.
This project also assumes you have basic knowledge with Sass.
├───src -> Source files for the project
│ ├───img -> Image assets
│ ├───videos -> Video assets
│ ├───fonts -> font assets
│ ├───scss -> Sass styles
│ │ └───styles.scss -> Main file in where all other sass files should be included.
│ └───html -> htmls
│ │ ├───components -> Htmls to be used for gulp-html-extend
│ └───js -> Scripts
├───package.json -> NodeJS configuration file for manage node and project dependencies
├───gulpfile.js -> Gulp Tasks
- Local http server with autoreload (Browsersync)
- Babel to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in old browsers or environments.
- Autoprefixer to automatically add prefix to css properties that require different prefix for different browsers
- Sourcemaps for js and css to easily debug js and css code in the browser
All features mentioned above are already set up and integrated to the gulp tasks.
- Make sure you run
npm installto install project dependencies. - To start the local server and start developing, run
npm run devin the terminal.
To add additional libraries, make sure they are installed through npm (or bower/yarn) and then add their paths in the src of copy:plugins:js and copy:plugins:css gulp tasks (or you can also import the sass src of the library in styles.scss).
Update your imports in the <head></head> in the html accordingly.