I am trying to switch from gulp-sass to gulp-scss however surprisinly its not working for me. I have checkedin my code in following Git Hub.
https://github.com/dilipkumar2k6/gulp-sass
"gulp sass" is working because its using gulp-sass module. However "gulp scss" is not working because its using "gulp-scss". Following is my gulp task.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var scss = require("gulp-scss");
gulp.task('sass', function () {
gulp.src('./src/application/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/sass'));
});
gulp.task("scss", function () {
gulp.src(
"./src/application/**/*.scss"
).pipe(scss(
{"bundleExec": true}
)).pipe(gulp.dest('./dist/scss'));
});
Is there any specific reason why you have to use gulp-scss?
You don't have to use gulp-scss module in order to compile your .scss files.
gulp-scss is a bit unpopular, you should stick to gulp-sass module and in your code specify ".pipe(sass())" - it will compile either .scss or .sass files down to .css files
Related
I'm setting up a project with TailwindCSS. I'm trying to set up my automation with Gulp, but I'm running into an issue with the HTML reloading. Everything seems to work perfectly fine when I run Gulp, it minifies and cleans my CSS, concats and minifies my JS, etc., but when I try saving a class from Tailwind in my HTML, my BrowserSync in my Gulp file doesn't reload. My Gulpfile is below.
var gulp = require('gulp')
autoprefixer = require('gulp-autoprefixer')
cleanCSS = require('gulp-clean-css')
rename = require('gulp-rename')
purgecss = require('gulp-purgecss')
concat = require('gulp-concat')
uglify = require('gulp-uglify')
replace = require('gulp-replace')
postcss = require('gulp-postcss')
tailwindcss = require('tailwindcss')
browserSync = require('browser-sync').create();
// CSS TASK
function css(){
return gulp.src('./src/css/app.css')
.pipe(postcss([
require('tailwindcss'),
require('autoprefixer'),
]))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename(function(path){
path.extname = ".min.css"
}))
.pipe(
purgecss({
content: ['./*.html']
})
)
.pipe(gulp.dest('./dist/css'))
.pipe(browserSync.stream());
}
// JS TASK
function js(){
return gulp.src('./src/js/**/*.js')
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
.pipe(browserSync.stream());
}
// CACHEBUSTING TASK
const cbString = new Date().getTime();
function cacheBustTask(){
return src(['index.html'])
.pipe(replace(/cb=\d+/g, 'cb=' + cbString))
.pipe(dest('.')
);
}
// BROWSERSYNC
function serve(){
browserSync.init({
server: {
baseDir: './'
}
})
}
// WATCH
gulp.watch('./src/css/**/*.css', css);
gulp.watch('./src/js/**/*.js', js);
gulp.watch('./*.html').on('change', browserSync.reload);
// EXPORT IN ORDER
exports.default = gulp.parallel(css, js, serve);
I don't think you need ./ in your gulpfile, also I would suggest not having tailwindcss run as part of your css on file change, watch gulp task.
postcss([
require('tailwindcss'),
require('autoprefixer'),
])
I'd suggest placing it in it's own gulp task, that you run whenever you update tailwindcss.
I have had a similar problem and solved it by tweaking the watchers in my gulpfile.
In your case, the line that configures the HTML watcher looks like this:
gulp.watch('./*.html').on('change', browserSync.reload);
When you save a HTML file, this watcher refreshes your browser window. But it doesn't do anything else.
In order for Tailwind to work properly, you also need to trigger JIT compilation of the classes it detects in your HTML code. If you pass your CSS task as a callback to the watcher, the problem could resolve.
So, instead of the above, try:
gulp.watch('./*.html', css).on('change', browserSync.reload);
E.g. If I have body{} when I save and run gulp I will have in my style.min.css body{} body{}. Any idea? Thanks. Feel free to give advice on how to improve my gulpfile.js.
var gulp = require('gulp'), // npm install gulp --save-dev
sass = require('gulp-sass'), // npm install gulp-sass --save-dev
watch = require('gulp-watch'), // npm install gulp-watch --save-dev
minify = require('gulp-clean-css'), // npm install gulp-cleancss --save-dev
rename = require('gulp-rename'), // npm install gulp-rename --save-dev
concat = require('gulp-concat'); // npm install gulp-concat --save-dev
// Watch
gulp.task('default', function () {
gulp.watch('./sass/*.scss');
});
// SASS into CSS
gulp.task('styles', function () {
gulp.src('./sass/*.scss')
.pipe(sass())
.pipe(concat('./style.scss'))
.pipe(gulp.dest('./sass/'))
});
// Minify
gulp.task('minify-css', function () {
gulp.src('./sass/style.scss')
.pipe(minify())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('./css/'))
});
gulp.task('default', ['styles', 'minify-css']);
EDIT
Chained them all together.
// SASS into CSS
gulp.task('styles', function () {
return gulp.src('./sass/*.scss')
.pipe(sass())
.pipe(concat('./style.css'))
.pipe(minify())
.pipe(rename('style.min.css'))
.pipe(gulp.dest('./css/'))
});
You must be concatenating it with itself. You have this:
// SASS into CSS
gulp.task('styles', function () {
gulp.src('./sass/*.scss')
.pipe(sass())
.pipe(concat('./style.scss'))
.pipe(gulp.dest('./sass/'))
});
where even though sass() makes it into a .css file you give it a .scss extension. And then the next time you run 'styles' this gets included with whatever else is in the stream. You don't want that. Change the concat pipe to:
.pipe(concat('./style.css'))
and the first line of the 'minify-css' task to
gulp.src('./sass/style.css')
and you should be fine.
So I use gulp quite often, mostly for scss/js compilation and minification.
I always use one entry scss file, with multiple imports, but when I add files to the entry file I need to rerun gulp (watch) to include those newly created files..
There must be a way to automatically include the new files?
Minified version of my gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('assets/sass/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('assets/sass/**/*.scss', ['sass']);
});
I cant create output.css file in root directory via gulp .. I want output compressed one file with stylesheet, but the gulp doesnt work them.
I have this structure
- bower_components
- bootstrap
- sass
- custom.scss
- output.css
my gulp file:
var gulp = require('gulp'),
sass = require('gulp-sass'),
watch = require('gulp-watch');
var concat = require('gulp-concat');
gulp.task('scss', function () {
return gulp.src('bower_components/bootstrap/scss/_custom.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('output.css'))
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('bower_components/bootstrap/scss/_custom.scss', ['scss']);
});
gulp.task('default', ['watch']);
You forgot to include the 'scss' task in your default task.
gulp.task('default', ['scss', 'watch']);
I want to compile my scss file using gulp but it doesn't output anything. Here is my task:
var gulp = require('gulp'),
sass = require('gulp-ruby-sass');
gulp.task('styles', function(){
return
gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'));
});
When I run, everything works fine but my css folder is empty.
Has anyone encountered the same issue?
A bit of potential semi-colon insertion (you should read your code as if there was a semi-colon after return, i.e. you should not let it float on its own on one line), and a bit of different gulp-ruby-sass syntax, perhaps? Here's what works for me:
"use strict";
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('default', [], function() {
return sass('scss/*.scss')
.pipe(gulp.dest('css/style.css'));
});