Hello, I'm having a problem running gulp on my subtheme. At first, I thought it had to do with my upgrading the Radix module from 7.x-3.5 to 3.6, but then I remembered I actually had the same issue on 3.5. Terminal output is below. The result is the same if I run either gulp or gulp serve. It compiles the css successfully but then it doesn't watch for changes in the sass files, and it doesn't serve browsersync:

$ gulp
[21:09:21] Using gulpfile ~/Sites/sixtofive/sites/all/themes/smallstep/gulpfile.js
[21:09:21] Starting 'css'...
[21:09:21] Starting 'fonts'...
[21:09:21] Starting 'watch'...
[21:09:21] Finished 'watch' after 132 ms
[21:09:21] Finished 'fonts' after 163 ms
^C
$

If I put an error at the very end of my main sass file and run gulp css, it makes it to the end (but it doesn't print a 'finished' message if it's supposed to):

$ gulp css
[21:24:17] Using gulpfile ~/Sites/sixtofive/sites/all/themes/smallstep/gulpfile.js
[21:24:17] Starting 'css'...
[21:24:17] gulp-notify: [Gulp] Error: scss/smallstep.style.scss
  128:1  expected ':' after $foobar in assignment statement
$

Oddly, running gulp watch appears to do the initial compile, and will watch for one change, but not a second change:

$ gulp watch
[21:29:52] Using gulpfile ~/Sites/sixtofive/sites/all/themes/smallstep/gulpfile.js
[21:29:52] Starting 'watch'...
[21:29:52] Finished 'watch' after 73 ms
[21:29:57] Starting 'css'...
[21:29:58] gulp-notify: [Gulp] Error: scss/smallstep.style.scss
  128:8  most def after "@foobar1", was: ""
^C
$

Since it can compile the css, this isn't a huge problem for me, but it would be nice to have watch and browsersync working. Any help would be appreciated. Thanks!

Comments

ridgek created an issue. See original summary.

shadcn’s picture

shadcn CreditAttribution: shadcn at Chapter Three commented

if there's an error in your file, gulp will stop execution and display the error. (If will not display the second error).

What happens if there's no error? I assume if compiles successfully and you can see the changes when you refresh your browser?

ridgek’s picture

ridgek CreditAttribution: ridgek commented

Yes, css compiles successfully one time only when running gulp or gulp serve, and I can see changes when I refresh the browser. But then I have to break the tasks with Ctrl-C or it hangs (without reporting any errors) and does nothing after. The watch and serve tasks don't seem to get run by Gulp and aren't reporting any errors. I see that the css task has a setting for the sass plugin, errLogToConsole: true. Are there any other error reporting settings I might have missed?

Eram Fatima18’s picture

Eram Fatima18 CreditAttribution: Eram Fatima18 at TO THE NEW commented

Hello. You can use gulp task for it.
Consider you have two folder src and dist
src for scss files
dist for css files

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

gulp.task('styles', () => {
return gulp.src('src/scss/*.scss', { sourcemaps: true })
.pipe(sass().on('error', sass.logError))
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(gulp.dest('dist/css/'));
});

gulp.task('clean', () => {
return del([
'dist/css/main.css'
]);
});

gulp.task('watch', () => {
gulp.watch('scss/**/*.scss', (done) => {
gulp.series(['clean', 'styles']), (done);
});
});

gulp.task('default', gulp.series(['clean', 'styles']));

Message after using gulp in terminal-
[22:58:26] Starting 'default'...
[22:58:26] Starting 'clean'...
[22:58:26] Finished 'clean' after 32 ms
[22:58:26] Starting 'styles'...
[22:58:26] Finished 'styles' after 402 ms
[22:58:26] Finished 'default' after 443 ms