gulp


gulp sass watch task #import issue


I wanted to try gulp with sass and run into problems.
I have following sass directory:
main.scss //all custom styling
mixins.scss //custom mixins
variables.scss //custom variables
style.scss //file that imports all the above with bootstrap and fontawesome
When i run gulp, everything compiles and there are no errors, i get the correct sytle.min.css with all the styling included.
But then i change one of the watched files (main.scss || mixins.scss || variables.scss) I get one of the following errors: "undefined variable", "no mixin named ..." accordingly.
Also if I change and save main.scss i get no errors but none of the custom scss files get included into css, only bootstrap with fontawesome get compiled.
What is wrong with my setup?
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";
Ok, so I fixed it by adding timeout to my watch task before calling sass task:
watch([config.sassPath + '/*.scss'], function(event, cb) {
setTimeout(function(){
gulp.start('sass');
}, 1000);
});
It's either the IDE (sublime 2) on save delay or server ping problem.

Related Links

MSC Undefined Error Using Gulp In Visual Studio Code on OSX
A Gulp “process terminated with code 1”
how to enable intellisense in Visual Studio Code?
gulp dependency breaks gulp in the middle
No CSS with Gulp
gulp move files to parent directory
How to get gulp-jshint to ignore folders
Inserting specific file at index of a stream
How to pass array from gulp to other js files?
BrowserSync + Gulp with Vagrant not refreshing
gulp-tslint return undefined when required
Gulp watch only runs once
Gulp watch not working with imported files but works with main file
Gulp watch for css doesn't work
Using gulp for compiling of changed files only
How to run gulp task in visual studio code?

Categories

HOME
model-view-controller
skypedeveloper
mingw
google-docs-api
download
sdk
mediarecorder
powerquery
flowtype
zabbix
genexus
restheart
samsung-gear-s2
ethereum
activejdbc
digital
select2
osclass
saucelabs
dat.gui
template10
uipath
poisson
stack-trace
emr
keil
visual-prolog
rtos
openvms
geocomplete
sampling
perf
kofax
abide
stdin
ngrok
ng-lightning
mixed-models
wicket-tester
ape-phylo
contenteditable
rexx
taiga
inner-join
chrome-custom-tabs
niagara-ax
weld
openidm
riemann
wink
critical-section
nsalert
stripes
easy-thumbnails
gevent
racket-student-languages
scikit-image
jira-agile
hotkeys
php-java-bridge
kik
jde
treelist
radar-chart
custom-build-step
calc
music-player
gitk
jts
identifying
syncano
litedb
glog
vectordrawable
gcc-warning
service-broker
chunks
sony-xperia
touch-typing
nsq
cordova-3
launcher
grunt-contrib-connect
breeze-sharp
xts
telerik-appbuilder
django-tests
nvcc
misfire-instruction
8-puzzle
backbone-views
azure-scheduler
proj4
configurationsection
correctness
custom-cursor
php-gettext
flatten
django-admin-tools
capitalization
method-call
cinder
qprocess
focus-stealing
manuals
atmega16
jgrowl
httpbrowsercapabilities
jettison
cross-cutting-concerns
urlscan
tracd

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App