How to Setup a SASS Project with or without Gulp
The day is not too far away when people will no longer write CSS codes, instead SASS would take over. Browser engines might also start supporting SASS and one may no longer need to compile SASS codes into CSS. If you're looking forward to start using and learning SASS, this is where you start with the easy installation guide.
Step by step:
- Make an empty folder as project
- Install git bash if already not installed
- Right click on the folder and select open git bash here
- Open your project folder with a code editor, I prefer VS Code
- Have nodejs installed
- Run the following commands-
npm install --save-dev gulp gulp-sass browser-sync
npm install -g gulp-cli
Your project structure can be like the following -
Copy gulpfile.js file and paste it on your local file.
Without gulp (Alternative way):
npm install lite-server --save-dev
npm install --save-dev node-sass
npm install --save-dev concurrently
npm install bootstrap
Your project structure should be like-
Then open your package.json file and edit the script as the following-
"dev": "lite-server --baseDir="public"",
"build": "node-sass src/scss -o public/assets/css",
"watch": "npm run build && node-sass src/scss -wo public/assets/css",
"start": "concurrently "npm run watch" "npm run dev""
Save the file and on terminal, simply write-
$ npm start
Mr. Patrick Schroen for using concurrently.
Get the full package here
Subscribe to Shopnil Mahmud
Get the latest posts delivered right to your inbox