Using Jekyll with Gulp and Livereload - jekyll

This question has hinted me on how to run Jekyll with Gulp.
It works fine except I’m unable to trigger livereload (but it runs without errors).
My knowledge of Node is limited, so I’m probably missing something...
var gulp = require('gulp');
var refresh = require('gulp-livereload');
var lr = require('tiny-lr');
var server = lr();
gulp.task('jw', function(){
var spawn = require('child_process').spawn,
j = spawn('jekyll', ['-w', 'build']);
j.stdout.on('data', function (data) {
console.log('stdout: ' + data); // works fine
refresh(server); // doesn’t trigger
});
});

gulp-livereload requires files piped into it via gulp.src() or other vinyl input sources. In this case, I recommend adding gulp-watch to watch for the files that Jekyll writes, and reload based on that.
It would look something like this:
var gulp = require('gulp');
var refresh = require('gulp-livereload');
var watch = require('gulp-watch');
var lr = require('tiny-lr');
var server = lr();
gulp.task('jw', function(){
var spawn = require('child_process').spawn,
j = spawn('jekyll', ['-w', 'build']);
j.stdout.on('data', function (data) {
console.log('stdout: ' + data); // works fine
});
watch({glob: '/glob/path/to/jekyll/output'}, function(files) {
// update files in batch mode
return files.pipe(refresh(server));
});
});
As long as Jekyll only rewrites changed files, this will work perfectly. However, if it overwrites everything, then livereload will do little more than refresh the browser on every change.

You can trigger livereload at the end of the build, making it reload the page so you won't have multiple refresh :

Related

Gulp task with prerequisite does not start

