I'm trying to run a project on Ubuntu, which uses Nunjucks, and the gulp-nunjucks-render plugin is used to render the Nunjucks templates.
The developers were mainly using this project on Windows and Mac OS, so there was no issue when including files without respecting the case sensitivity, but this causes issues on Ubuntu, as it seems this plugin fails to include some files when they have a different casing in their names.
For example, I have this file: m-figures.njk, but in the code we have: {% import '../m-Figures.njk' as figures %}, in this case I get this error:
Plumber found unhandled error:
Template render error in plugin "gulp-nunjucks"
Message:
(unknown path)
Error: template not found: ../m-Figures.njk
For my gulp task it goes like this:
gulp.task("nunjucks", () => {
return gulp
.src([src_folder + "pages/**/*.njk"])
.pipe(plumber())
.pipe(
data(() =>
JSON.parse(fs.readFileSync(src_folder + "datas/dist/data.json"))
)
)
.pipe(nunjucks())
.pipe(beautify.html({ indent_size: 2 }))
.pipe(gulp.dest(dist_folder))
.pipe(browserSync.stream({match: '**/*.html'}));
});
Is there a solution I can add to my gulp task to solve this issue?
Edit
Actually, this is a global issue of gulp as gulp-sass also fails on case sensitive file systems
Below you can see simplified view of an issue. Basically, I'm able to call task1.js using gulp.series in tasks task2,3.js, but once I add same code to call task1.js in task4.js - Task never defined: task1 error gets thrown.
There are more tasks in the tasks folder than in file structure example below.
I've got three tasks,
...
/tasks
build.js
clean.js
dev.js
gulpfile.babel.js
...
all of them required in gulpfile.babel.js using the require-dir package
import requireDir from 'require-dir';
requireDir('./tasks', {recurse: true});
This allows me to call a task from clean.js at dev.js, and it works fine.
import gulp from 'gulp';
gulp.task('dev', gulp.series('clean');
But after I add same code structure at build.js.
import gulp from 'gulp';
gulp.task('build', gulp.series('clean');
it somehow breaks gulp stream (I guess), so now on any task call I get:
$gulp dev
-AssertionError [ERR_ASSERTION]: Task never defined: clean.
$gulp -v
[11:50:11] CLI version 2.0.1
[11:50:11] Local version 4.0.0
For those migrating from gulp v3 to v4 or are using gulp.task() to define tasks in gulp v4 and get this error message: Task never defined, the problem usually lies here:
Forward references
A forward reference is when you compose tasks, using string
references, that haven't been registered yet. This was a common
practice in older versions, but this feature was removed to achieve
faster task runtime and promote the use of named functions. In newer
versions, you'll get an error, with the message "Task never defined",
if you try to use forward references. You may experience this when
trying to use exports for your task registration and composing tasks
by string. In this situation, use named functions instead of string
references.
During migration, you may need to use the forward reference registry.
This will add an extra closure to every task reference and
dramatically slow down your build. Don't rely on this fix for very
long.
From gulpjs documentation re: gulp.series and gulp.parallel documentation.
Here is what that means. There are two ways to create tasks:
1. gulp.task('someStringAsTask', function() {..})
2. function myNamedFunction () {…}
When you use version 1 (gulp.task…) you cannot refer to that task by its string name until it has been registered. So you cannot do this:
exports.sync = gulp.series('sass2css', serve, watch);
// or gulp.task('dev', gulp.series('sass2css', serve, watch); doesn't work either
gulp.task('sass2css', function() {
return gulp.src(paths.sass.stylesFile)
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(paths.css.temp))
.pipe(reload({ stream: true }));
})
Results in
AssertionError [ERR_ASSERTION]: Task never defined: sass2css
That is a forward reference, composing a task (using gulp.series or gulp.parallel) and referring to a task by its string name (in the above case 'sass2css') before it has been registered. (calling "gulp.task(…..)" is the act of registering) Putting the gulp.task('sass2css',...) first fixes the problem.
If you use version two of defining a task:
function sass2css() {
return gulp.src(paths.sass.stylesFile)
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(paths.css.temp))
.pipe(reload({ stream: true }));
}
you are now using a named function to register a task and do not need to use its name as a string. So this now works:
exports.sync = gulp.series(sass2css, serve, watch);
// gulp.task('dev', gulp.series(sass2css, serve, watch); this also works
followed by (or preceded by - either works):
function sass2css() {
return gulp.src(paths.sass.stylesFile)
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(paths.css.temp))
.pipe(reload({ stream: true }));
}
The original OP used this and it worked:
import gulp from 'gulp';
gulp.task('dev', gulp.series('clean');
Noted that clean.js got imported before dev.js so that was okay.
This didn't work:
import gulp from 'gulp';
gulp.task('build', gulp.series('clean');
because the string-referenced task, 'clean' gets imported (and thus registered) after build.js where it is referenced - thus creating an illegal forward reference to a string-referenced task.
So there are two standard ways to fix this error:
Use named functions to define tasks not gulp.task('someTask',...). Then it doesn't matter the order of using those named functions when composing other tasks, i.e., when using gulp.series or gulp.parallel. And there are other advantages to using named functions, such as passing arguments, so this is the best option.
If you do use the older gulp v3 gulp.task method of creating tasks with string references, be careful to not refer to those tasks until after the task is actually created.
Also see my answer at task never defined error for fixing another problem which results in the same error message. Specifically using gulp.task('someTask', ['anotherTask'], function(){}) synatx in a gulp4 file.
The series and parallel functions of gulp 4 do not create a task definition as its README seems to suggest, but instead they both run the tasks in parameter. In order to work as intended, one need to surround the call with a closure.
So, to fix the excerpt
gulp.task('build', gulp.series('clean'));
it is necessary to add the closure:
// Older EcmaScripts:
gulp.task('build', function() { return gulp.series('clean') });
// EcmaScript 6:
gulp.task('build', () => gulp.series('clean'));
I had a similar setup where I had recursively require'd all tasks under a directory. And after updating to gulp 4 started getting error Task never defined.
I tried Pedro solution, but this caused another error:
The following tasks did not complete: default
Did you forget to signal async completion?
The solution was fairly simple for me, just import the missing tasks.
import gulp from 'gulp';
import './clean';
gulp.task('build', gulp.series('clean'));
The easiest solution might be using the official undertaker-forward-reference package:
const gulp = require("gulp");
const FwdRef = require("undertaker-forward-reference");
gulp.registry(FwdRef()); // Or gulp.registry(new FwdRef());
gulp.task("firstRegisteredTask", gulp.series("laterRegisteredTask")); // Works thanks to undertaker-forward-reference
gulp.task("laterRegisteredTask", () => {
return gulp.src("someGlob").pipe(gulp.dest("someFolder"));
});
This solution might negatively affect performance though (source):
This will add an extra closure to every task reference and dramatically slow down your build.
I have a gulp task which creates a JSON file from a YAML file and I want to use this JSON file in another task. But when I include this JSON file in the second task it says Error: Cannot find module './public/index.json'. I can see that the file is generated succesfully and if I run gulp for the second time it won't return any error. Why is this so and how can I correct it so that everything works fine in the first run?
Here's how the code looks like:
var yaml = require('gulp-yaml');
gulp.task('GenerateJSON', function() {
gulp.src("public/index.yaml")
.pipe(yaml())
.pipe(gulp.dest('public'))
});
gulp.task('GenerateIndex', function() {
var foo = require('./public/index.json');
...
});
And yes, I'm using run-sequence plugin, that's not helping either. Any help appreciated.
I think I figured out the issue. The GenerateJSON was not successfully terminating.
Adding, a return statement solved the issue.
I installed semantic ui, created a custom theme, but when I use gulp watch, the RTL watch.js loads and on every change I get the following error:
Watching source files for changes
Change detected in packaged theme
/home/vagrant/Code/angular/semantic/tasks/rtl/watch.js:109
lessPath = lessPath.replace(tasks.regExp.theme, source.definitions);
^
TypeError: Cannot read property 'replace' of undefined
at /home/vagrant/Code/angular/semantic/tasks/rtl/watch.js:109:28
which has to do with these lines:
else if(isPackagedTheme) {
console.log('Change detected in packaged theme');
lessPath = lessPath.replace(tasks.regExp.theme, source.definitions);
lessPath = util.replaceExtension(file.path, '.less');
}
I didn't change any line in the gulp files. What am I doing wrong?
There's a bug in the gulpfiles afaik. I've created a Pull Request on Github:
https://github.com/Semantic-Org/Semantic-UI/pull/3586
I'm trying to use gulp as the compiler for my rendr app, but I'm running into the issue of
500 TypeError: template is not a function
at module.exports.Backbone.View.extend.getInnerHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:191:12)
at module.exports.Backbone.View.extend.getHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:198:21)
at ViewEngine.getViewHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:75:15)
at ViewEngine.render (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:22:16)
at View.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/view.js:126:8)
at tryRender (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:639:10)
at EventEmitter.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:591:3)
at ServerResponse.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/response.js:961:7)
at /home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/router.js:87:11
at Object.module.exports.create (/home/longjeongs/thinksquareio.github.io/app/controllers/users_controller.js:5:5)
I couldn't find any examples of compiling rendr-handlebars and handlebars with gulp anywhere and thought I will try getting some help here.
I have read elsewhere that this is caused by different compiler handlebars and client handlebars version, but I believe that I have the correct ones installed. I have these dependencies installed
│ ├─┬ handlebars#2.0.0
├─┬ gulp-handlebars#3.0.1
├─┬ handlebars#2.0.0
├── rendr-handlebars#2.0.1
and my compiledTempaltes.js file shows "compiler":[6,">= 2.0.0-beta.1"]. My gulp task for handlebars does the following;
gulp.task('handlebars:compile', function () {
return gulp.src('./app/templates/**/[!__]*.hbs')
.pipe(plumber())
.pipe(handlebars({ wrapped : true, handlebars: require('handlebars') }))
.pipe(wrap('templates["<%= file.relative.replace(/\\\\/g, "/").replace(/.js$/, "") %>"] = <%= file.contents %>;\n'))
.pipe(concat('compiledTemplates.js'))
.pipe(wrap('module.exports = function(Handlebars){\ntemplates = {};\n<%= contents %>\nreturn templates \n};'))
.pipe(gulp.dest('app/templates/'));
});
I've tried installing different versions of handlebars, rendr-handlebars, and gulp-handlebars without much luck, any help will be much appreciated.
I'm using gulp with my rendr project... I made a sample app that you can check out... https://github.com/jaredrada/rendrjs-demo
There are a few problems with the browser sync which I've fixed locally- so if you copy the entire gulp setup that portion will not work. I will push my edits to the github repo.