Home » Blog » Development Environment Setup For A Basic Site

development environment

Development Environment Setup For A Basic Site

Using NPM, Gulp, BrowserSync, Gulp-Sass, Bootstrap and Git

A few weeks ago I had an idea, which I’m sure others had too, to create a simple basic site setup.  I wanted to create a development environment that I could reuse each time I create a new project.  Using the tools listed above to make my web development easier.  The following is what I found in my research of reading blog posts and watching videos on YouTube.  I hope you find this helpful like I do.

The following is written as instructions to follow.  If you are interested in a PDF of these instructions, use my contact form to let me know and I’ll email it to you.

First, create a folder for your new site.

Folder structure:

Site Name (main folder)

app

css

app.css

js

bootstrap.min.js (create by copying from Bootstrap files in node_modules)

jquery.min.js (create by copying from Bootstrap files in node_modules)

tether.min.js (create by copying from Bootstrap files in node_modules)

scss

app.scss

_bootstrap.scss (create by copying from Bootstrap files in node_modules)

_custom.scss (create by copying from Bootstrap files in node_modules)

Index.html

gulpfile.js

node_modules (folder is created when running npm commands)

package.json (file is created when npm init is run)

 

Next, setup Git, Node.js and Gulp Globally

Install Git – if not already installed

Create new Git repository on GitHub if using it.

Install Node.js – if not already.  Get the install and instructions from here

Install Gulp globally – if not already:  npm install -g gulp

Change to directory of new site folder:  cd sitename

Follow basic Git commands

git init

git add .

git commit -m “Initial commit”

If using GitHub

git remote add origin <copy address from GitHub for the repository>

git push origin master

 

Finally, setup the remaining items used while developing

Initialize npm:  npm init

Enter in your responses or accept defaults by pressing enter – this creates the package.json file

Adjust package.json file as necessory

Install jQuery:  npm install jquery –save (the “–save” saves the install to the package.json file)

Install normalize.css:  npm install normalize.css –save

Install Gulp:  npm install gulp –save-dev (saves to the package.json file in the dev section)

If node_modules disappears – run:  npm install from inside folder with the
package.json to install all listed in the package file.

Don’t forget to then run:  npm outdated to get the most update versions

 

Create the gulpfile.js file in the root of Site Name directory

Install Gulp plugins – for example:  npm install browser-sync gulp –save-dev

npm install gulp-sass –save-dev

npm install bootstrap@3 –save

Add basic gulp watch commands to the gulpfile.js like the one on this site:  https://browsersync.io/docs/gulp

 

The above instructions gave me a basic setup for a site to start developing to my hearts content.  The gulp watch with browser sync and gulp-sass lets me concentrate on the creation of my site while it automatically refreshes the css files and the browser.  I get to see the changes as they are made and it is all triggered on the files being saved in the code editor.

Leave a comment below and let me know what you think.  Do you use another setup?  If I missed something, let me know.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *