Files in the indented syntax use the extension .sass.Photo by Maik Jonietz on UnsplashHow did I improve my workflow?After I installed Gulp I went to the Gulp plugin registry, searched through the 3694+ plugins and picked the ones that could benefit my workflow.I decided to make use of sass and the browser sync which benefited me a lot.The first step is to create a package.json file by typing the command$ npm initThen go ahead by entering the details an example is shown belowNow to install the necessary dependencies enter the following command$ npm install — save-dev gulp-postcss autoprefixer cssnano gulp-sourcemaps gulp browser-sync gulp-sassWe had defined start as “gulp” in the package.json since we want to run the command of gulp on npm start.Since we don’t want to use the var again and again so we used this way.Now lets create the path for the src and the destLets create our function style which looks like this.Lets create a watcher function which watches our Scss files and then automatically reloads with the changes using the Browser Sync which calls the reload function while using the .html fileNow add the gulp task which will run in parallel i.e keep track of the style function and the watcher on the .html files and then automatically reloads.Our final gulpfile.js looks like this.The sample directory structure looks like this.directory structureCongratulations!!!!.The gulp task has been successfully created .Now any changes made in the style.scss will automatically convert it into style.css and place it in the src/css folder.No need of refreshing the page, since we have used Browser Sync.You can find the repository link for the Starter Pack hereJatin-8898/sass-starter-packSass starter files using the Gulp 4.0.0..Contribute to Jatin-8898/sass-starter-pack development by creating an account…github.com. More details