When I try to gulp watch, I get the following error:
[15:46:56] Task never defined: watch
[15:46:56] To list available tasks, try running: gulp --tasks
Here are my functions from gulpfile.js.
function watchChanges(cb) {
watch(['assets/js/*.js'], parallel(buildSiteJS));
watch(['assets/scss/style.scss', 'assets/scss/**/*.scss'], parallel(compileStyleSCSS));
watch(['**/*.php'], parallel(reloadPage));
cb();
}
With the ending export statement like:
exports.default = parallel(serveBrowserSync, mainTasks, watchChanges);
I'm not sure if the syntax is incorrect causing the 'task never defined' error and I've tried a lot of searching online and not got anywhere with it.
Let me know if you need to see more of the gulpfile.js.
Gulp: 4.0.2
Gulp Babel: 8.0.0
Using Gulp 4 and the recipe for splitting my tasks into multiple files using gulp-hub throws this error just from attempting to load the task files. The task file is super simple just wanted to test everything was working.
I found this reference on Undertaker on Github for the get function, but I really don't understand what they are trying to say, and it seems like gulp-hub is supposed to be doing the lifting.
Anyone else run into this and know how to solve it?
Gulp File
'use strict';
var gulp = require('gulp');
var HubRegistry = require('gulp-hub');
// Load some files into the registry
var hub = new HubRegistry(['gulp/tasks/*.js']); // only one file help.js
// Tell gulp to use the tasks just loaded
gulp.registry(hub);
Help Task - /gulp/tasks/help.js
'use strict';
var gulp = require('gulp');
gulp.task('help', []);
Error Thrown
$ gulp help
[01:36:37] Loading gulp\tasks\help.js
D:\projects\app\node_modules\undertaker\lib\helpers\validateRegistry.js:36
throw err;
^
AssertionError: Custom registry must have `get` function
at validateRegistry (D:\projects\app\node_modules\undertaker\lib\helpers\validateRegistry.js:28:5)
at Gulp.registry (D:\projects\app\node_modules\undertaker\lib\registry.js:17:3)
at Object.<anonymous> (D:\projects\app\gulpfile.js:11:6)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
You are probably running gulp-hub#0.8.0 which is the version that is currently published to npm and is designed for gulp 3.x.
For gulp 4.x you need to install gulp-hub from one of the development branches on GitHub. Currently there's 4.0 and registry-init.
The 4.0 branch doesn't work right now because it fails the registry validation of undertaker.
The registry-init branch seems to work however. You can install it like this:
npm uninstall gulp-hub
npm install --save-dev frankwallis/gulp-hub#registry-init
Update on 12.10.2016
I work with yeoman-fountainjs and in their package.json is the following dev-dependency definied, which works like a charm:
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
I ran into the same error but it was because I failed to expose the tasks correctly to Gulp.
At first I was using CommonJS like this in my help.js file and getting the same error:
exports.help = help;
So I changed it to a Gulp task and it worked:
gulp.task("help", help);
I have a website based on Jekyll and I want to make it as fast as possible. My goal is to have a gulp task that builds the Jekyll site, generates the critical CSS and minifies the HTML.
Part of my gulpfile looks something like this:
gulp.task("jekyll", function (gulpCallBack){
var spawn = require("child_process").spawn;
var jekyll = spawn('jekyll', ["build"], {stdio: "inherit"});
jekyll.on("exit", function(code) {
gulpCallBack(code === 0 ? null : "ERROR: Jekyll process exited with code: "+code);
});
});
gulp.task("html", function() {
gulp.src("./_site/index.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site"))
gulp.src("./_site/*/*.html")
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest("./_site/./"))
});
gulp.task("critical", function() {
critical.generate({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
minify: true,
extract: true,
width: 320,
height: 480
});
critical.inline({
base: '_site/',
src: 'index.html',
dest: 'index.html',
minify: true
});
})
If I run the tasks separately, gulp jekyll, then gulp html and finally gulp critical everything works fine and as I want to. Since I am lazy I do not want to run three tasks manually each time. My idea was to run them synchronously/one after the other by using the following code.
gulp.task("jekyll", function (gulpCallBack){};
gulp.task("html", ["jekyll"], function() {};
gulp.task("critical", ["html"], function() {};
I thought, I just could run gulp critical which waits for the html task to finish which waits for the jekyll task to finish. The site got build and minified but the critical CSS is not injected. The task run in the correct order.
➜ jonas.re git:(master) ✗ gulp critical
[19:21:18] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:21:18] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:21:18] Finished 'jekyll' after 528 ms
[19:21:18] Starting 'html'...
[19:21:18] Finished 'html' after 5.37 ms
[19:21:18] Starting 'critical'...
[19:21:18] Finished 'critical' after 1.63 ms
Again, by running them manually after each other, it works perfectly.
I heard of runSequence but I have to return a stream which I have no idea of to do that for the jekyll task (if that is even possible?). And maybe the error something different since this works:
➜ jonas.re git:(master) ✗ gulp jekyll
[19:27:49] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:49] Starting 'jekyll'...
Configuration file: /Users/j.reitmann/dev/jonas.re/_config.yml
Source: /Users/j.reitmann/dev/jonas.re
Destination: /Users/j.reitmann/dev/jonas.re/_site
Generating...
done.
Auto-regeneration: disabled. Use --watch to enable.
[19:27:50] Finished 'jekyll' after 549 ms
➜ jonas.re git:(master) ✗ gulp html
[19:27:54] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:54] Starting 'html'...
[19:27:54] Finished 'html' after 5.56 ms
➜ jonas.re git:(master) ✗ gulp critical
[19:27:57] Using gulpfile ~/dev/jonas.re/gulpfile.js
[19:27:57] Starting 'critical'...
[19:27:57] Finished 'critical' after 1.66 ms
I would be very thankful for any help. You can have a look for my whole gulpfile here.
The problem come from critical. I get it working like this :
_config.yml
As we need style.scss to be parsed in order to generate a css for crititical.
Remove /css/style.scss from the exclude array.
style.scss
./_sass path is useless a it is the default path for Jekyll sass processor.
In order to be processed, this file needs an empty front matter.
---
---
#import "_assets/fonts.scss";
#import "_assets/mixins.scss";
#import "_assets/reset.scss";
#import "_assets/colors.scss";
#import "_assets/syntax-highlighter.scss";
#import "_modules/header.scss";
#import "_modules/content.scss";
_includes/head.hmtl
Critical needs a link to original style sheet.
Remove the css loading script and replace it with
<link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
The loading script will be inserted by critical.
gulpfile.js
You can now chain yours tasks. Note that I've changed the critical method to generateInline.
gulp.task("jekyll", function (gulpCallBack){
...
gulp.task("html", ["jekyll"], function() {
...
gulp.task("critical", ["html"], function() {
critical.generateInline({
base: '_site/',
src: 'index.html',
dest: 'css/critical.css',
htmlTarget: 'index.html',
minify: true,
extract: true,
width: 320,
height: 480
});
})
Bim !
It seems that there is not really a way to run gulp tasks synchronous. But your shell is able to run commands synchronous with the && operator.
I now use a gulp module called gulp-shell. Here is how my code looks:
gulp.task('build', shell.task([
'gulp jekyll && gulp critical && gulp html'
]));
So I am able to just run gulp build to run the gulp tasks jekyll, critical and html in order. Though this works, I am not really happy with this solution. If anybody knows a better solution, please let me know.
I typically use the _includes folder within Jekyll to do the inlining for me. All you have to do is gulp.dest('_includes') — you can call gulp.dest() multiple times in a row.
Sample task in gulpfile
Then add a line to your main page template in Jekyll:
<style type="text/css">{% include main.min.css %}</style>
See the Jekyll source code in context
In a simple gulp + browser-sync project here, all file add/delete/change are working correctly, but when I delete a directory from app gulp/browser-sync throws an error like below:
events.js:72
throw er; // Unhandled 'error' event
^
Error: watch EPERM
at errnoException (fs.js:1030:11)
at FSEvent.FSWatcher._handle.onchange (fs.js:1048:26)
I am not sure where to look for possible problems. If someone can point me to correct direction.
The problem here was an outdated version of BrowserSync.
Updating to the latest version will solve this issue.
When using Chrome I am getting an error via the Mocha test runner, captured as part of afterEach with this.currentTest.err.
I am compiling coffeescript with browserify with the debug option using the awesome coffeeify plugin. This produces a single compiled file bundle.js with a sourceMappingURL=data:... that allows me to view and debug the original coffeescript directly.
Unfortunately when I access the err.stack in the afterEach Mocha hook, the stack contains references to bundle.js and not the corresponding .coffee files, which would be much more useful.
Here is some sample code with browserify.
First, installing it (for convenience) with npm:
$ npm install -g browserify; npm install coffeeify
x.coffee
try
throw Error("Thrown.")
catch err
console.log err.stack
Convert to x.js with:
$ browserify -t coffeeify x.coffee -d > x.js
x.html
<html>
<head>
<script src='x.js'></script>
</head>
<body></body>
</html>
If one opens this in Chrome the dev tools will show x.js, x.coffee (from the sourceMapURL) and x.html.
When we run this HTML page we get the following output to the console:
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.js:5:9)
at i (file://localhost/Users/bmh/tmp/x.js:1:219)
at err (file://localhost/Users/bmh/x.js:1:382)
at file://localhost/Users/bmh/tmp/x.js:1:400
What we would expect is to have the trace refer to the .coffee file, looking something like this (which I am making up here for illustrative purposes):
Error: Thrown.
at Error ()
at Object. (file://localhost/Users/bmh/tmp/x.coffee:2:5)
Has anyone had any success converting the error stack to one that refers to the items at their source map locations?
I'm not sure about coffeeify, but the source-map-support module adds .stack support for code bundled with browserify. Just npm install source-map-support and put require('source-map-support').install() at the top of your code.