I have a task which depends on a previous task which merges multiple streams and return the resulting stream. The task which depends on it never seems to run.
This is my dependency:
var gulp = require('gulp');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var less = require('gulp-less');
var minifyCss = require('gulp-minify-css');
var merge = require('gulp-merge');
var cached = require('gulp-cached');
gulp.task('css:minify', function () {
var bootstrapLess = gulp.src(['plugins/bootstrap/less/bootstrap.less'])
.pipe(cached('bootstrap less'))
.pipe(less())
.pipe(gulp.dest('plugins/bootstrap/less/'));
var aceLess = gulp.src(['plugins/ace-admin/less/ace.less'])
.pipe(cached('ace less'))
.pipe(less())
.pipe(gulp.dest('plugins/ace-admin/less/'));
var ace = gulp.src(files.css.ace)
.pipe(cached('ace min'))
.pipe(sourcemaps.init())
.pipe(minifyCss())
.pipe(concat('aes.ace.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('Content/'));
var css = gulp.src(files.css.all)
.pipe(cached('aes.min'))
.pipe(sourcemaps.init())
.pipe(minifyCss())
.pipe(concat('aes.all.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('Content/'));
console.log('css minification in progress');
return merge(bootstrapLess, aceLess, ace, css);
});
The task which uses them is as follows:
gulp.task('test', ['css:minify'], function () {
console.log('testing');
});
I get the following output:
[14:32:53] Starting 'css:minify'...
css minification in progress
Process terminated with code 0.
The css:minify task never reports that it has finished, and the test task never logs anything to the console. My expectation was that the dependency would return a stream, and that the test task would run when the stream finished. What have I done wrong which prevents this from happening?
Edit: it seems that the problem is the concat within the ace and css sections of the css:minify task (because if I comment out those lines everything works fine), but I still can't see why it prevents the task from working.
It turns out that the problem was something to do with gulp-merge. When I changed it to instead use merge-stream everything worked as expected.

Watchify does not update when using Webstorm

I am using watchify with gulp. When using notepad++ to edit source code, watchify works fine, but it does nothing when I edit with Jetbrain Webstorm 8.
Here is my gulpfile:
var browserify = require('browserify');
var watchify = require('watchify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
gulp.task('watchify', function(){
var bundler = browserify('./app/js/app.js', {
debug: true,
cache: {},
packageCache: {}
fullPaths: true
});
var watcher = watchify(bundler);
return watcher.on('update', function () { // When any files update
console.log('Updating!');
var updateStart = Date.now();
watcher.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js'));
});
Is there anyway to make watchify work with Webstorm ?
Thanks for any help.
I posting this just for the sake of future searchers - I think the cause of that problem is Enabled "Use safe write". After disabling problems seems to disappear.
https://github.com/substack/watchify/issues/179

gulp-ruby-sass not working with gulp-watch

I am trying to watch scss files and only recompile them when they change. For ease of deployment, I want to use gulp-ruby-sass instead of gulp-sass.
I want to do this but the task will hang on "dependency seen"
// Doesn't work
var gulp = require('gulp')
var debug = require('gulp-debug')
var sass = require('gulp-ruby-sass')
var watch = require('gulp-watch');
watch("static/**/*.scss")
.pipe(debug({title:'dependency seen'}))
.pipe(sass())
.pipe(debug({title:'sassed'}))
The script works when I use vanilla gulp.src
// Works
var gulp = require('gulp')
var debug = require('gulp-debug')
var sass = require('gulp-ruby-sass')
var watch = require('gulp-watch');
gulp.src("static/**/*.scss")
.pipe(debug({title:'dependency seen'}))
.pipe(sass())
.pipe(debug({title:'sassed'}))
It also works when I use gulp-sass instead of gulp-ruby-sass
// Works
var gulp = require('gulp')
var debug = require('gulp-debug')
var sass = require('gulp-sass')
var watch = require('gulp-watch');
watch("static/**/*.scss")
.pipe(debug({title:'dependency seen'}))
.pipe(sass())
.pipe(debug({title:'sassed'}))
This tells me that there is something wrong with the interaction between gulp-watch and gulp-ruby-sass. Any ideas?
I found that gulp-ruby-sass-ns doesn't hang. The library doesn't seem quite as well supported however so I will leave this question open to see whether anyone else has any input
Install Gulp-Plumber and call it right before you compile your sass.

Getting duplicate change notifications in gulp from Gaze when watching multiple file sets

We're using gulp with Gaze to watch files/directories for changes. We need to watch two separate sets of files and run different tasks for each set if there are changes.
The problem is that changes in one file set are triggering both watches.
Here's a minimal gulpfile which exhibits the behavior
'use strict';
var gulp = require('gulp'),
Gaze = require('gaze').Gaze;
gulp.task('watch', function () {
function watch(paths, taskToRun) {
new Gaze(paths, {mode: 'poll'}).on('all', function(event, filename) {
console['log']('Change detected - in '+filename+' for event '+event+' for task watcher '+taskToRun);
});
}
watch(['foo/**/*.js'], 'jstask1');
watch(['bar/**/*.js'], 'jstask2');
});
I set it up by running
npm install gulp gaze
touch foo/a.js
touch bar/b.js
gulp watch
In a separate terminal I ran
touch foo/a.js
and I get
[12:51:33] Using gulpfile ~/tmp/gaze/gulpfile.js
[12:51:33] Starting 'watch'...
[12:51:33] Finished 'watch' after 13 ms
Change detected - in /home/foo/tmp/gaze/foo/a.js for event changed for task watcher jstask1
Change detected - in /home/foo/tmp/gaze/foo/a.js for event changed for task watcher jstask2
Both jstask1 and jstask2 were triggered. I would expect only the jstask1 should have fired since jstask2's path doesn't match.
We're using Gaze as we're running this for development inside of vagrant on multiple platforms (OSX and Linux) using on VirtualBox using the VirtualBox file sharing for the source directories. We had problems with other methods properly detecting the addition and removal of files. This particular test was done directly on my linux box (no vagrant involved) but we see the same issues inside of vagrant as well.
Is this a bug or or am I setting up Gaze wrong?
Figured out a workaround for the issue. Still seems like the behavior of Gaze isn't correct, but if I use the minimatch library directly within the event callback, I can check if the filename matches one the paths I really wanted for that particular task. If it matches, then I can run the desired task and otherwise ignore the event.
Here's the updated example from above
'use strict';
var gulp = require('gulp'),
Gaze = require('gaze').Gaze,
Minimatch = require("minimatch").Minimatch;
gulp.task('watch', function () {
function watch(paths, task) {
//check for bare strings instead of arrays
if(typeof paths == 'string') {
paths=[paths];
}
var cwd=process.cwd();
var len=paths.length;
var minimatchPaths=[];
for(var i=0; i < len; i++) {
var path = paths[i];
minimatchPaths.push(new Minimatch(cwd + '/' + path));
}
function checkPaths(filename) {
var len=minimatchPaths.length;
for(var i=0; i < len; i++) {
var minimatchPath = minimatchPaths[i];
if(minimatchPath.match(filename)) {
return true;
}
}
return false;
}
new Gaze(paths, {mode: 'poll'}).on('all', function(event, filename) {
if(checkPaths(filename)) {
console.log(event+' detected on '+filename+' for '+ task);
}
});
}
watch(['foo/**/*.js'], 'jstask1');
watch(['bar/**/*.js'], 'jstask2');
});

GulpJS: Livereload not refreshing for Sass changes (works for JS changes)

My gulpfile watches for changes to Sass files then should fire a refresh for the lr server. The watch event is working fine as the Sass is being compiled on each change, however the browser is not refreshing. I am using gulp-ruby-sass to compile the Sass.
I have an almost identical task that watches JS files then fires a browser refresh, this works fine.
Below is the (abridged) gulpfile.js. I have included the task scripts as this currently works the same way as styles task should do.
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var bourbon = require('node-bourbon').includePaths;
var newer = require('gulp-newer');
var lr = require('tiny-lr');
var lrserver = lr();
var refresh = require('gulp-livereload');
gulp.task('scripts', ['vendorScripts', 'libScripts'], function () {
return gulp.src([paths.js])
.pipe(newer(paths.destJS + '/script.js'))
.pipe(concat('script.js'))
.pipe(gulp.dest(paths.destJS))
.pipe(refresh(lrserver));
});
gulp.task('styles', function () {
return gulp.src(paths.sass)
.pipe(newer(paths.destCSS))
.pipe(sass({loadPath: require('node-bourbon').includePaths}))
.pipe(gulp.dest(paths.destCSS))
.pipe(refresh(lrserver));
});
gulp.task('watch', function () {
gulp.watch(paths.jsAll, ['scripts']);
gulp.watch(paths.sass, ['styles']);
gulp.watch(paths.html, ['html']);
gulp.watch([paths.img, '!' + paths.app + '/**/images/sprites{,/**}'], ['images']);
gulp.watch(paths.sprites, ['sprites']);
});
I have tried removing both the newer plugin and the node-bourbon require but it has no effect on this issue.
As a workaround, in response to soenguy's comments:
Create a new task which itself first calls the styles task:
gulp.task('goRefresh', ['styles'], function () {
return gulp.src([paths.app], { read: false })
.pipe(refresh(lrserver));
});
Then for the watch task change the Sass watch to:
gulp.watch(paths.sass, ['goRefresh']);
This is far from an ideal solution, but at least browser refreshing works.