I'm building an e-mail generation pipeline (multiple templates) using nunjucks and json translation files. This means I need to loop over the multiple templates and the translation files, however I can't seem to get it working.
Tried adding another loop inside the templates.map(), but that doesn't seem to be working (or I'm doing it completely wrong ofcourse). It almost works, but it crashes at some point, generating only a few of the templates. The first template works, but it crashes at the second template:
The following tasks did not complete: <anonymous>
Did you forget to signal async completion?
source: https://cobwwweb.com/dynamic-tasks-gulp-4
var templates = [];
var languages = ["nl", "en"];
function generateTemplates(done) {
const tasks = templates.map((template) => {
return () => {
const langs = languages.map((lang) => {
return () =>
gulp.src(`source/templates/${template}`)
.pipe(data(function () {
return require(`./source/translations/${lang}/${template.split('.')[0] }.json`);
}))
.pipe(nunjucksRender({
path: ['source/partials']
}))
.pipe(gulp.dest('dist/' + lang));
});
return gulp.series(...langs, (seriesDone) => {
seriesDone();
})();
}
});
return gulp.series(...tasks, (seriesDone) => {
seriesDone();
done();
})();
}
I also tried generating tasks using 2 for-loops, but this only generates the last template of the array of the last language in the array (example: only en/template2 will be generated correctly). I do see in the console that the tasks are starting and finishing, but I don't see them anywhere. Maybe the loop is finished mush faster than the generation of tasks? :
var templates = fs.readdirSync('./source/templates');
var languages = ["nl", "en"];
for (var lang of languages) {
for (var template of templates) {
gulp.task(`${lang}-${template}`, function (done) {
return gulp.src(`source/templates/${template}`)
.pipe(data(function () {
return require(`./source/translations/${lang}/${template.split('.')[0]}.json`);
}))
.pipe(nunjucksRender({
path: ['source/partials']
}))
.pipe(gulp.dest(`dist/${lang}`));
});
tasks.push(`${lang}-${template}`);
}
}
gulp.task('genlang', gulp.series(tasks));
My folder structure:
/dist
/source
--/partials
--/templates
--/template1.html
--/template2.html
--/translations
--/en
--/template1.json
--/template2.json
--/nl
--/template1.json
--/template2.json
Fixed it myself, I needed to have some done cb's in the returns:
function generateTemplates(done) {
const tasks = templates.map((template) => {
return (doneTasks) => {
const langs = languages.map((lang) => {
return (doneLanguages) => {
gulp.src(`source/templates/${template}`)
.pipe(data(() => require(`./source/translations/${lang}/${template.split('.')[0]}.json`)))
.pipe(nunjucksRender({
path: ['source/partials']
}))
.pipe(gulp.dest('./dist/' + lang));
doneLanguages();
}
});
return gulp.parallel(...langs, (seriesDone) => {
seriesDone();
doneTasks();
})();
};
});
I'm using Gulp to automatically copy/bundle/compile my files, I basically copy the entire folder structure from the base folder (MyProject/Scripts) to wwwroot/js.
In the process of copying/processing I want to rename the output path/filenames to lowercase. I found the ChangeCase-module and the Rename-module but I can't get it to work in my setup below.
gulp.task("compile:less", function () {
return gulp.src(paths.lessSrc)
.pipe(less())
//how can I get to currentdirectory so I can use it for the rename? maybe there is another way
//.pipe(rename({ dirname: changeCase.lowerCase(??currentdir??) }))
.pipe(gulp.dest(paths.cssTarget));
});
and
gulp.task("compile:js", function () {
return gulp.src(paths.jsOrigin)
//simple copy of folders and files but how to rename all to lowercase?
.pipe(gulp.dest(paths.jsTarget));
});
You can pass a callback function to gulp-rename:
gulp.task("compile:js", function () {
return gulp.src(paths.jsOrigin)
.pipe(rename(function(path) {
path.dirname = changeCase.lowerCase(path.dirname);
path.basename = changeCase.lowerCase(path.basename);
path.extname = changeCase.lowerCase(path.extname);
}))
.pipe(gulp.dest(paths.jsTarget));
});
I have the following text in a index.html file I want to replace with gulp-replace-task:
<img src="assets/images/logo
<img style="width:100px;height:100px;" src="assets/ima
I want to make it such that all instances of "assets" are replaced with "my/stuff".
I tried the following, but it is not working:
gulp.task('default', function() {
gulp.src('./index.html')
.pipe(replace({
patterns: [
{
match: '/assets/g',
replacement: 'my/stuff'
}
]
}))
.pipe(gulp.dest('./'))
Match can be a string but if you want to use regexp remove the quotes ' around the regexp.
gulp.task('default', function() {
gulp.src('./index.html')
.pipe(replace({
patterns: [
{
match: /assets/g,
replacement: 'my/stuff'
}
]
}))
.pipe(gulp.dest('./'))
You may also use module gulp-string-replace which supports manages with regex, string or even functions.
Example:
Regex:
var replace = require('gulp-string-replace');
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace(new RegExp('#env#', 'g'), 'production'))
.pipe(gulp.dest('./build/config.js'))
});
String:
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace('environment', 'production'))
.pipe(gulp.dest('./build/config.js'))
});
Function:
gulp.task('replace_1', function() {
gulp.src(["./config.js"]) // Every file allown.
.pipe(replace('environment', function () {
return 'production';
}))
.pipe(gulp.dest('./build/config.js'))
});
I'm manipulating a set of files and I am using gulp-replacer-task to replace the content of processed files with "strings" based on the basename or path of the file currently in the pipe-line.
How do i get at the file's properties currently in the pipe-line ?
gulp.task('svgbuild', function() {
return gulp.src('./src/*.svg')
.pipe(replace({
patterns: [
{
match: /STRING_TO_MATCH/g,
replacement: function() {
// how to get the basename of the "file" in the stream;
var str = 'file.basename'
// manipulate to get replacement string based on basename
var repl = str.toUpperCase()+'-inc'
return repl;
}
}
]
}))
});
Somewhat later than I hoped, but it appears I found a solution for the problem using gulp-tap. This is what my gulpfile.js looks like:
var gulp = require('gulp'),
path = require('path'),
replace = require('gulp-replace-task'),
tap = require('gulp-tap');
gulp.task('svgbuild', function () {
return gulp.src('*.txt')
.pipe(tap(function (file) {
return gulp.src(file.path)
.pipe(replace({
patterns: [
{
match: /foo/g,
replacement: function () {
var ext = path.extname(file.path),
base = path.basename(file.path, ext);
return base.toUpperCase() + '-inc'
}
}
]
}))
.pipe(gulp.dest('build'));
}));
});
I think you must look for the solution in Node.js. Maybe this helps: https://nodejs.org/api/path.html?
The problem: I want to maintain 'collections' of files. This will help with build times, and flexibility. for example, everytime i edit my app.js file, I don't want to re-compile all my twitter bootstrap files.
I can certainly achieve this with 2 tasks and 2 watch declarations - the problem is that the tasks are identical save for the files array. Ideally I would like to pass through these as parameters in the watch declaration Is there a way to do something like the following psuedo-code?:
var files = {
scripts: [
'www/assets/scripts/plugins/**/*.js',
'www/assets/scripts/main.js',
],
vendor: [
'vendor/jquery/dist/jquery.js',
'vendor/jqueryui/ui/jquery.ui.widget.js',
'vendor/holderjs/holder.js'
],
};
...
gulp.task('js', ['lint'], function (files, output) {
return gulp.src(files)
.pipe(debug())
.pipe(concat(output))
.pipe(uglify({outSourceMap: true}))
.pipe(gulp.dest(targetJSDir))
.pipe(notify('JS minified'))
.on('error', gutil.log)
});
...
gulp.watch('scripts/**/*.js', ['lint', 'js'], files.scripts, 'app.min.js');
gulp.watch('vendor/**/*.js', ['lint', 'js'], files.vendor, 'vendor.min.js');
Flipping round another way: is to namespace the watch declaration that called the task? That way I could check which watch triggered the task, and conditional those things within the task itself.
the problem is that the tasks are identical save for the files array.
I believe lazypipe (see its gh page) is well
suited to your wants. This was an interesting problem. I'm going to try to answer both what I think you're asking about (which is satisfied by lazypipe) as well as what I think you're probably thinking about or would end up thinking about if you got past the parameterization of pipes issue.
One aspect of what we want is that we don't want to rerun jshint on files that haven't changed. Additionally, we want to keep it DRY, and we want to pick up new files in addition to changed ones.
This is tested and works for me:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var es = require('event-stream');
var lazypipe = require('lazypipe');
var gutil = require('gulp-util');
var path = require('path');
var files = {
scripts: ['src/**/*.js'],
vendor: ['vendor/**/*.js']
};
// sets up a lazy pipe that does jshint related stuff
function getJsMultiPipe(name) {
return lazypipe()
.pipe($.jshint)
.pipe($.jshint.reporter, 'jshint-stylish')
// if you don't want to fail on style errors remove/comment this out:
.pipe($.jshint.reporter, 'fail');
}
// sets up a lazy pipe that does concat and post-concat stuff
function getJsCombinedPipe(groupName, outfile) {
return lazypipe()
.pipe($.concat, outfile)
.pipe($.uglify, {outSourceMap: true})
.pipe(gulp.dest, 'build')
.pipe($.notify, {message: groupName + ' JS minified', onLast: true});
}
// sets up a pipe for the initial build task, combining the above two pipes
function getBuildPipe(groupName, outfile) {
return gulp.src(files[groupName])
.pipe(getJsMultiPipe(groupName)())
.pipe(getJsCombinedPipe(groupName, outfile)());
}
// sets up a watch pipe, such that only the changed file is jshinted,
// but all files are included in the concat steps
function setWatchPipe(groupName, outfile) {
return $.watch({
glob: files[groupName],
name: groupName,
emitOnGlob: false,
emit: 'one'
}, function(file, done) {
return file
.pipe($.debug({title: 'watch -- changed file'}))
.pipe(getJsMultiPipe(groupName)())
// switch context
.pipe(gulp.src(files[groupName]))
.pipe($.debug({title: 'watch -- entire group'}))
.pipe(getJsCombinedPipe(groupName, outfile)())
.pipe($.debug({title: 'watch -- concatted/source-mapped'}))
.pipe($.notify({message: 'JS minified', onLast: true}));
});
}
// task to do an initial full build
gulp.task('build', function() {
return es.merge(
getBuildPipe('scripts', 'app.min.js'),
getBuildPipe('vendor', 'vendor.min.js')
)
.pipe($.notify({message: 'JS minified', onLast: true}));
});
// task to do an initial full build and then set up watches for
// incremental change
gulp.task('watch', ['build'], function(done) {
setWatchPipe('scripts', 'app.min.js');
setWatchPipe('vendor', 'vendor.min.js');
done();
});
My dependencies look like:
"devDependencies": {
"jshint-stylish": "^0.1.5",
"gulp-concat": "^2.2.0",
"gulp-uglify": "^0.2.1",
"gulp-debug": "^0.3.0",
"gulp-notify": "^1.2.5",
"gulp-jshint": "^1.5.3",
"gulp": "^3.6.0",
"gulp-load-plugins": "^0.5.0",
"lazypipe": "^0.2.1",
"event-stream": "^3.1.1",
"gulp-util": "^2.2.14",
"gulp-watch": "^0.5.3"
}
EDIT: I just glanced at this again and I notice these lines:
// switch context
.pipe(gulp.src(files[groupName]))
Be aware that I believe the gulp.src API has changed since I wrote this, and that it currently doesn't switch the context when you pipe things into gulp.src, therefore this spot might require a change. For newer versions of gulp, I think what will happen is that you will be adding to the context, instead and presumably losing a small bit of efficiency.
You could write a wrapper function for tasks to capture parameters and pass it to the task. E.g. (with the help of the lodash library):
// We capture the options in this object. We use gulp.env as a base such that
// options from cli are also passed to the task.
var currentOpts = _.clone(gulp.env);
// Here we define a function that wraps a task such that it can receive
// an options object
function parameterized(taskFunc) {
return function() {
taskFunc.call(null, currentOpts);
}
}
// Here we create a function that can be used by gulp.watch to call
// a parameterized task. It can be passed an object of "task" : {options} pairs
// and it will return a task function that will capture these options
// before invoking the task.
function withArgs(tasks) {
return function() {
_.each(tasks, function (opts, task) {
currentOpts = _.extend(currentOpts, opts);
gulp.run(task);
currentOpts = _.clone(gulp.env);
});
}
}
var files = {
scripts : [ "src/**/*.js"],
vendor : ["vendor/**/*.js"
};
// We pass the task function to parameterized. This will create a wrapper
// function that will pass an options object to the actual task function
gulp.task("js", parameterized(function(opts) {
gulp.src(files[opts.target])
.pipe(concat(opts.output));
}));
gulp.task("watch", function() {
// The withArgs function creates a watch function that invokes
// tasks with an options argument
// In this case it will invoke the js task with the options object
// { target : "scripts", output : "scripts.min.js" }
gulp.watch(files.scripts, withArgs({
js : {
target : "scripts",
output : "scripts.min.js"
}
}));
gulp.watch(files.vendor, withArgs({
js : {
target : "vendor",
output : "vendor.min.js"
}
}));
});
I've faced the same problem - how to pass parameters to a gulp task. It's wierd that this feature is not builtin (it's such a common task to build, for instance, two versions of a package, parametrized task seems like a very DRY solution).
I wanted to make it as simple as possible, so my solution was to dynamically create tasks for an each possible parameter. It works ok if you have a small number of exactly defined values. It won't work for wide range values, like ints or floats.
The task definition is wrapped in a function that takes desired parameter and the parameter is appended to the task's name (with '$' between for convenience).
Your code could look like this:
function construct_js(myname, files, output) {
gulp.task('js$' + myname, ['lint'], function () {
return gulp.src(files)
.pipe(debug())
.pipe(concat(output))
.pipe(uglify({outSourceMap: true}))
.pipe(gulp.dest(targetJSDir))
.pipe(notify('JS minified'))
.on('error', gutil.log)
});
}
construct_js("app", files.scripts, 'app.min.js');
construct_js("vendor", files.vendor, 'vendor.min.js');
gulp.watch('scripts/**/*.js', ['lint', 'js$app']);
gulp.watch('vendor/**/*.js', ['lint', 'js$vendor']);
Or better, with a little change in the data definition, we invoke task generation in a loop (so if you add a new "version" in the configs array it will work right away:
var configs = [
{
name : "app",
output: 'app.min.js',
files: [ 'www/assets/scripts/plugins/**/*.js',
'www/assets/scripts/main.js',
]
},
{
name : "vendor",
output: 'vendor.min.js',
files: [ 'vendor/jquery/dist/jquery.js',
'vendor/jqueryui/ui/jquery.ui.widget.js',
'vendor/holderjs/holder.js'
]
}
];
function construct_js(taskConfig) {
gulp.task('js$' + taskConfig.name, ['lint'], function () {
return gulp.src(taskConfig.files)
.pipe(debug())
.pipe(concat(taskConfig.output))
.pipe(uglify({outSourceMap: true}))
.pipe(gulp.dest(targetJSDir))
.pipe(notify('JS minified'))
.on('error', gutil.log)
});
}
for (var i=0; i < configs.length; i++) {
construct_js(configs[i]);
}
If we use underscore for the last "for":
_(configs).each(construct_js);
I've used this approach in my project with good results.
I'd like to propose some alternatives. Suppose we have a task called build that we would like to conditionally uglify given a certain param.
The two approaches use two watches with a single build task.
Alternative #1:
You can use gulp-exec to fire up a task with parameters.
var exec = require('child_process').exec;
gulp.task('build', function(){
// Parse args here and determine whether to uglify or not
})
gulp.task('buildWithoutUglify' function(){
exec('gulp build --withoutUglify')
})
gulp.task('watch', function(){
gulp.watch(someFilePath, ['buildWithoutUglify'])
})
Please note that this approach is a bit slow since what it does is execute command line gulp.
Alternative #2:
Set a global variable:
var withUglify = false;
gulp.task('build', function(){
// Use something like ``gulp-if`` to conditionally uglify.
})
gulp.task('buildWithoutUglify' function(){
withUglify = true;
gulp.start('build');
})
gulp.task('watch', function(){
gulp.watch(someFilePath, ['buildWithoutUglify'])
})