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

Material-ui not working in Safari only with Gulp-compass
Gulp loops for generate sprite by folder
Pass Parameter to Gulp Task
My default gulp task is not executing other tasks
Gulp Browserify SourceMaps
What is the purpose(s) of JavaScript build tools
gulp-jshint utters errors when using browserify
Gulp “watch” is not running the sub task “sass” on file change
Proxy URL not working with BrowserSync Gulp task
the task can't be called by watch module.
I can't get the data-uri() function to work on gulp.js to base64 an image on mac
How to inject bower dependencies in karma.conf.js file with gulp?
Getting Libsass Gulp Susy to work together
Gulp compass without config.rb
gulp-webserver: Default to index.html if available, else show directories
gulp-uglify notify on failing build

Categories

HOME
asp.net
actionscript-3
excel-formula
salesforce
gsm
casting
gaussian
mifare
cryengine
spss
ebay
kohana
country-codes
promotions
theory
digital
ndepend
kairosdb
chef-recipe
expo
tracking
hdf5
derby
logstash-configuration
airbnb
views
jq
javaagents
aws-iot
procedural-generation
windowserror
android-6.0-marshmallow
federated
recreate
semantic-ui-react
edirectory
deferred
storefront
flickr
webmock
bootcamp
certbot
motherboard
libconfig
latency
idea-plugin
tapply
pyexcel
bzip2
libzip
text-extraction
scrapinghub
denodo
dcom
boost-regex
hellosign
iban
msiexec
addressbook
copy-constructor
portaudio
alarmmanager
hdr
class-design
jira-agile
patching
django-taggit
wordpress-plugin
imageicon
transbase
first-order-logic
tooltwist
nmock
page-refresh
minko
perfect-scrollbar
strcpy
cl.exe
alpha-beta-pruning
drools-guvnor
uiblureffect
fedena
novell
sync
lwuit
image-preloader
cvi
starling-framework
autofilter
ekevent
code-complete
kademlia
exi
system.transactions
qt5.1
yii-components
tasklist
correctness
bash4
datejs
lgpl
carbon-emacs
pkcs#7
qlibrary
jettison
weak-typing

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