We Keep Coding

Using babel, how can I append some code to the top of every file?

My goal is to fake out getting some requirejs code working via babel. I've found that if I add the following: if (typeof define !== "function") { var define = require("amdefine")(module); } to the top of every file while running in nodejs things seem to work out.
Here is some code I wrote, which I thought would work or nearly work:
function injectDefine(babel) {
var header = 'if (typeof define !== "function") { var define = require("amdefine")(module); }';
return new babel.Plugin('amdefine', {
visitor: {
Program: {
enter: function(path, file) {
path.unshiftContainer(
'body',
babel.types.expressionStatement(
babel.types.stringLiteral(header)
)
);
},
},
},
});
}
require('babel-core/register')({
stage: 0,
plugins: [{transformer: injectDefine}],
});
require('../components/button');
The components/button file is just me trying to test that some file can load.
Other notes: I'm using babel 5, and I can't upgrade right now. I also can't use a .babelrc very easily right now.

Tip 1: the environment variable BABEL_DISABLE_CACHE=1 is needed if you are doing heavy testing of plugins. If you had a script that you ran like npm run unit you may instead want to run like BABEL_DISABLE_CACHE=1 npm run unit while testing your plugin.
Tip 2: babel.parse will give you a full program out of some source. The easiest thing you could do is babel.parse(header).program.body[0].
The following ended up working:
function injectDefine(babel) {
var header = 'if (typeof define !== "function") { var define = require("amdefine")(module); }';
return new babel.Plugin('amdefine', {
visitor: {
Program: {
enter: function(node, parent) {
node.body.unshift(
babel.parse(header).program.body[0]
);
},
},
},
});
}
require('babel-core/register')({
cache: false,
stage: 0,
plugins: [injectDefine],
});

At this stage, a cleaner solution can be to use #babel/traverse and #babel/types.
Let's suppose you want to append a comment to the top of every file, you could use some code like the following:
// Import the required modules
import * as t from "#babel/types";
import traverse from "#babel/traverse";
// Get your ast (for this, you can use #babel/parser)
// Traverse your ast
traverse(ast, {
// When the current node is the Program node (so the main node)
Program(path) {
// Insert at the beginning a string "Hello World" --> not valid JS code
path.unshiftContainer('body', t.stringLiteral("Hello World"));
}
});

Extracting typescript exports to json file using gulp

I have several typescript files, some of them export a certain var - named APIS - which is an array of objects.
I want to extract the values of all of these exports, and pipe them to a json file using gulp.
For example, I have a folder named services, with 3 files: service1.ts, service2.ts, service3.ts.
service1.ts:
...
export const APIS = [ { "field1" : "blabla" } ];
service2.ts:
...
export const APIS = [ { "field2" : "yadayada" }, { "field3" : "yadabla" } ];
service3.ts: - does not export the APIS var.
I want to use gulp in oder create a json file that looks something like this:
[ { "field1" : "blabla" }, { "field2" : "yadayada" }, { "field3" : "yadabla" } ]
gulpfile.js - the ??? is a placeholder for the missing code.
gulp.task('default', function () {
return gulp.src('.../services/*.ts')
.pipe(???)
.pipe(concat('export.json'))
.pipe(gulp.dest('./test'));
});
I'm new to both typescript & gulp, so I'm not sure how to achieve this... any ideas? :)
EDIT: So, I understand that there's no OOTB solution for this, and I need to writer my own task / plugin. I'm not really sure how to achieve that, though.
Ideally, what I want is to find a gulp plugin (or a combination of plugins) that can handle ts / js files as objects with properties. Then I can extract the var I need from the file.
I couldn't really find something like that, only string manipulation plugins - Treating my ts file as a string and using search with regex seems overly complicated to me. Is there something I'm missing here? is there a more straight-forward way to do this?

The typescript compiler API is relevant here, as this is what you need to parse and understand the ts-code properly. Unfortunately, I don't think there is a gulp plugin that implements this API.
I think your best bet is to change strategy completely here and solve your problem in another way, or to use regex to try to extract the constants that you want. Unless you want to write your own gulp-plugin using the compiler API.

