When I run my gulp file everything works as expected and I receive no errors. However, whenever I make changes to the SCSS files, the terminal shows the cleanCss, sass, and autoprefixer tasks running but the changes are not reflected in the final CSS file.
I have gone through everything and can't come up with why this is happening. The tasks running out of order is all I can think of but I can't figure out why they run fine on the first run but not on subsequent runs. Here's some of my code:
// default gulp task
gulp.task('default', ['cleanCss', 'cleanJs', 'cleanImg', 'sass', 'scripts', 'imagePro', 'autoprefixer', 'watch']);
//watch for changes
gulp.task('watch', function() {
gulp.watch('./assets/img/*', ['cleanImg', 'imagePro']);
gulp.watch('./assets/js/*.js', ['cleanJs', 'scripts']);
gulp.watch('./assets/sass/bootstrap/*.scss', ['cleanCss', 'sass', 'autoprefixer']);
});
//
//Compile scss to css
//
gulp.task('sass', ['cleanCss'], function () {
gulp.src('./assets/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
// .pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css'));
});
//
// Post Process CSS
//
// Add Vendor Prefixes
gulp.task('autoprefixer', ['cleanCss', 'sass'], function() {
gulp.src('./assets/css/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/build/css'));
});
If you want your asynchronous tasks to run in order you need to return the stream. Example:
gulp.task('sass', ['cleanCss'], function () {
return gulp.src('./assets/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
// .pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css'));
});
Check the docs for Async task support in https://github.com/gulpjs/gulp/blob/master/docs/API.md
Related
I am trying to run a simple Gulp task to output css and create a source map. The conversion to css is working fine, but when I open the developer console the css is still showing as coming from style.css and not the .scss files as I would expect. I have checked the 'Enable CSS Source Maps' in the browser settings.
Here is my code:
// compile all sass files to css
gulp.task('sass', function(done){
return gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass({outputStyle: 'expanded'})) // Converts Sass to CSS with gulp-sass
.pipe(sourcemaps.init()) // create sourcemaps
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css')) // save to the 'app' directory
done();
});
Any help greatly appreciated.
You have to initiate the sourcemap before compiling your sass:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('app/css'));
});
Note that with Gulp 4, you no longer need the gulp-sourcemaps package, and can instead do:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss', {sourcemaps: true})
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('app/css', {sourcemaps: true}));
});
I have the following gulp task:
gulp.task("stylePipe", function(){
var postcssPlugins = [
autoprefixer({browsers: ['last 2 version']}), // autoprefixer
cssnano() // css minifier
];
gulp.src("src/sass/*.scss")
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass().on("error", sass.logError)) // scan for errors
.pipe(postcss(postcssPlugins)) // runs postcss plugins listed above
.pipe(rename({ extname: '.min.css' }))
.pipe(sourcemaps.write('maps'))
.pipe(gulp.dest("dist/css")); // compile into dist
});
gulp.task("styleWatch", ["stylePipe"], browsersync.reload);
gulp.task("watch", function(){
browsersync({
server: {
baseDir: "dist/"
}
});
gulp.watch("src/sass/*.scss", ["styleWatch"]);
});
I want to watch for changes in all the subdirectories listed below
using only the main.scss as src in the gulp.src("src/sass/*.scss") (main.scss is the only file that should be preprocessed whenever there is a change in the subdirectories' files).
How can I accomplish this?
I simply modified
gulp.watch("src/sass/*.scss", ["styleWatch"]);
into
gulp.watch("src/sass/**/*.scss", ["styleWatch"]);
When I use partials on the scss structure, I have to deal with frequent browser sync error (like reloading forever). Notice that it is an intermittent error so it is not a common compiling problem (although it might be somewhat related) and it doesn't happen when I don't use partials. Also, I don't think it is project related or a gulpfile issue either, since it occurs with any project and I have tried more than one gulpfile structure. Anyway, you can check it out below:
var gulp = require('gulp');
var sass = require('gulp-sass');
var clean = require('gulp-clean');
var browserSync = require('browser-sync').create();
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function () {
gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('copy', ['clean'], function () {
return gulp.src('src/**/*')
.pipe(gulp.dest('dist'));
});
gulp.task('clean', function () {
return gulp.src('dist')
.pipe(clean());
});
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
gulp.watch('src/**/*').on('change', browserSync.reload)
});
gulp.task('default', ['styles', 'serve']);
A couple of things that might help: (1) add a return statement in your 'styles' task and (2) remove the second watch because it calls browserSync.reload which is already called at the end of the 'styles' task and you don't need to call it twice. So make these changes:
gulp.task('styles', function () {
// added return below
return gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
and the second watch is unnecessary and possibly a problem:
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
// remove below watch
// gulp.watch('src/**/*').on('change', browserSync.reload)
gulp.watch("./*.html").on("change", browserSync.reload);
});
I currently have 3 watch tasks as so:
gulp.task('watch', function(){
gulp.watch(sassDir + '/*.scss', ['sass']);
gulp.watch(cssDir + '/*.css', ['css']);
gulp.watch(jsDir + '/*.js', ['js']);
})
My issue right now is that when Sass throws an error all watch tasks stops.
I then added .pipe(sass({errLogToConsole: true})) - which seems to keep my sass watch task alive even with an error, however the two other watch tasks doesnt seem to run.
How do I keep all of my watch tasks a live, so that an error in my sass file doesn't stop everything from being compiled?
My setup:
gulp.task('sass', function () {
gulp.src(sassDir + '/**/*.scss')
.pipe(sass({errLogToConsole: true}))
.pipe(gulp.dest(sassTargetDir));
});
gulp.task('css', function() {
gulp.src(cssDir + '/**/*.css')
.pipe(autoprefix({
browsers: ['last 40 versions'],
cascade: false
}))
.pipe(gulp.dest(cssTargetDir))
.pipe(minify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(cssTargetDir));
});
gulp.task('js', function() {
gulp.src(jsDir + '/**/*.js')
.pipe(gulp.dest(jsTargetDir))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(jsTargetDir))
});
gulp.task('watch', function(){
gulp.watch(sassDir + '/*.scss', ['sass']);
gulp.watch(cssDir + '/*.css', ['css']);
gulp.watch(jsDir + '/*.js', ['js']);
})
gulp.task('default', ['sass','css','js','watch']);
errLogToConsole is deprecated (or doesn't work) with Gulp 2.0+. Try using this in place of .pipe(sass({errLogToConsole: true})).
.pipe(sass().on('error', sass.logError))
I use that with the watch command and the errors don't stop Gulp.
I got this from the Gulp sample code and a few more up-to-date Gulp guides. Check here in the future. https://github.com/dlmanning/gulp-sass
I have set up a very simple gulpfile.js There are only two task - 'sass' and 'minify-js'. These two tasks are fired by the task 'watch' when a change is detected. It all seems to be working well: Gulp is listening for changes, *.scss files are compiled into CSS, the console generates output as expected, without any errors. However, the CSS files do not get minified there are no output files from the 'minify-css' task whatsoever.
Why is 'minify-css' not working? What am I missing here?
This is my gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function() {
gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('minify-css', function() {
gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']);
});
Sounds like a race condition. Sass and MinifyCSS are executed in parallel, might be that your Sass task isn't done when you're already running MinifyCSS. Sass should be a dependency, so you have two options:
Make Sass a dependency from minifycss:
gulp.task('minify-css', ['sass'], function() {
return gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']);
});
Have one task that does both!
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
The latter one is actually the preferred version. You save yourself a lot of time if you don't have an intermediate result
Btw: Don't forget the return statements
I know this is kind of an old question but thought I'd throw this out there because it's something that's helped me. To build on the answer from ddprrt, I'd recommend changing:
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
to:
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass('site.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'))
.pipe(minifyCSS())
.pipe(rename('site.min.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
This allows you to debug with the un-minified CSS and deploy the minified version.
It's because the gulp-minify-css is deprecated. Use gulp-clean-css instead.
Click here(https://www.npmjs.com/package/gulp-minify-css "npm-clean-css")!