Rather new to both gulp and javascript. The script I wrote is returning an error (appended at the end of the post.)
This is the minimal example file:
const {src, dest, series, parallel }= require('gulp');
const sourceList = ['about', 'contact', 'projects'];
// Next 2 functions take each html file and move them to respective dist folder.
function eachHtml(){
sourceList.forEach(function(htmlFile){
cphtmlTask(`source/${htmlFile}/${htmlFile}.html`, `dist/${htmlFile}/`)
});
//cphtmlTask('source/index.html', 'dist/');
}
function cphtmlTask(i,o){
return src(i)
.pipe(dest(o));
}
exports.default = series(eachHtml);
Output
[17:55:19] Starting 'default'...
[17:55:19] Starting 'eachHtml'...
[17:55:19] The following tasks did not complete: default, eachHtml
[17:55:19] Did you forget to signal async completion?
Any help please?
I think all you need is:
function eachHtml(cb){
sourceList.forEach(function(htmlFile){
cphtmlTask(`source/${htmlFile}/${htmlFile}.html`, `dist/${htmlFile}/`)
});
cb();
//cphtmlTask('source/index.html', 'dist/');
}
That cb is a callback function which will signal to gulp that the eachHtml task has completed.
Related
I'm in the process of migrating from gulp#3.9.1 to gulp#4.0.2 and upgrading my gulp dependencies in the process. I have the following task in my gulpfile, where you can assume directories is just an array of directories I want to perform this operation on:
var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate'); //annotates dependencies in Angular components
var rev = require('gulp-rev'); //appends a hash to the end of file names to eliminate stale cached files
var revReplace = require('gulp-rev-replace');
var uglify = require('gulp-uglify'); // minimizes javascript files
var compressCss = require('gulp-minify-css');
var useref = require('gulp-useref'); // replaces style and script blocks in HTML files
var filter = require('gulp-filter');
var merge = require('merge-stream');
var sourcemaps = require('gulp-sourcemaps');
function minify() {
var tasks = directories.map(function (directory) {
var cssFilter = filter("**/all.min.css", {restore:true});
var jsAppFilter = filter("**/app.min.js", {restore:true});
var jsFilter = filter("**/*.js", {restore:true});
return gulp.src(dstBasePath + directory + "index.html", {allowEmpty: true})
.pipe(useref())
.pipe(cssFilter)
.pipe(compressCss({keepSpecialComments:false}))
.pipe(rev())
.pipe(cssFilter.restore)
.pipe(jsAppFilter)
.pipe(sourcemaps.init())
.pipe(ngAnnotate({add:true, single_quotes:true}))
.pipe(jsAppFilter.restore)
.pipe(jsFilter)
.pipe(uglify())
.pipe(rev())
.pipe(jsFilter.restore)
.pipe(revReplace())
.pipe(sourcemaps.write('.')) // sourcemaps need to be written to same folder for Datadog upload to work
.pipe(gulp.dest(dstBasePath + directory))
});
return merge(tasks);
}
Why would this result in the error "Did you forget to signal async completion?" from Gulp when running the task? Note that I'm using Gulp 4. I've tried passing a callback done to this task, and adding .addListener('end', done) to the final pipe, but this causes my merged stream to end prematurely (presumably when the first one ends). So perhaps one of these plugins is not signaling when it's completed, but how would you even get this to work otherwise? Thanks for any insight you can provide.
return merge(folders.map(function (folder) { // this has worked for me in the past
as has this form without merge
gulp.task('init', function (done) {
var zips = getZips(zipsPath);
var tasks = zips.map(function (zip) {
return gulp.src(zipsPath + "/" + zip)
.pipe(unzip({ keepEmpty: true }))
.pipe(gulp.dest(path.join("src", path.basename(zip, ".zip"))))
.on('end', function() { // this bit is necessary
done();
});
});
return tasks;
});
Gulp 4 requires that you signal async completion. There's some good information about it in this answer to a similar question:
Gulp error: The following tasks did not complete: Did you forget to signal async completion?
I had a similar case where I was returning a merged set of tasks, and I was able to resolve the error by making the function async and awaiting the merge. My case looked something like this:
gulp.task("build", async function () {
...
return await merge(tasks);
});
so I think you should be able to do something like
async function minify(){
...
return await merge(tasks);
}
I am trying to create a set of gulp tasks dynamically (at runtime) and after that I want to execute them.
So the default task executes in series task called createTasks which I thought would create all my tasks in array tasks and then execute the function returned by gulp.series(tasks).
Unfortunately that generates an error:
VM40 assert.js:42 Uncaught AssertionError: One or more tasks should be combined using series or parallel
The code looks like this:
// Gulp 4
var gulp = require('gulp');
var tasks = [];
const fileArray = ['task1', 'task2'];
debugger;
gulp.task('createTasks', function(done) {
for (var key in fileArray)
{
gulp.task(fileArray[key], function(done) {
console.log("I was called");
});
tasks.push(fileArray[key]);
}});
gulp.task('default', gulp.series('createTasks', gulp.series(tasks)));
What am doing wrong?
Isn't gulp.series expecting the tasks as individual parameters, rather than receiving them all in a single array parameter?
If your setup supports ES 6, this should work:
gulp.task('default', gulp.series('createTasks', gulp.series(...tasks)));
If not, you could try this one:
gulp.task('default', gulp.series('createTasks', gulp.series.apply(this, tasks)))
There is no need for createTasks as gulp task. You just iterate over list of task and add the task name into the array and call the series method as apply.
// Gulp 4
var gulp = require('gulp');
var tasks = [];
const fileArray = ['task1', 'task2'];
for (var key in fileArray){
gulp.task(fileArray[key], function(done) {
console.log("I was called");
});
tasks.push(fileArray[key]);
};
gulp.task('default', gulp.series.apply(this,tasks));
I want to implement very simple chain of tasks in my project by Gulp:
Copy all files;
Replace some placeholders with values;
Minify some
files;
And for these purposes I have created gulpfile with such main task:
gulp.task(tasks.build, [
tasks.simplyCopy,
tasks.minifyXml,
tasks.minifyJs,
tasks.subst]);
It's a pretty simple and self describable.
Below I wrote full gulpfile.js:
var gulp = require('gulp');
var prettyData = require('gulp-pretty-data');
var uglify = require('gulp-uglify');
var renvy = require('gulp-renvy');
var tasks = {
simplyCopy: "simply-copy",
minifyXml: "minify-xml",
minifyJs: "minify-js",
subst: "renvy-subst",
build: "build"
};
// Collection of tasks
gulp.task(tasks.build, [tasks.simplyCopy, tasks.minifyXml, tasks.minifyJs,
tasks.subst]);
// By this task sources simply copy to the destination
var destination = 'dist/';
gulp.task(tasks.simplyCopy, function () {
gulp.src(['Source/**/*.*', '!Source/www/res/strings/*.*'], {base:
'Source/www'})
.pipe(gulp.dest(destination));
});
var stringsDestPath = 'dist/res/strings/';
var stringSrcPath = 'Source/www/res/strings/';
// By this task some xml files minify
gulp.task(tasks.minifyXml, [tasks.simplyCopy], function() {
gulp.src(stringSrcPath + '*.xml')
.pipe(prettyData({
type: 'minify',
preserveComments: true,
extensions: {
'xlf': 'xml',
'svg': 'xml'
}
}))
.pipe(gulp.dest(stringsDestPath))
});
var placeholder = {
'%version%': {'prod':'010.00', 'dev':'010.00'}
};
// By this task in some files placeholders replaces with value
gulp.task(tasks.subst, [tasks.minifyXml, tasks.minifyJs], function(){
return gulp.src(stringsDestPath + '*.*')
.pipe(renvy(placeholder, 'dev'))
.pipe(gulp.dest(stringsDestPath));
});
// By this task some js files minify
gulp.task(tasks.minifyJs, [tasks.simplyCopy], function () {
gulp.src(stringSrcPath + '*.js')
.pipe(uglify())
.pipe(gulp.dest(stringsDestPath))
});
But I have such unexpected behavior:
replacing of placeholders is not happening, but it's executes.
[16:29:51] Using gulpfile C:\PDDirectory\Workspace\src\some_workbench\User_Part\gulpfile.js
[16:29:51] Starting 'simply-copy'...
[16:29:51] Finished 'simply-copy' after 17 ms
[16:29:51] Starting 'minify-xml'...
[16:29:51] Finished 'minify-xml' after 7.49 ms
[16:29:51] Starting 'minify-js'...
[16:29:51] Finished 'minify-js' after 5.84 ms
[16:29:51] Starting 'renvy-subst'...
[16:29:51] Finished 'renvy-subst' after 28 ms
[16:29:51] Starting 'build'...
[16:29:51] Finished 'build' after 5.66 ?s
Task tasks.subst executed sepparetly works fine, but in a chain with other tasks, I see results of executing copy and minify only.
Why so?
Place tasks.subst has the sole dependency for tasks.build
gulp.task(tasks.build, [tasks.subst]);
Since tasks.subst requires all the others, the ordering should be correct and adding all the other tasks may lead to ordering problems.
From the gulp.task documentation:
Note: Are your tasks running before the dependencies are complete?
Make sure your dependency tasks are correctly using the async run
hints: take in a callback or return a promise or event stream.
To ensure that a task dependencies are fulfilled before executing it, Gulp needs each task to return a stream or a promise, or call the task function callback parameter.
In your case, the following task should just return the stream:
tasks.minifyXml
tasks.minifyJs
tasks.simplyCopy
For example:
gulp.task(tasks.minifyXml, [tasks.simplyCopy], function(done) {
// just return the task stream here
return gulp.src(stringSrcPath + '*.xml')
.pipe(prettyData({
// ...
}))
.pipe(gulp.dest(stringsDestPath));
});
or using the callback when it's not possible to return a stream:
gulp.task('somename', function(done) {
// async function which does not return a stream like other gulp functions
getFilesAsync(function(err, res) {
// pass any errors to the callback
if (err) return done(err);
var stream = gulp.src(res)
.pipe(minify())
.pipe(gulp.dest('build'))
.on('end', done); // use the callback when it's done
});
});
I have a gulp task in which I want to take some source files and copy them to build/premium and build/free and then remove some extra files from
build/free.
My attempt at that was doing this:
gulp.task("build", ["clean"], function () {
gulp.src(["src/*", "!src/composer.*", "LICENSE"])
.pipe(gulp.dest("build/premium"))
.pipe(del(["build/free/plugins/*", "!build/free/plugins/index.php"]))
.pipe(gulp.dest("build/free"));
});
Which results in an error:
TypeError: dest.on is not a function
at DestroyableTransform.Stream.pipe (stream.js:45:8)
at Gulp.<anonymous> (/Users/gezim/projects/myproj/gulpfile.js:9:6)
How do I accomplish this the deleting port? Is there a better way altogether to do this?
This is a simple clean task implementation with gulp-del:
var del = require('gulp-del');
gulp.task('clean', function(){
return del(['folderA/js', 'folderA/css', 'folderB/js']);
});
In your case you can just call it after build (read "use build as a dependency"):
gulp.task("build", function () {
return gulp.src(['src/*', '!src/composer.*', 'LICENSE'])
.pipe(gulp.dest("build/premium"))
.pipe(gulp.dest("build/free"));
});
gulp.task("complete-build", ["build"] function(){
return del(['build/free/plugins/*', '!build/free/plugins/index.php']);
});
Then call the "complete-build" task to perform it.
To be honest this is more a "Grunt"-like approach to the problem, but done with Gulp. Perhaps the recommendation to filter things before writing them in the build/free folder is more in the Gulp spirit.
Update 2/2018
The delete module has been renamed to del now as reported by #gerl:
var del = require('del');
gulp.task('clean', function(){
return del(['folderA/js', 'folderA/css', 'folderB/js']);
});
I would use gulp-filter to drop only what should not be copied from the 2nd destination.
I interpreted the intent of the task as wanting everything present in src to be present in build/premium. However, build/free should exclude everything which was originally in src/plugins but should still include src/plugins/index.php.
Here is a working gulpfile:
var gulp = require("gulp");
var filter = require("gulp-filter");
var del = require("del");
gulp.task("clean", function () {
return del("build");
});
gulp.task("build", ["clean"], function () {
return gulp.src(["src/**", "!src/composer.*", "LICENSE"])
.pipe(gulp.dest("build/premium"))
.pipe(filter(["**", "!plugins/**", "plugins/index.php"]))
.pipe(gulp.dest("build/free"));
});
The patterns passed to filter are relative paths. Since the gulp.src pattern has src/** it means they are relative to src.
Note also that del cannot be passed straight to .pipe() as it returns a promise. It can be returned from a task, like the clean task does.
Update: Seems like this is a bug in gulp-protractor. On their github page they filed it as a bug and will take a look into it. Source: https://github.com/mllrsohn/gulp-protractor/issues/64
Only possible workaround you can do until the bug is resolved is change the directory of your project to something that doesn't include spaces.
So I'm trying to get an Aurelia project started including front end unit testing. Here is where the problem starts. When I try to run the e2e gulp task I get the following error:
[10:45:44] using gulpfile ~\Documents\Visual Studio 2013\Projects\ProjectX\ProjectX\gulpfile.js
[10:45:44] Starting 'build-e2e'...
[10:45:44] Finished 'build-e2e' after 207 ms
[10:45:44] Starting 'e2e'...
'C:\Users\jorisd\Documents\Visual' is not recognized as an internal or external command, operable program or batch file.
C:\Users\jorisd\Documents\Visual Studio 2013\Projects\ProjectX\ProjectX\build\tasks\e2e.js:34
.on('error', function(e) {throw e; });
Error: protractor exited with code 1
Basically it's the highlighted code that has the problem. Since my path includes a space, it'll stop there for some reason.
Here's how my e2e.js file looks like right now:
var gulp = require('gulp');
var paths = require('../paths');
var to5 = require('gulp-babel');
var plumber = require('gulp-plumber');
var webdriverUpdate = require('gulp-protractor').webdriver_update;
var webdriverStandalone = require("gulp-protractor").webdriver_standalone;
var protractor = require('gulp-protractor').protractor;
// for full documentation of gulp-protractor,
// please check https://github.com/mllrsohn/gulp-protractor
gulp.task('webdriver-update', webdriverUpdate);
gulp.task('webdriver-standalone', ['webdriver-update'], webdriverStandalone);
// transpiles files in
// /test/e2e/src/ from es6 to es5
// then copies them to test/e2e/dist/
gulp.task('build-e2e', function() {
return gulp.src(paths.e2eSpecsSrc)
.pipe(plumber())
.pipe(to5())
.pipe(gulp.dest(paths.e2eSpecsDist));
});
// runs build-e2e task
// then runs end to end tasks
// using Protractor: http://angular.github.io/protractor/
gulp.task('e2e', ['build-e2e'], function(cb) {
return gulp.src(paths.e2eSpecsDist + '/*.js')
.pipe(protractor({
configFile: '/protractor.conf.js',
args: ['--baseUrl', 'http://127.0.0.1:9000']
}))
.on('end', function() { process.exit(); })
.on('error', function(e) { throw e; });
});
The problem is situating in the e2e task with the configFile option.
I tried change the line into the following:
configFIle: __dirname + '/protractor.conf.js',
But this aswell without result. If any of you know a workaround for including spaces in the configFile path, I'll be happy to hear it.
For me its working fine.
var angularProtractor = require('gulp-angular-protractor');
gulp.task('test', function (callback) {
gulp
.src([__dirname+'/public/apps/adminapp/**/test/**_test.js'])
.pipe(angularProtractor({
'configFile': 'public/apps/adminapp/app.test.config.js',
'debug': false,
'args': ['--suite', 'adminapp'],
'autoStartStopServer': true
}))
.on('error', function(e) {
console.log(e);
})
.on('end',callback);
});