This is what I ended up doing, and it worked for me. I'm positing it here in case anyone else finds it useful. :)
Instead of .ts, I saved the exports in .js files, i.e:
service2.export.js:
exports.APIS = [ { "field2" : "yadayada" }, { "field3" : "yadabla" } ];
Based on the answer given here: https://stackoverflow.com/a/36869651/3007732 I created a gulp task as following:
var gulp = require('gulp');
var concat = require('gulp-concat');
var map = require('gulp-map');
var fs = require('fs');
var allServices;
gulp.task('default', function() {
var allServices = [];
var stream = gulp.src('./**/*.export.js')
.pipe(map(function(file) {
var obj = require(file.path);
if (obj.APIS != null) {
allServices.push.apply(allServices, obj.APIS);
}
return file;
}));
stream.on("end", function (cb)
{
fs.writeFile('./export.json', JSON.stringify(allServices), cb);
});
return stream;
});
and now I get the following output in export.json:
[ { "field1" : "blabla" }, { "field2" : "yadayada" }, { "field3" : "yadabla" } ]
which is exactly what I wanted.

Take screenshot from Karma while running tests in PhantomJS 2?

I need a way to take a screenshot during a test which uses QUnit and Karma to run inside PhantomJS 2.0.1
I've found this command:
window.top.callPhantom('render');
That doesn't throw any error but doesn't seem to work, or at least, I don't know where to look for the taken screenshot.
Any clue?

Found a way!
Solution
I had to edit my custom PhantomJS custom launcher adding an option:
PhantomJSCustom: {
base: 'PhantomJS',
options: {
onCallback: function(data){
if (data.type === "render") {
// this function will not have the scope of karma.conf.js so we must define any global variable inside it
if (window.renderId === undefined) { window.renderId = 0; }
page.render(data.fname || ("screenshot_" + (window.renderId++) + ".png"));
}
}
}
}
As you can see, we are defining the onCallback option, it will be injected inside the script launched by phantomjs.
The script, then, will contain:
page.onCallback = <our function>
Now, we are able to use callPhantom to ask PhantomJS to run the content of our onCallback function and use all the native PhantomJS methods.
Usage
Now, you can use in your tests the function:
window.top.callPhantom({type: 'render'});
To take a screenshot that will be saved in the root directory of your application.
Additionally, if you define the fname you'll be able to define a custom path and file name to your screenshot.
window.top.callPhantom({type: 'render', fname: '/tmp/myscreen.png'});
Pack all together for ease of use
I've created an handy function to use inside my tests. The onCallback function is reduced to the minimum necessary, in this way all the logic is managed inside my test environment:
karma.conf.js
PhantomJSCustom: {
base: 'PhantomJS',
options: {
onCallback: function(data){
if (data.type === 'render' && data.fname !== undefined) {
page.render(data.fname);
}
}
}
}
helper
// With this function you can take screenshots in PhantomJS!
// by default, screenshots will be saved in .tmp/screenshots/ folder with a progressive name (n.png)
var renderId = 0;
function takeScreenshot(file) {
// check if we are in PhantomJS
if (window.top.callPhantom === undefined) return;
var options = {type: 'render'};
// if the file argument is defined, we'll save the file in the path defined eg: `fname: '/tmp/myscreen.png'
// otherwise we'll save it in the default directory with a progressive name
options.fname = file || '.tmp/screenshots/' + (renderId++) + '.png';
// this calls the onCallback function of PhantomJS, the type: 'render' will trigger the screenshot script
window.top.callPhantom(options);
}
Credits
I got this script from this answer, adapted it and found by myself where to put it to make it work with karma.

