americansammy/gulp4-browser-sync

Updating with Gulp 4 from css-tricks tutorial

gulp4browsersync

Updating with Gulp 4 from css-tricks tutorial Using a tutorial from https://css-tricks.com/gulp-for-beginners/, we attempted to update this for Gulp 4.

Important: Follow the tutorial or read below for a summary and a list of Must Haves:

1. Install node.js. This can be accomplished through https://nodejs.org/
2. In your command line: npm install gulp -g ON A MAC: sudo npm install gulp -g
3. Create a project folder, and within those folders, include individual folders for js, scss, css, fonts, images, as well as an html file titled "index/html." Note: I reccommend saving this folder to your desktop for easy access.
4. From the command line, change directories until you're in the project folder you created. This might look like entering "cd desktop" followed by "cd project" for you.
5. Enter npm init on the command line.
6. A .json file will be created.
7. Enter: npm install gulp --save-dev This installs Gulp.
8. Install Gulp Sass from the command line: npm install gulp-sass --save-dev
9. Install Borwser-Sync: npm install browser-sync --save-dev
10. Edit your styles.scss file and index.html file (link them like normal).
11. From the command line, and in your project directory enter: gulp def and see if your index.html file opens...

If not, I am sorry, my memory is fleeting, feel free to update this if you find an error.