Develop Reference

How to rename a zip file after an HTML file in a Gulp task

I am attempting to zip up all files in my dist folder using gulp-zip and would like to dynamically name the zip file after the only html file in that directory. Here's my attempt using gulp-filenames, but have had no luck.
const rename = require('gulp-rename');
const zip = require('gulp-zip');
var filenames = require('gulp-filenames');
gulp.task('zipp', function(){
gulp.src('dist/*')
.pipe(zip('_final.zip'))
.pipe(rename({prefix:getHtmlName()}))
.pipe(gulp.dest('./dist'))
})
function getHtmlName(){
gulp.src("./src/*.html")
.pipe(filenames("html"))
.pipe(gulp.dest("./dist"));
return filenames.get("html");
}

Here are two ways:
const gulp = require('gulp');
const rename = require('gulp-rename');
const zip = require('gulp-zip');
const filenames = require('gulp-filenames');
// run the getHTMLname task first, filenames will then have the data stored in an array
gulp.task('zipp', ['getHTMLname'], function () {
return gulp.src('dist/*')
.pipe(zip('_final.zip'))
// rename gets the file passing through it, in this case '_final.zip'
.pipe(rename(function (path) {
// retrieve the array of string filenames, use the first and only one in the array
// and get the basename via split
path.basename = filenames.get("html")[0].split('.')[0] + path.basename;
}))
.pipe(gulp.dest('./dist'))
})
gulp.task('getHTMLname', function () {
return gulp.src("./dist/*.html")
.pipe(filenames("html"))
});
// **************************************************************
const gulp = require('gulp');
const rename = require('gulp-rename');
const zip = require('gulp-zip');
const glob = require("glob");
const path = require('path');
gulp.task('zipp', function () {
return gulp.src('dist/*')
.pipe(zip('_final.zip'))
.pipe(rename(function (file) {
// glob.sync returns an array, get the first member of that array
// path.basename('string', '.html') returns the name of the file without the extension
var temp = path.basename(glob.sync("./dist/*.html")[0], '.html');
file.basename = temp + file.basename;
}))
.pipe(gulp.dest('./dist'))
});
If you really want to use gulp-filenames, use the code above the ********'s. The 'getHTMLname' task must run first - that is when gulp-filenames builds its array of file names from whatever source directory you feed it. That array can later be used anywhere in a subsequent task.
However, I recommend the second method using glob and path modules, which you should learn anyway. The second method does not require a separate task, it just gets, globs, the html filename you want right in the same task so it is simpler. Also when I installed gulp-filenames it is using a ton of deprecated modules so it badly needs to be updated. It works now but may not as you update node, etc.

Creating a .txt error output file in protractor made manually not console errors

Hello guys I'm kinda new to js and protractor and I just found out it can't create and modify files, so the question I want to ask is:
Is it possible to manually write test cases logic fails to a text file for example:
I know the code is not correct but you will get the idea i know about jasmine-reporters and with xml file output but it just prints console errors i want one that is custom liek the one below
describe('File output test', function() {
it('should have a title', function() {
browser.ignoreSynchronization=true;
browser.get('https://www.google.com');
});
it('Tests output file',function(){
var searchText = $('#lst-ib');
searchText.sendKeys('Testt')
searchText.sendKeys(protractor.Key.ENTER);
browser.sleep(3000);
if(browser.getTitle() != 'Test')
{
var txtFile = "C:\Users\y\Desktop\test.txt";
var file = new File(txtFile);
var url = browser.getCurrentUrl();
file.open("w");
file.writeln("Error at " + url);
file.close();
}
});
});
conf file pretty basic:
exports.config = {
framework: 'jasmine',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js']
}
So I simply want to check for the given title at the moment and if it is different from the expected one i want to save the url in an output file so when the test ends i can check afterwards where exactly did something i didnt want happened. I hope I am not talking nonsense

Protractor runs in Node.js environment. So everything, that Node.js has, is available to you. Such as "fs" module. So you can manually save file every time, or (as a better option), write custom Jasmine reporter. Your reporter would expose some variable or function in global namespace to register custom errors and write them into a file after test execution.

Nevermind i found the answer to my question here is my sample code i used to test it
var fs = require('fs-extra')
var file = 'C:/Users/y/Desktop/test/New folder/output.txt'
var counter = 1;
describe('File output test', function() {
it('should have a title', function() {
browser.ignoreSynchronization=true;
browser.get('https://www.facebook.com');
});
it('Tests output file',function(){
email = 'dame#hotmail.com';
pass = 'test123'
var enterMail = $('#email');
enterMail.sendKeys(email);
var enterPass = $('#pass');
enterPass.sendKeys(pass);
enterPass.sendKeys(protractor.Key.ENTER);
browser.sleep(3000);
if(browser.getTitle() != 'Facebook'){
fs.appendFile(file,counter +'. ' + 'Error at login using: ('+email +') as email and ('+pass+') as password.' + "\n" , function (err) {
console.log(err) // => null
})
counter+=1;
}
});
});
I found a module fs-extra which allowed to create and edit some files or documents and i managed to create and write my manual output in a file here is the link to fs-extra https://github.com/jprichardson/node-fs-extra#mkdirsdir-callback in case someone needs it cheers

gulp-load-plugins.sourcemaps.init() TypeError: Cannot read property 'init' of undefined