My Karma entry for a customized phantomjs that takes snapshots looked like this:
module.exports = function (config) {
config.set({
..
browsers: [ 'PhantomJSCustom'],
customLaunchers: {
'PhantomJSCustom': {
base: 'PhantomJS',
options: {
onCallback: function(data){
if (data.type === "render") {
// this function will not have the scope of karma.conf.js so we must define any global variable inside it
if (window.renderId === undefined) { window.renderId = 0; }
page.render(data.fname || ("screenshot_" + (window.renderId++) + ".png"));
}
}
}
}
},
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing // phantom)
exitOnResourceError: true
},
..
})

Creating multiple HTML files from a single Jade template with Grunt

I'm looking to create multiple HTML files from a single Jade template using Grunt.
Here's what I'm doing:
Grabbing the JSON data from an external file
Looping through that object
Creating a grunt config task for each value in that JSON object
Here's my code:
neighborhoods = grunt.file.readJSON('data/neighborhoods.json');
for(var i = 0; i < Object.keys(neighborhoods).length; i++) {
var neighborhood = {
"title" : Object.keys(neighborhoods)[i],
"data" : neighborhoods[Object.keys(neighborhoods)[i]]
};
grunt.config(['jade', neighborhood.title], {
options: {
data: function() {
return {
neighborhoods: neighborhood.data
}
}
},
files: {
"build/neighborhoods/<%= neighborhood.title %>.html": "layouts/neighborhood.jade"
}
});
}
The problem that I'm running in to is this
Running "jade:Art Museum" (jade) task
Warning: An error occurred while processing a template (Cannot read property 'title' of undefined). Use --force to continue.
If I make the filename a string, it runs fine but obviously creates all the files with the same filename, thus only creating one file. I need to make that filename dynamic.

I found the solution here:
Use Global Variable to Set Build Output Path in Grunt
The issue is that the module exports before those global variables get set, so they are all undefined in subsequent tasks defined within the initConfig() task.
This did the trick!
var neighborhoods = grunt.file.readJSON('data/neighborhoods.json');
for(var i = 0; i < Object.keys(neighborhoods).length; i++) {
var neighborhood = {
"title" : Object.keys(neighborhoods)[i],
"data" : neighborhoods[Object.keys(neighborhoods)[i]]
};
/*
* DEFINE VALUE AS GRUNT OPTION
*/
grunt.option('neighborhood_title', neighborhood.title);
grunt.config(['jade', neighborhood.title], {
options: {
data: function() {
return {
neighborhoods: neighborhood.data,
neighborhood_title: neighborhood.title
}
}
},
/*
* OUTPUT GRUNT OPTION AS FILENAME
*/
files: {
"build/neighborhoods/<%= grunt.option('neighborhood_title') %>.html": "layouts/neighborhood.jade"
}
});
}
This results in the desired output:
Running "jade:East Passyunk" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Fishtown" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Graduate Hospital" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Midtown Village" (jade) task
File build/neighborhoods/Society Hill.html created.
Running "jade:Northern Liberties" (jade) task
File build/neighborhoods/Society Hill.html created.
...

I know this is an old post but I kept coming back here whilst trying to solve a similar problem. I wanted to output multiple html files from a single jade template file using a for-loop.
The two problems I came across was setting the output filename (a javascript object literal KEY) and making sure inline javascript functions are run immediately so that the loop variables are available.
Here is my full source code with comments. I hope this is of use to anyone else stumbling across this post.
Gruntfile.js:
module.exports = function(grunt) {
// Create basic grunt config (e.g. watch files)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
grunt: { files: ['Gruntfile.js'] },
jade: {
files: 'src/*.jade',
tasks: ['jade']
}
}
});
// Load json to populate jade templates and build loop
var json = grunt.file.readJSON('test.json');
for(var i = 0; i < json.length; i++) {
var obj = json[i];
// For each json item create a new jade task with a custom 'target' name.
// Because a custom target is provided don't nest options/data/file parameters
// in another target like 'compile' as grunt wont't be able to find them
// Make sure that functions are called using immediate invocation or the variables will be lost
// http://stackoverflow.com/questions/939386/immediate-function-invocation-syntax
grunt.config(['jade', obj.filename], {
options: {
// Pass data to the jade template
data: (function(dest, src) {
return {
myJadeName: obj.myname,
from: src,
to: dest
};
}()) // <-- n.b. using() for immediate invocation
},
// Add files using custom function
files: (function() {
var files = {};
files['build/' + obj.filename + '.html'] = 'src/index.jade';
return files;
}()) // <-- n.b. using () for immediate invocation
});
}
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-watch');
// Register all the jade tasks using top level 'jade' task
// You can also run subtasks using the target name e.g. 'jade:cats'
grunt.registerTask('default', ['jade', 'watch']);
};
src/index.jade:
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 #{myJadeName} - node template engine
#container.col
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
test.json:
[{
"id" : "1",
"filename" : "cats",
"tid" : "2016-01-01 23:35",
"myname": "Cat Lady"
},
{
"id" : "2",
"filename" : "dogs",
"tid" : "2016-01-01 23:45",
"myname": "Dog Man"
}]
After running 'grunt' the output should be:
build/cats.html
build/dogs.html

