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

Adding files to gulpfile.js with ASP.NET 5
Karma/jasmine testing error: “Uncaught TypeError: Unexpected anonymous System.register call.”
when I run (npm install gulp-msbuild) inside the Package Manager Console (VS2015), it throws warning
Gulp-kss issues
Browserify - accurate build log in terminal with o: --colors, silimar to webpack
Minimist not finding arguments
Gulp.js. Same task on watch, with different parallel tasks
Split css for different devices
Gulpfile not working when module.exports references a Gulp task not a function?
Use gulp to process bowser files
Getting an error when trying to serve the app using browser-sync
Can't Sprite using gulp.spritesmith
How can I make build variables available to all JS files in gulp?
Gulp not installed globally?
gulp-useref deep folders error
use gulp+browserify+reactify, can't emit exit when got a ReactifyError

Categories

HOME
kendo-ui
locale
cxf
arcgis
crash
esxi
yuv
meson-build
jquery-select2
obd-ii
box-api
rename
mamp
opendaylight
popup
jquery-easyui
project-reactor
civicrm
beacon
bootstrap-datetimepicker
sonarlint
ajaxcontroltoolkit
deployment-descriptor
tftp
multiple-inheritance
uibarbuttonitem
osgi-bundle
spring-data-gemfire
ng2-bootstrap
fastadapter
zimbra
http-proxy
gstreamer-1.0
console.readline
matrix-multiplication
niagara-ax
angular-fullstack
runtime-permissions
bioperl
intermediate-language
sharpssh
richtext
trusted-computing
fileopendialog
alarmmanager
turbolinks
joystick
jspx
require-handlebars
jigsaw
hoare-logic
angularfire
user-profile
archiva
pebble-js
web-optimization
hana-sql-script
ooad
nslocalizedstring
maven-antrun-plugin
recode
sdkman
taverna
transport
eggplant
cakephp-2.6
xmla
xcode5
dojox.grid
fedena
conditional-comments
react-os
nsurlrequest
formbuilder
time-frequency
switchpreference
django-tests
lettuce
enquire.js
internet-radio
ekevent
backbone-views
infinity.js
hypertable
aspmenu-control
idtabs
cgaffinetransform
cryptolicensing
nstoolbar
database-agnostic
uccapi
dojox.gfx
pixel-bender
time-management
retrospectiva
memory-consumption

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