Combining SCSS and Gulp can make your website-building process much smoother. SCSS helps you create neat and flexible styles, while Gulp takes care of repetitive tasks, saving you time and effort. This dynamic duo not only makes your stylesheets easier to manage but also ensures a consistent and scalable development workflow.
Using SCSS
In SCSS, the main key file is src/sass/style.scss. If you are looking for SCSS Component then you can find it in the sass/ folder.
Using Gulp.js
Before diving into Gulp.js, check if your system already has NodeJS, NPM, and Gulp ready to install.
Once you’ve got those installed, open your terminal (we suggest using VS Code), navigate to your project folder using the cd /to/project/folder command, and then hit npm install. This will grab all the dependencies listed in your package.json.
Now, you’re all set to use some Gulp commands, including:
gulp This will compile the src/sass/style.scss to css/style.css and run BrowserSync.