Came across a similar requirement for a project I'm working on but couldn't get this to work. I kept getting only one file generated since the grunt option had same value for all tasks (the last value). So I ended up using <%= grunt.task.current.target %> for the file name which in your case would be same as neighborhood.title.

Gulps gulp.watch not triggered for new or deleted files?

The following Gulpjs task works fine when editing files in the glob match:
// watch task.
gulp.task('watch', ['build'], function () {
gulp.watch(src + '/js/**/*.js', ['scripts']);
gulp.watch(src + '/img//**/*.{jpg,jpeg,png,gif}', ['copy:images']);
gulp.watch(src + '/less/*.less', ['styles']);
gulp.watch(src + '/templates/**/*.{swig,json}', ['html']);
});
// build task.
gulp.task('build', ['clean'], function() {
return gulp.start('copy', 'scripts', 'less', 'htmlmin');
});
However it doesn't work (it's not triggered) for new or deleted files. Is there something I'm missing?
EDIT: even using grunt-watch plugin it seems not working:
gulp.task('scripts', function() {
return streamqueue(
{ objectMode: true },
gulp.src([
vendor + '/jquery/dist/jquery.min.js',
vendor + '/bootstrap/dist/js/bootstrap.min.js'
]),
gulp.src([
src + '/js/**/*.js'
]).pipe(plugins.uglify())
)
.pipe(plugins.concat(pkg.name + '.min.js'))
.pipe(gulp.dest(dest + '/js/'));
});
gulp.task('watch', ['build'], function () {
plugins.watch({glob: src + '/js/**/*.js'}, function () {
gulp.start('scripts');
});
});
EDIT: Solved, it was this issue. Globs starting with ./ (that was the value of src) seems not working ATM.

Edit: Apparently gulp.watch does work with new or deleted files now. It did not when the question was asked.
The rest of my answer still stands: gulp-watch is usually a better solution because it lets you perform specific actions only on the files that have been modified, while gulp.watch only lets you run complete tasks. For a project of a reasonable size, this will quickly become too slow to be useful.
You aren't missing anything. gulp.watch does not work with new or deleted files. It's a simple solution designed for simple projects.
To get file watching that can look for new files, use the gulp-watch plugin, which is much more powerful. Usage looks like this:
var watch = require('gulp-watch');
// in a task
watch({glob: <<glob or array of globs>> })
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch({glob: <<glob or array of globs>>}, function() {
gulp.start( <<task name>> );
});
Personally, I recommend the first option. This allows for much faster, per-file processes. It works great during development with livereload as long as you aren't concatenating any files.
You can wrap up your streams either using my lazypipe library, or simply using a function and stream-combiner like this:
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch({glob: 'src/scripts/**/*.js' })
.pipe(scriptsPipeline());
UPDATE October 15, 2014
As pointed out by #pkyeck below, apparently the 1.0 release of gulp-watch changed the format slightly, so the above examples should now be:
var watch = require('gulp-watch');
// in a task
watch(<<glob or array of globs>>)
.pipe( << add per-file tasks here>> );
// if you'd rather rerun the whole task, you can do this:
watch(<<glob or array of globs>>, function() {
gulp.start( <<task name>> );
});
and
var combine = require('stream-combiner');
function scriptsPipeline() {
return combine(coffeeescript(), uglify(), gulp.dest('/path/to/dest'));
}
watch('src/scripts/**/*.js')
.pipe(scriptsPipeline());

