Livingstyleguide compile task never finishes - sass

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!

Related

How do I restart the Task Runner within visual studio?

I have a gulp task to convert my .less file to css. This works fine until there is a syntax error in the less file. This causes gulp to crash and the Task Runner Explorer stops and I can't restart it. I have to unload/reload the project to change a syntax error.
Any ideas how to restart the Task Runner Explorer?
I'm using visual studio 2017 and in the task runner explorer you can right click the task I wan't to run and there you can press run to start that task
Pic: https://i.stack.imgur.com/gHYFy.png
Tasks can be started and restarted any time. Non-terminating tasks, like "watch" tasks, can be started multiple times and will run in parallel, unless terminated. One way to start a task is to double click on it in the list. There is also a "run" command in the context menu.
Terminating a task
I had this same question today, but for other reasons. Apparently closing the associated console window terminates the task.
I remember in some older version of Visual Studio I had to open Task Runner Explorer manually, otherwise the tasks would not start.
Regarding syntax errors
To save yourself from the trouble of restarting a task, add some type of error handling. There are probably more solutions to this, but I used this one. Here's a shorter version:
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const lessCompiler = require('gulp-less');
const lessFiles = 'Styles/**/*.less';
const compileLessTaskName = 'compile-Less';
gulp.task(compileLessTaskName, function () {
return gulp.src(lessFiles)
// Calling plumber at the start of the pipeline. In case of error, this stops
// the task without killing the whole process.
.pipe(plumber(function (error) {
console.log(error.message);
this.emit('end');
}))
.pipe(lessCompiler())
.pipe(gulp.dest('wwwroot/css'));
});
gulp.task('watch', function (asyncCallback) {
gulp.watch(lessFiles, [compileLessTaskName]);
asyncCallback();
});

Is it possible to write (via sass commands or compiler directives) code such that SASS will output the final values of all variables to a JSON file?

How can I compile a SASS file and have it output all the final values of every variable in a json file
I asked a similar question before and someone on here thought I was trying to get you guys to do my job. I'm just trying to see if it's possible at all before I go down a path that ultimately is a waste of time. If it is possible, I don't know the magic sauce to get started.
I have CMS themes that are built on bootstrap-sass, and other sass frameworks, and I'd like my CMS to be able to access variables that we use in the SASS files as well. Seems to me that if when I compiled the SAAS file, I got a CSS, MAP, and JSON file, I'd be all set.
I could write this as some kind of mixin, but even then, I'd need to be able to get
A list of all variables
a command to output json to the dist folder.
Any pointers on these items are appreciated.
If you're using Gulp to compile your SASS there is a plugin that accomplishes this.
https://www.npmjs.com/package/gulp-sass-json
After installing it, and given the following Gulpfile.js:
var sassJson = require('gulp-sass-json');
var paths = {
'json_root' : './bundles/theme/scss/variables/*.scss',
'json_dest' : './json'
};
var sassOptions = {
errLogToConsole: true,
outputStyle: 'expanded'
};
gulp.task('sass-json', function () {
return gulp
.src(paths.json_root)
.pipe(sassJson())
.pipe(gulp.dest(paths.json_dest));
});
gulp.task('default', ['sass-json']);
Given the SCSS file variables/colors.scss:
$red: #ed1414;
$blue: #0351e0;
$green: #259208;
Outputs the following json at ./json/colors.json
{
"red": "#ed1414",
"blue": "#0351e0",
"green": "#259208"
}
So in order to have it re-output it every time you compile, you can just create a task that encompasses this task as well as your normal style compile task.

Gulp Sass Watch Run only changed and dependencies

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.

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.

Is there a gulp plugin to run Laravel Artisan tasks?

I haven't been able to find a gulp plugin whose purpose is to simply run Laravel Artisan tasks. It seems to me this would be useful.
I imagine it would be quite trivial, which makes me think it must exist.
I looked at Laravel Elixir but this doesn't seem to do what I want.
Not strictly on topic, but the problem at hand follows.
I briefly played with gulp-shell, gulp-run, and #eddieajau/shell, and for a particular task don't seem to be having any luck: the command which runs just fine when run manually from the console seems to hang. ps shows it is running but apparently doing nothing. I'm probably missing something simple, but invoking shell commands from node always seems fiddly.
My current code in Coffee is this:
gulp.task 'twig', ->
shell = require '#eddieajau/shell'
shell.setLogger console.log
return shell.exec 'php', ['artisan', 'twig:lint'],
cwd: __dirname
This is supposed to return a promise, which gulp.task is supposed to notice and deal with. But when I run it it appears to hang.
I don't pretend to know Coffeescript, however gulp-shell is blacklisted (meaning it doesn't do things "the gulp way").
gulp-exec may possibly do what you're looking for, however you don't specifically need that for a direct shell call. Here's what I have in my gulpfile (non-coffeescript) to run php artisan ide-helper:generate after any of my models change:
var exec = require('child_process').exec;
gulp.task('generate:ide-helper', function (cb) {
exec('php artisan ide-helper:generate', function (err, stdout, stderr) {
console.log(stdout);
console.log(stderr);
cb(err);
});
});

Resources