Reputation: 846
I'm having a problem with compiling my CSS, when I make a change in my SASS file it doesn't change the final file, just after trying more than once.
var gulp = require('gulp'); var sass = require('gulp-sass'); var rename = require('gulp-rename'); var postcss = require('gulp-postcss'); var autoprefixer = require('autoprefixer'); var cssnano = require('cssnano'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); //CSS Tasks gulp.task('styles', function() { console.log("Compilling SASS"); gulp.src('app/sass/style.scss') .pipe(sass().on('error', sass.logError)) .pipe(postcss([ autoprefixer() ])) .pipe(rename('999_style.css')) .pipe(gulp.dest('app/css/')); }); gulp.task('stylescompress', ['styles'], function() { console.log("Concating and moving all the css files in styles folder"); gulp.src("app/css/**.css") .pipe(concat('style.css')) .pipe(postcss([ cssnano() ])) .pipe(gulp.dest('css/')); }); //Javascript Tasks gulp.task('jscompress', function() { //console.log("Concating and moving all the js files in javascript folder"); gulp.src("app/js/**.js") .pipe(concat('scripts.js')) .pipe(gulp.dest('js/')) .pipe(rename('scripts.min.js')) .pipe(uglify()) .pipe(gulp.dest('js/')) }); //Watch task gulp.task('default',function() { gulp.watch(['app/sass/**/*.scss'],['stylescompress']) .on('change', function(event) { console.log('SASS - File ' + event.path + ' was ' + event.type + ', running tasks...'); }); gulp.watch(['app/js/**/*.js'],['jscompress']) .on('change', function(event) { console.log('SCRIPTS - File ' + event.path + ' was ' + event.type + ', running tasks...'); }); });
As you can see, I used all according to Gulp Docs, but I didn't find out what's going on.
Upvotes: 3
Views: 1039
Reputation: 1
Install browser-sync and add
var browserSync = require('browser-sync').create();
In your sass task add browserSync
gulp.task('sass', function() {
console.log("Compilling SASS");
gulp.src('app/sass/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([ autoprefixer() ]))
.pipe(rename('999_style.css'))
.pipe(gulp.dest('app/css/'))
.pipe(browserSync.reload({
stream: true
}))
});
Then add a 'watch' task
gulp.task('watch', ['browserSync', 'sass'], function() {
gulp.watch('src/scss/**/*.scss', ['sass']);
});
Then in your 'default'
gulp.task('default', function(callback) {
runSequence(['sass', 'browserSync', 'watch'],
callback
)
})
Now run gulp watch :)
Upvotes: 0
Reputation: 846
I was missing a return of when it was done, making Gulp understand when it should call the next task, it's documented in Gulp Docs
I used the stream to make gulp understand when each task end, like this:
gulp.task('somename', function() {
var stream = gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
return stream;
});
Upvotes: 4