Both gulp.watch() and require('gulp-watch')() will trigger for new/deleted files however not if you use absolute directories. In my tests I did not use "./" for relative directories BTW.
Both won't trigger if whole directories are deleted though.
var watch = require('gulp-watch');
//Wont work for new files until gaze is fixed if using absolute dirs. It won't trigger if whole directories are deleted though.
//gulp.watch(config.localDeploy.path + '/reports/**/*', function (event) {
//gulp.watch('src/app1/reports/**/*', function (event) {
// console.log('*************************** Event received in gulp.watch');
// console.log(event);
// gulp.start('localDeployApp');
});
//Won't work for new files until gaze is fixed if using absolute dirs. It won't trigger if whole directories are deleted though. See https://github.com/floatdrop/gulp-watch/issues/104
//watch(config.localDeploy.path + '/reports/**/*', function() {
watch('src/krfs-app/reports/**/*', function(event) {
console.log("watch triggered");
console.log(event);
gulp.start('localDeployApp');
//});

If src is an absolute path (starting with /), your code is not going to detect new or deleted files. However there's still a way:
Instead of:
gulp.watch(src + '/js/**/*.js', ['scripts']);
write:
gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);
and it will work!

Globs must have a separate base directory specified and that base location must not be specified in the glob itself.
If you have lib/*.js, it'll look under the current working dir which is process.cwd()
Gulp uses Gaze to watch files and in the Gulp API doc we see that we can pass Gaze specific options to the watch function: gulp.watch(glob[, opts], tasks)
Now in the Gaze doc we can find that the current working dir (glob base dir) is the cwd option.
Which leads us to alexk's answer:
gulp.watch('js/**/*.js', {cwd: src}, ['scripts']);

I know this is an older question, but I thought I'd throw the solution I came up with. None of the gulp plugins I found would notify me of new or renamed files. So I ended up wrapping monocle in a convenience function.
Here's an example of how that function is used:
watch({
root: config.src.root,
match: [{
when: 'js/**',
then: gulpStart('js')
}, {
when: '+(scss|css)/**',
then: gulpStart('css')
}, {
when: '+(fonts|img)/**',
then: gulpStart('assets')
}, {
when: '*.+(html|ejs)',
then: gulpStart('html')
}]
});
I should note that gulpStart is also a convenience function I made.
And here is the actual watch module.
module.exports = function (options) {
var path = require('path'),
monocle = require('monocle'),
minimatch = require('minimatch');
var fullRoot = path.resolve(options.root);
function onFileChange (e) {
var relativePath = path.relative(fullRoot, e.fullPath);
options.match.some(function (match) {
var isMatch = minimatch(relativePath, match.when);
isMatch && match.then();
return isMatch;
});
}
monocle().watchDirectory({
root: options.root,
listener: onFileChange
});
};
Pretty simple, eh? The whole thing can be found over at my gulp starter kit: https://github.com/chrisdavies/gulp_starter_kit

It is important to note that it looks like gulp.watch only reports changed and deleted files on Windows but listens for new and deleted files by default on OSX:
https://github.com/gulpjs/gulp/issues/675

You should use 'gulp-watch' for new/renamed/deleted files instead of gulp.watch
var gulpwatch = require('gulp-watch');
var source = './assets',
destination = './dest';
gulp.task('copy-changed-assets', function() {
gulpwatch(source+'/**/*', function(obj){
gulp.src( obj.path, { "base": source})
.pipe(gulp.dest(destination));
});
});