CODEWITHSUNDEEP
javascriptcssgulpgulp-watchgulp-sass
Miguel Stevens
Miguel Stevens

Reputation: 9191

Gulp Watch not working

I'm using Gulp to dome some tasks on my SCSS and CSS. Now the problem is that when I run Gulp it's starting the watch but nothing is happening: no css is being created. I triple checked the folder structure and it's can.

This is my code:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');

gulp.task('sass', function () {
    return gulp.src('resources/assets/sass/**/*.scss')
        .pipe(plumber())
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer({browsers: ['last 2 version']}))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./public/css'))
});

gulp.task('default', function () {

    watch('resources/assets/sass/**/*.scss', function () {
        gulp.start('sass');
    });

});

Temporary Solution

After a long search with some people it's just PHPStorm that's not showing the updated file. The file has to be accessed first. It's like a sort of caching.

When I save the .scss file, and immediatly open it with notepad, or access a php file which uses the file, then it also updates in PHPStorm.

Upvotes: 3

Views: 5520

Answers (2)

Miguel Stevens
Miguel Stevens

Reputation: 9191

The solution is a PHPStorm Setting

It seems that PHPStorm uses a form of file caching, that's why I didn't see the reflected changes. The solution can be found here!

How to prevent phpstorm to reload file without prompt when file on disk is changed?

Upvotes: 1

Wadu
Wadu

Reputation: 117

Try this one

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');

gulp.task('sass', function () {
    return gulp.src('resources/assets/sass/**/*.scss')
        .pipe(plumber())
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer({browsers: ['last 2 version']}))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        .pipe(gulp.dest('./public/css'))
});

gulp.task('default', function () {

    gulp.watch('resources/assets/sass/**/*.scss', ['sass']);

});

I don't think you really need another plugin to complie your sass files, gulp.watch works just fine.

So basically what I am doing here is, I am just telling gulp to watch all the sass files in that folder and whenever there's a change, just run the task in the given array ['sass'].

Upvotes: 2

Related Questions