07/10/2022, 23:59 SCSS and GULP Example – How to compile and watch SCSS file to CSS - Gokhan Celebi
Home Contact Get a Quote
Categories : HTML - CSS
SCSS and GULP Example – How to
compile and watch SCSS file to CSS
When you just want to use SCSS in your project you dont need to install big
tools like webpack so with gulp you can easily convert scss files into css file with
little bit of code and settings.
First of all you should install gulp and scss loaders and converter npm packages
npm install gulp gulp-sass node-sass gulp-clean-css gulp-concat
After installing those npm packages you should create a gulpfile.js file like this
Example gulpfile.js
// npm install gulp gulp-sass node-sass gulp-clean-css gulp-con
var gulp = require('gulp'),
sass = require('gulp-sass')(require("node-sass")),
cleanCSS = require('gulp-clean-css'),
concat = require('gulp-concat');
gulp.task('scss-concat', function () {
return gulp.src([
'assets/scss/reset.scss',
'assets/scss/parts/*.scss',
'assets/scss/main.scss',
'assets/scss/mobile-md.scss',
'assets/scss/mobile-sm.scss',
'assets/scss/mobile-xs.scss'
])
.pipe(sass().on('error', sass.logError))
https://gokhancelebi.net/scss-and-gulp-example-how-to-compile-and-watch-scss-file-to-css/ 1/3
07/10/2022, 23:59 SCSS and GULP Example – How to compile and watch SCSS file to CSS - Gokhan Celebi
.pipe(concat('bundle.css'))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('assets/css'));
});
gulp.task('watch', function () {
gulp.watch('assets/scss/parts/*.scss', gulp.series('scss-co
gulp.watch('assets/scss/*.scss', gulp.series('scss-concat')
});
Important : You should change scss file and css file folders to your folder
names to convert successfully.
This system very usefull and easy to use. You just need to create assets/scss
folders and you need to create your scss files as you can see in the gulpfile.js
after that you just need to run this commend in your project directory command
line to start watching your files.
With this command gulp will watch all file changes and will minify and combine
and convert into bundled css file.
Do you need help?
gulp watch Do you need help about your
project?
Full Project Ready to use SCSS and GULP starter pack :
You can contact me!
https://github.com/gokhancelebi/gulp-scss-starter-project
Via my freelancer profiles :
In this version of gulp file configuration you will find your css files in
/assets/css/bundle.css Upwork Freelancer
Or you can contact me
directly by E-Mail:
Get a Quote
Search
Search
Example assets folder
AngularJS
C#
General
HTML – CSS
Java
Javascript
JQuery
Laravel
PHP
React.JS
Software
VueJS
Wordpress
Example css folder
https://gokhancelebi.net/scss-and-gulp-example-how-to-compile-and-watch-scss-file-to-css/ 2/3
07/10/2022, 23:59 SCSS and GULP Example – How to compile and watch SCSS file to CSS - Gokhan Celebi
Share
Leave a Reply
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
I'm not a robot
reCAPTCHA
Privacy - Terms
Post Comment
Thank you!
https://gokhancelebi.net/scss-and-gulp-example-how-to-compile-and-watch-scss-file-to-css/ 3/3
