P
P
papa_schlumpf2015-09-21 11:32:37
JavaScript
papa_schlumpf, 2015-09-21 11:32:37

Why does gulp-watch build sass correctly only when run from an import file?

Directory structure where custom scss files are located:
main.scss //all custom styles
mixins.scss //custom mixins
variables.scss //custom variables
style.scss //import all the above files here + bootstrap with fontawesome
Gulp (on Ubuntu 14. server) watches for changes in this directory and starts watch->sass when files change, the problem is that the files compile normally only if you start watch by saving the style.scss file (where all the @import directives are ). When saving mixins or variables files, it gives an error of missing mixins or variables, respectively, if I save the main.scss file, compiles without errors, but as a result, only bootstrap and fontawesome get into the css file, custom styles are not added at all.
What could be the problem?
gulpfile.js

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  notify = require("gulp-notify"),
  concat = require('gulp-concat'),
  minifycss = require('gulp-minify-css'),
  uglify = require('gulp-uglify'),
  rename = require('gulp-rename')
  bower = require('gulp-bower')
  merge = require('merge-stream')
  watch = require('gulp-watch');

var config = {
  destPath: './dist',
  sassPath: './src/sass',
  jsPath: './src/js',
  bowerDir: './src/components'
}

gulp.task('bower', function() {
  return bower()
  .pipe(gulp.dest(config.bowerDir));
});

gulp.task('icons', function() {
  var fontawesome = gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
  .pipe(gulp.dest('./src/fonts'));

  var bootstrap = gulp.src(config.bowerDir + '/bootstrap-sass/assets/fonts/bootstrap/**.*')
  .pipe(gulp.dest('./src/fonts/bootstrap'));

  return merge(fontawesome, bootstrap);
});
 
 
gulp.task('sass', function() {
  console.log(config.sassPath);
    var stream = gulp.src([config.sassPath + '/style.scss'])
        .pipe(sass().on('error', sass.logError))
        // .pipe(concat('style.css'))
        .pipe(minifycss())
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest(config.destPath));
    return stream;
});

gulp.task('js', function() {
    var stream = gulp.src([config.bowerDir + '/jquery/dist/jquery.js', config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.js', config.jsPath + '/*.js'])
        .pipe(concat('script.js'))
        .pipe(uglify())
        .pipe(rename('script.min.js'))
        .pipe(gulp.dest(config.destPath)); 
    return stream;
});

gulp.task('watch', function(){
    watch([config.sassPath + '/*.scss'], function(event, cb) {
        gulp.start('sass');
    });
    watch([config.jsPath + '/*.js'], function(event, cb) {
        gulp.start('js');
    });
});

gulp.task('default', ['bower', 'icons', 'js','sass', 'watch']);

style.scss
@import "./variables.scss";
@import "./mixins.scss";
@import "../components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
@import "../components/font-awesome/scss/font-awesome.scss";
@import "./main.scss";

Answer the question

In order to leave comments, you need to log in

2 answer(s)
P
papa_schlumpf, 2015-09-21
@papa_schlumpf

Setting timeout to watch before calling the task helped:

watch([config.sassPath + '/*.scss'], function(event, cb) {
    	setTimeout(function(){
          gulp.start('sass');
    	}, 1000);
});

IDE sublime 2, apparently the problem was in the delay when saving the file, it becomes unavailable (blocked?) Or ping the server.

R
ROBsoer, 2015-09-25
@ROBsoer

This is a Sublime issue. He also fought her.
The solution is described on the gulp-sass plugin repository It
helps to set the atomic_save setting to true
They write that the problem is only on Windows and only in Sublime

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question