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.
Site Name (main folder)
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)
_bootstrap.scss (create by copying from Bootstrap files in node_modules)
_custom.scss (create by copying from Bootstrap files in node_modules)
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 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.