For gulpfile.js file, we can use the file as it. of course if we want to customize it we can do.
Steps:
step 1: git clone the app
step 2: npm init (choose the project names)
Step 3: npm install -g npm@9.2.0
Step 4: npm install --save-dev gulp-cli
Step 5: npm install gulp
Step 6: npm install browser-sync
Step 7: npm install sass
Step 8: npm install gulp-sass
Step 9: Add the gulpfile.js
Step 10: Add a new folder : Sass
Step 9: enter in cmd as : gulp css
Step 9.1 (Optional): If you face error like - gulp : File C:\Users\praka\AppData\Roaming\npm\gulp.ps1 cannot be loaded because running scripts is disabled on this system.(refer below screenshot)
Solve: go to the path : C:\Users\\AppData\Roaming\npm\gulp.ps1 and
deletethe npm windows powershell files & re-run the cases - gulp css
Step 10: enterin cmd as : gulp sync for live reloading
Step 11: enter in cmd as : gulp watchCtrl + S will trigger the new generation of styles.
Atlast add .gitignore file & add /node_modules
📷 Screenshots
Generation of styles.css in the destination & source styles from sass folder
More: shall i include the below features in the next PR ?
🛠️ Closes #279
➕ Changes Introduced
📄 Note To Reviewers
Features:
**1. Live Server feature
.css & .htmlfiles.As i mentioned in the issues, gulp has lot of advantages, successfully integrated gulp to our weather app project.
Video has been uploaded in my drive for your understanding, and for step by step understanding with screenshots i have added in the guide docx below.
Gulp_explantion_video
Gulp_installation_guide
For gulpfile.js file, we can use the file as it. of course if we want to customize it we can do.
Steps:
step 1:
git clone the appstep 2:
npm init(choose the project names)Step 3:
npm install -g npm@9.2.0Step 4:
npm install --save-dev gulp-cliStep 5:
npm install gulpStep 6:
npm install browser-syncStep 7:
npm install sassStep 8:
npm install gulp-sassStep 9: Add the
gulpfile.jsStep 10: Add a new folder : Sass
Step 9: enter in cmd as :
gulp cssStep 9.1 (Optional): If you face error like - gulp : File C:\Users\praka\AppData\Roaming\npm\gulp.ps1 cannot be loaded because running scripts is disabled on this system. (refer below screenshot) Solve: go to the path : C:\Users\\AppData\Roaming\npm\gulp.ps1 and
deletethe npm windows powershell files & re-run the cases -gulp cssStep 10: enterin cmd as :
gulp syncfor live reloadingStep 11: enter in cmd as :
gulp watchCtrl + S will trigger the new generation of styles.Atlast add .gitignore file & add /node_modules
📷 Screenshots
Generation of styles.css in the destination & source styles from sass folder
More: shall i include the below features in the next PR ?