Gulp Sass Watch Run only changed and dependencies - sass

I am trying to figure out how to watch SCSS files for changes and then run task (gulp-ruby-sass) only for those that changed(added,removed) and their dependencies (#import).
My watch task code is:
gulp.task('sass-watch', function(){
gulp.watch('dev/scss/*.scss', ['sass']);
});
My "sass" task code is:
gulp.task('sass', function(event) {
return sass('dev/scss/*.scss')
.pipe(changed('dist/css'))
.on('error', sass.logError)
.pipe(gulp.dest('dist/css'));
});
Sice sass take all files in folder anyway, this cannot work as I want to, but I noticed interesting thing. In my command-line I get following logs, when "sass-watch" is triggered by saving style2.scss file.
[13:38:01] Using gulpfile C:\1HLAVNI\Lukas\Webdesign\lukasradek\gulpfile.js
[13:38:01] Starting 'sass-watch'...
[13:38:01] Finished 'sass-watch' after 42 ms
[13:38:03] Starting 'sass'...
[13:38:03] write ./\style_combined.css
[13:38:03] write ./\style2.css
[13:38:03] Finished 'sass' after 416 ms
Something logs write style_combined.css and style2.css which is exactly how the dependencies are. (styl2.scss is imported to style_combined.scss). So this means, that something knows how the dependencies are set. Problem is, that I don't know what is that something. I cannot get that info elsewhere, only in final log. If I can get that info somewhere in code, I would be able to use for triggering the task only for changed files and dependencies.
Any idea, what might emit those logs?
I tried to strip my code to bare minimum and the logs are still present even when I remove the content of "sass" task. The logs disappeared after I removed ['sass'] trigger from gulp.watch.

Related

Mean.js - Dependancies Missing

I am using the MeanJS (https://github.com/meanjs/mean) framework, running on Heroku. When I try to run the application I get errors like:
Error: Cannot find module 'eslint-config-airbnb/legacy'
I am running in production mode (NODE_ENV=production).
The question I have is, it seems like gulpfile.js (when running the task prod) calls the task lint which calls the task eslint. But when I look at the packages.json file, I see that eslint-config-airbnb is only included in the devDependancies (and not dependancies). Now I tired to add it to dependancies, but I still get the same error about the missing module.
I'm new to MEAN.js, so I appreciate any help.

Laravel Elixir - Gulp watch not finishing until terminal gets focus

I am using Laravel Elix and Gulp (on Windows 8) to combine and compile my Angular.js and SCSS files. Se the code bellow:
var elixir = require('laravel-elixir');
require('./tasks/angular.task.js');
require('./tasks/bower.task.js');
require('laravel-elixir-livereload');
elixir.config.js.outputFolder = 'public/js/';
elixir(function(mix){
mix
.sass('app.scss')
.bower()
.angular('resources/assets/angular/');
});
The problem is that when I am running gulp watch the combined all.js file will not update until i click the terminal window (give it focus). It's showing that the gulp has finished the task:
[13:26:45] Finished 'angular in resources/assets/angular/' after 26 ms
After reading previous comments, I think there's still a solution that's available to use, if willing:
Going to System Settings under the Synchronization section you can set the file save on a timer when application is idle.
That way you'll have the watcher run as expected while you're typing.

Livingstyleguide compile task never finishes

I have a VERY simple test site where I'm trying to experiment with the Livingstyleguide gem (https://github.com/livingstyleguide/livingstyleguide).
The problem is that when I run livingstyleguide compile my_src_file.lsg my_dest_file.html from the command line, the process hangs and the task is never carried out. There are no errors logged to the terminal window, so I'm not sure how to even start debugging this.
I've tried implementing livingstyleguide via Gulp as well, and running my task to create the style guide also fails from there. That DOES output an error, the details of which are as follows:
Error in plugin 'gulp-livingstyleguide'
Message:
Command failed:
Details:
killed: false
code: 10
signal: null
This is pretty cryptic, so I'm still not even sure what's failing.
Here's my gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
var livingstyleguide = require('gulp-livingstyleguide');
gulp.task('sass', function(){
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'));
});
gulp.task('watch', function(){
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('lsg', function(){
gulp.src('scss/styleguide.html.lsg')
.pipe(livingstyleguide())
.pipe(gulp.dest('app'));
});
If I comment out the livingstyleguide() line in my gulpfile, the lsg task takes the src file and outputs it into the app directory, so I know that the paths to the files are correct, and it's just something with the plugin or permissions or something that's causing everything to fail.
Any help would be very, very appreciated!

SCSS Lint plugin for PHPStorm triggers errors in gulp-compass task

The Setup:
Using scss-lint plugin for IntelliJ-based IDEs (PHPStorm)
http://plugins.jetbrains.com/plugin/7530?pr=phpStorm
A gulp-compass task, part of a larger Gulp build process, that watches my sass (scss) dir.
https://www.npmjs.com/package/gulp-compass
NOTE:
OS: Windows 8
both tools work as expected.
The Situation:
With the scss-lint inspection active, any kind of typing activity in the editor (including simply typing a whitespace) triggers the gulp-compass task, and the terminal for said task returns 'file not found' errors along the following line:
[10:53:34] Starting 'dev-compass'...
[10:53:34] Finished 'dev-compass' after 3.58 ms
[10:53:36] File not found: E:/projects/xf/src/sass/blog_scsslint_tmp8349313806557714816.scss
[10:53:36]
[10:53:36] { [Error: Compass failed]
message: 'Compass failed',
showStack: false,
showProperties: true,
plugin: 'gulp-compass',
__safety: { toString: [Function] } }
[BS] 1 file changed (blog.css)
[10:53:46] Starting 'dev-compass'...
[10:53:46] Finished 'dev-compass' after 15 ms
write src/styles.group/blog.css
[BS] 1 file changed (blog.css)
Note: this 'error' doesn't prevent the task to perform; when I make actual changes to the .scss source files, the .css are generated properly.
Apparently, either SCSS Lint itself and/or the PHPStorm plugin generate temporary files when the inspection occurs, and promptly removes them -- presumably when the inspection finishes.
As it does so in the same directory that's being watched by the gulp-compass task... These two end up playing NYSMNYD (now you see me, now you don't).
I was hoping I could either:
set my SCSS Lint configuration file to force a different path for the temporary files, or,
set my gulp-compass task to ignore files based on a pattern such as *scsslint_tmp*.scss
But so far, I haven't found any way to do either of these.
I suppose it could be seen as just a 'cosmetic' error, since both tools do produce the desired outputs, but it results in unnecessary processing, and by filling my terminal with 'bogus' errors just make it more confusing to spot the genuine ones.
Any ideas?

Gulp.watch will not keep watching files.

I have the following code,
http://paste.ubuntu.com/6824071/
but when I run 'gulp' in cli it just runs the tasks and quits. It dosen't stay to watch the files and recompile.
Ezras-MacBook-Air:no1fitness-sandbox Ezra$ gulp
[gulp] Using file /www/no1fitness-sandbox/gulpfile.js
[gulp] Working directory changed to /www/no1fitness-sandbox
[gulp] Running 'default'...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.
[gulp] Running 'styles'...
[gulp] Finished 'default' in 8.2 ms
[gulp] Finished 'styles' in 1.85 s
Ezras-MacBook-Air:no1fitness-sandbox Ezra$
The only way I can make it do it is by removing the task around the gulp.watch function.
is this right? Are there better ways (that work)?
Then theres the warning about gulp.run, which I'm confused about as their own docs still seem to use it.
You aren't calling the watch task — you are running the default task:
[gulp] Running 'default'...
Run gulp watch to run your watch task.
I know that the question was answered right, but this post comes from Google while I was searching for my problem and the solution in my case is:
npm install gulp-watch
Hope this saves someone else time ^^
Another cause could be that the directory to watch does not contains any file. In that case 'gulp watch' stops immediately.

Resources