Gulp Clock not working
I am using Gulp to do some tasks on my SCSS and CSS. Now the problem is that when I run Gulp it starts the clock but nothing happens: no css is generated. I triple checked the folder structure and it 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 lot of searching some people have it just PHPStorm that the updated file is not showing. First you need to access the file. This is similar to caching.
When I save the .scss file and immediately open it with notepad, or access the php file that uses that file, it is also updated in PHPStorm.
source to share
Try this
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 execute your sass files, gulp.watch
works great.
So basically what I'm doing here is I just tell gulp to look at all the sass files in that folder and whenever there is a change, just run the task on the given array ['sass']
.
source to share
Solution is PHPStorm setup
PHPStorm seems to use a form of file caching, so I didn't see the changes reflected. The solution can be found here!
How to prevent phpstorm file from reloading without prompting when file changes on disk?
source to share