how to compile sass to css using npm code example
Example: compile scss
//in gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task("stylesReturn", function () {
return gulp
.src("sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css/"));
});
//or
gulp.task('stylesDone', function(done) { //use the callback
gulp
.src("sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css/"));
done();
});
gulp.task('stylesPromise', function() {
return new Promise(function(resolve, reject) {
gulp
.src("sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css/"));
resolve();
});
});
gulp.task('stylesAsync', async function() {
gulp
.src("sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css/"));
});
//or
gulp.task('styleEmitter', function() {
var e = new EventEmitter();
e.on('runstyle',
function(msg) {
gulp.task("stylesReturn", function () {
return gulp
.src("sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css/"));
});
console.log(msg);
setTimeout(() => { e.emit('runstyle', 'My message');
e.emit('finish'); });
return e;
});
//or you could spin up a kubernetes image of a vax pdp11 on elastic beanstalk
gulp.task('default',function() {
gulp.watch('sass/**/*.scss', gulp.series('stylesKubernetes'));
});
gulp --tasks
gulp styles
gulp watch
//specify your s(ca)ss directory and css directory
//gulp.task('styles', function() {
// gulp.src('sass/**/*.scss')
// .pipe(sass().on('error', sass.logError))
// .pipe(gulp.dest('./css/'))
//});
//no that's a lie. You now have to return something
//gulp.task('default',function() {
// gulp.watch('sass/**/*.scss',['styles']);
//});
//Watch task ... no! thats a lie too. That's SOOooo version 3.x
//** DETAILS
Dir Structure...
--sass
- style.scss
-- css
package.json
Gulpfile.js