Use this as a simple structure for a simple start to a simple site.
This project was originally forked from the DevTips Starter Kit. Visit DevTipsStarterKit.com/ for more info. The Gulp work was contributed by [mriveradorta] (https://github.com/mriverodorta/DevTips-Starter-Kit/tree/Gulp-Starter-Kit). I merged the Gulp version with Bootstrap 4.
This project have some requeriments you need to meet in order to compile it. First of all you need NodeJS in order to run javascript on the console, you can go to the NodeJS site and follow trough the installation process. After you get the node command on the console, you need to install Gulp and Bower globally with the following command.
node install -g gulp bower
Gulp is the one that will run all the task of compilation, watchers and others. Bower will get the dependencies for the client side like jQuery. Those are the only requeriments to run this project.
In order to start using the project you need to download or clone it to your pc. You can also clone the project with the git command.
After you have it on you pc, you need to go in the console to the project folder and execute the following command to gather all the dependencies.
npm install && bower install
That's it! After the proccess is finished you will have all you need to start coding.
To start using it, the only thing you need to do is open the project in you code editor of choice and code. To compile and live preview all your changes you have some commands that will help you. Here are the list of commands you should know.
Every command must be executed on the root directory of the project using a gulp command like gulp clean or gulp build
- start: Compile and watch for changes (For development)
- clean: Removes all the compiled files on ./build
- js: Compile the JavaScript files
- jade: Compile the Jade templates
- sass: Compile the Sass styles
- images: Copy the newer to the build folder
- favicon: Copy the favicon to the build folder
- vendors: Copy the vendors to the build folder
- build: Build the project
- watch: Watch for any changes on the each section
- help: Print this message
- browsersync: Start the browsersync server
If you are in the development proccess, the gulp start command is the best option for you. Go to the folder project in the console and execute gulp start, it will compile the project and start the server refreshing every time you save the code. The command also tells you how to access the project from a local and public URL. Every browser that points to that URL will be auto refreshed. As an extra feature for testing purpose any interaction on one browser will be reflected on any others. Try it on a phone, tablet, and pc at the same time!
The project has a very simple and flexible structure. If the default place for any file or directory needs to be moved, be sure to update the new position in the config file.
├───build -> All the compiled files will be placed here (Distribution)
│ ├───assets -> Compiled Assets
│ ├───index.html -> Compiled Jade files
│ ├───vendors -> Project dependencies
├───source -> Source files for the project
│ ├───assets -> Assets for the project
│ │ ├───img -> Images
│ │ └───js -> Scripts
│ ├───sass -> Sass styles
│ │ └───main.sass -> Main file where all other sass files should be included.
│ ├───vendors -> Vendors folder for all the dependencies (Managed by Bower)
│ └───views -> Templates directory for Jade files
│ │ └───index.jade
├───.bowerrc -> Define where the dependencies will be installed
├───bower.json -> Bower configuration file for manage project dependencies
├───package.json -> NodeJS configuration file for manage node dependencies
├───gulpfile.js -> Gulp Tasks
├───config.js -> Project configuration
All the files in the build folder will be auto-generated by the different tasks when compiling the project. Be sure to not modify any file manually in the build folder because changes will be replaced on the compile process.
This project has some nice configuration options to meet all your needs. To configure, you need to edit the config.js file and change any value you need. Every aspect of this configuration is described in the file so that you know the options.