Canvas Docs

SCSS & Gulp.js

Using SCSS and Gulp together can greatly improve the efficiency, organization, and scalability of your front-end web development projects. By using SCSS to write more maintainable and scalable stylesheets and Gulp to automate repetitive tasks, you can save time and effort while ensuring consistency and scalability in your development workflow.

How to Use

  1. 1

    Using SCSS

    The Main File for SCSS is the /style.scss File. The SCSS Components can be found in the sass/ Folder.

    You can customize SCSS using the sass/bootstrap/variables.scss (Bootstrap Variables) and the sass/variables.scss (Canvas Variables).

  2. 2

    Using Gulp.js

    If you plan on using Gulp.js, first make Sure that your System already has NodeJS, NPM and Gulp installed.

    After you have the above installed, use the Terminal (we recommend VS Code), cd /to/project/folder to go to your Project Folder and then use the npm install Command to install the Dependencies from the package.json.

    Some of the Gulp Commands included are:

    • gulp watch This will compile the /style.scss to /style.css and run BrowserSync.

    • gulp imageminify This will compress all the Images and save them in the /dist Folder.

    • gulp cssminify This will minify the CSS Files and save them in the /dist Folder.

    • gulp jsminify This will minify the JS Files and save them in the /dist Folder.

    • gulp minify This will minify both JS and CSS Files and save them in the /dist Folder.