I'm trying to adapt a gulp file to my purposes and I'm running into issues. I only care about one task:
gulp.task('js:browser', function () {
return mergeStream.apply(null,
Object.keys(jsBundles).map(function(key) {
return bundle(jsBundles[key], key);
})
);
});
It is using browserify to condense my bundle into a usable single file. It uses these two methods and this object:
function createBundle(src) {
//if the source is not an array, make it one
if (!src.push) {
src = [src];
}
var customOpts = {
entries: src,
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
b.transform(babelify.configure({
stage: 1
}));
b.transform(hbsfy);
b.on('log', plugins.util.log);
return b;
}
function bundle(b, outputPath) {
var splitPath = outputPath.split('/');
var outputFile = splitPath[splitPath.length - 1];
var outputDir = splitPath.slice(0, -1).join('/');
console.log(outputFile);
console.log(plugins);
return b.bundle()
// log errors if they happen
.on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
.pipe(source(outputFile))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(plugins.sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(plugins.sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('build/public/' + outputDir));
}
var jsBundles = {
'js/polyfills/promise.js': createBundle('./public/js/polyfills/promise.js'),
'js/polyfills/url.js': createBundle('./public/js/polyfills/url.js'),
'js/settings.js': createBundle('./public/js/settings/index.js'),
'js/main.js': createBundle('./public/js/main/index.js'),
'js/remote-executor.js': createBundle('./public/js/remote-executor/index.js'),
'js/idb-test.js': createBundle('./public/js/idb-test/index.js'),
'sw.js': createBundle(['./public/js/sw/index.js', './public/js/sw/preroll/index.js'])
};
When I run the gulp task js:bower I get the following error coming from the the .pipe(plugins.sourcemaps.init({loadMaps: true})) expression:
TypeError: Cannot read property 'init' of undefined
I know that the lines are optional and I can just comment them out, but I do want them. When I run the code in the example file it works properly, when I run it in my gulp file it gives me the error. Any suggestions on what I might be missing? Thanks!

gulp-load-plugins analyzes the contents of your package.json file to find out which Gulp plugins you have installed. Make sure that gulp-sourcemaps is among the "devDependencies" defined there. If not run
npm install --save-dev gulp-sourcemaps
There's a small chance that your problem is related to lazy loading the sourcemaps plugin. If the above doesn't help try requiring gulp-load-plugins like this:
var plugins = require('gulp-load-plugins')({lazy:false});

node.js directory search for file with name

i need help writing a node.js application that searches for all sub directories under the current directory which their names contain the specified string.
for example the user want to search all directories that have the string 'test' in it.
what is the js code i need to use?
i try using this:
var walk = function(dir) {
var results = []
var list = fs.readdirSync(dir)
list.forEach(function(file) {
file = dir + '/' + file
var stat = fs.statSync(file)
if (stat && stat.isDirectory()) results = results.concat(walk(file))
else results.push(file)
})
return results
}

Take a look at node-glob
In your case you could use it like this. This pattern will give you all files in the folder that contain at least once test in the name.
var glob = require("glob")
glob("+(test).js", options, function (er, files) {
// files is an array of filenames.
// If the `nonull` option is set, and nothing
// was found, then files is ["**/*.js"]
// er is an error object or null.
if (er) {
// omg something went wrong
throw new Exception(er);
}
var requiredFiles = files.map(function(filename) {
return require(filename);
});
// do something with the required files
});

Iterating over directories with Gulp?

I'm new to gulp, but I'm wondering if its possible to iterate through directories in a gulp task.
Here's what I mean, I know a lot of the tutorials / demos show processing a bunch of JavaScript files using something like "**/*.js" and then they compile it into a single JavaScript file. But I want to iterate over a set of directories, and compile each directory into it's own JS file.
For instance, I have a file structure like:
/js/feature1/something.js
/js/feature1/else.js
/js/feature1/foo/bar.js
/js/feature1/foo/bar2.js
/js/feature2/another-thing.js
/js/feature2/yet-again.js
...And I want two files: /js/feature1/feature1.min.js and /js/feature2/feature2.min.js where the first contains the first 4 files and the second contains the last 2 files.
Is this possible, or am I going to have to manually add those directories to a manifest? It would be really nice to pragmatically iterate over all the directories within /js/.
Thanks for any help you can give me.
-Nate
Edit: It should be noted that I don't only have 2 directories, but I have many (maybe 10-20) so I don't really want to write a task for each directory. I want to handle each directory the same way: get all of the JS inside of it (and any sub-directories) and compile it down to a feature-based minified JS file.

There's an official recipe for this: Generating a file per folder
var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var scriptsPath = 'src/scripts';
function getFolders(dir) {
return fs.readdirSync(dir)
.filter(function(file) {
return fs.statSync(path.join(dir, file)).isDirectory();
});
}
gulp.task('scripts', function() {
var folders = getFolders(scriptsPath);
var tasks = folders.map(function(folder) {
return gulp.src(path.join(scriptsPath, folder, '/**/*.js'))
// concat into foldername.js
.pipe(concat(folder + '.js'))
// write to output
.pipe(gulp.dest(scriptsPath))
// minify
.pipe(uglify())
// rename to folder.min.js
.pipe(rename(folder + '.min.js'))
// write to output again
.pipe(gulp.dest(scriptsPath));
});
// process all remaining files in scriptsPath root into main.js and main.min.js files
var root = gulp.src(path.join(scriptsPath, '/*.js'))
.pipe(concat('main.js'))
.pipe(gulp.dest(scriptsPath))
.pipe(uglify())
.pipe(rename('main.min.js'))
.pipe(gulp.dest(scriptsPath));
return merge(tasks, root);
});

You could use glob to get a list of directories and iterate over them, using gulp.src to create a separate pipeline for each feature. You can then return a promise which is resolved when all of your streams have ended.
var fs = require('fs');
var Q = require('q');
var gulp = require('gulp');
var glob = require('glob');
gulp.task('minify-features', function() {
var promises = [];
glob.sync('/js/features/*').forEach(function(filePath) {
if (fs.statSync(filePath).isDirectory()) {
var defer = Q.defer();
var pipeline = gulp.src(filePath + '/**/*.js')
.pipe(uglify())
.pipe(concat(path.basename(filePath) + '.min.js'))
.pipe(gulp.dest(filePath));
pipeline.on('end', function() {
defer.resolve();
});
promises.push(defer.promise);
}
});
return Q.all(promises);
});

I am trying myself to get how streams work in node.
I made a simple example for you, on how to make a stream to filter folders and start a new given stream for them.
'use strict';
var gulp = require('gulp'),
es = require('event-stream'),
log = require('consologger');
// make a simple 'stream' that prints the path of whatever file it gets into
var printFileNames = function(){
return es.map(function(data, cb){
log.data(data.path);
cb(null, data);
});
};
// make a stream that identifies if the given 'file' is a directory, and if so
// it pipelines it with the stream given
var forEachFolder = function(stream){
return es.map(function(data, cb){
if(data.isDirectory()){
var pathToPass = data.path+'/*.*'; // change it to *.js if you want only js files for example
log.info('Piping files found in '+pathToPass);
if(stream !== undefined){
gulp.src([pathToPass])
.pipe(stream());
}
}
cb(null, data);
});
};
// let's make a dummy task to test our streams
gulp.task('dummy', function(){
// load some folder with some subfolders inside
gulp.src('js/*')
.pipe(forEachFolder(printFileNames));
// we should see all the file paths printed in the terminal
});
So in your case, you can make a stream with whatever you want to make with the files in a folder ( like minify them and concatenate them ) and then pass an instance of this stream to the forEachFolder stream I made. Like I do with the printFileNames custom stream.
Give it a try and let me know if it works for you.

First, install gulp-concat & gulp-uglify.
$ npm install gulp-concat
$ npm install gulp-uglify
Next, do something like:
//task for building feature1
gulp.task('minify-feature1', function() {
return gulp.src('/js/feature1/*')
.pipe(uglify()) //minify feature1 stuff
.pipe(concat('feature1.min.js')) //concat into single file
.pipe(gulp.dest('/js/feature1')); //output to dir
});
//task for building feature2
gulp.task('minify-feature2', function() { //do the same for feature2
return gulp.src('/js/feature2/*')
.pipe(uglify())
.pipe(concat('feature2.min.js'))
.pipe(gulp.dest('/js/feature2'));
});
//generic task for minifying features
gulp.task('minify-features', ['minify-feature1', 'minify-feature2']);
Now, all you have to do to minify everything from the CLI is:
$ gulp minify-features

I had trouble with the gulp recipe, perhaps because I'm using gulp 4 and/or because I did not want to merge all my folders' output anyway.
I adapted the recipe to generate (but not run) an anonymous function per folder and return the array of functions to enable them to be processed by gulp.parallel - in a way where the number of functions I would generate would be variable. The keys to this approach are:
Each generated function needs to be a function or composition (not a stream). In my case, each generated function was a series composition because I do lots of things when building each module folder.
The array of functions needs to passed into my build task using javascript apply() since every member of the array needs to be turned into an argument to gulp.parallel in my case.
Excerpts from my function that generates the array of functions:
function getModuleFunctions() {
//Get list of folders as per recipe above - in my case an array named modules
//For each module return a function or composition (gulp.series in this case).
return modules.map(function (m) {
var moduleDest = env.folder + 'modules/' + m;
return gulp.series(
//Illustrative functions... all must return a stream or call callback but you can have as many functions or compositions (gulp.series or gulp.parallel) as desired
function () {
return gulp.src('modules/' + m + '/img/*', { buffer: false })
.pipe(gulp.dest(moduleDest + '/img'));
},
function (done) {
console.log('In my function');
done();
}
);
});
}
//Illustrative build task, running two named tasks then processing all modules generated above in parallel as dynamic arguments to gulp.parallel, the gulp 4 way
gulp.task('build', gulp.series('clean', 'test', gulp.parallel.apply(gulp.parallel, getModuleFunctions())));
`