I have a gulp task I am debugging but to hit the first break point takes a really long time.
This is how I debug my task
node-debug gulp taskName
It brings up chrome and it takes about 30 seconds to hit my break point. I want to note that my gulp file and code I am trying to debug is very small and a very light weight.
I figured out the issue.
My gulp file has globally defined requires at the top for other tasks on the file.
//var browserSync = require('browser-sync').create();
//var foreach = require('gulp-foreach');
//var fileList = require('gulp-filelist');
//var gp_concat = require('gulp-concat');
//var gp_rename = require('gulp-rename');
//var gp_uglify = require('gulp-uglify');
//var browserSync = require('browser-sync').create();
//var watch = require('gulp-watch');
//var removeFiles = require('gulp-remove-files');
//var fs = require('fs');
While my task did not use them they still were initialized and therefore added to the debugging load time. What I will do is define them where ever I need them.
Related
I am trying to repeatedly update a file using a cronjob. Eventually, this is going to be more complicated but for now I'm trying to figure out my current problem. I know the code below is somewhat over-complicated because I preserved the basic structure while trying to problem solve. Here is the server file:
// server.js
var express = require('express');
var port = process.env.PORT || 8080;
var http = require('http');
var fs = require("fs");
var curtainup = require('./diagnoseleak.js');
var url = require("url" );
var app = express();
// launch ======================================================================
app.listen(port);
//run the CronJob
var CronJob = require('cron').CronJob;
new CronJob('0 * * * * *', function() {
console.log("running");
var date = new Date();
console.log("Ran at: "+date.getHours()+":"+date.getMinutes());
curtainup.doitnow();
} , null, true, 'America/New_York');
And here is the file referenced called diagnoseleak.js:
var fs = require("fs");
var mostRecentLocation = "./config/pullfiles/mostRecent55.txt";
module.exports = {
doitnow: function(){
var writethefile = function(){
fs.writeFileSync(mostRecentLocation, "A file called mostRecent55 should be create with this text", { flag: 'w' });
console.log("This should write to the console");
}
writethefile();
}
}
From the directory that houses the server file, I type the following into cmd:
git add .
git commit -m "adding files"
git push heroku master
heroku run bash
Then into the bash window I type:
cd config/pullfiles
ls -l
AND...no file called mostRecent55.txt appears. Am I looking in the wrong place? Eventually I want to be able to update a file, but I have a feeling I'm either looking in the wrong place for this mostRecet55.txt file or going about the process of writing it incorrectly.
heroku doesn't let you write files onto the filesystem where your app is stored. You would need to use an add-on, database or external service of some kind. The only exception seems to be /tmp which is only temporary storage
I would like to use gulp to run a custom browserify command whenever a js file (function.js) is modified.
The browserify command that I want to run is;
$ browserify function.js --standalone function > bundle.js
I am using this gulpfile.js as sample.
https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md
How do I modify this gulpfile to run the customized browserify command?
'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
// add custom browserify options here
var customOpts = {
entries: ['./src/index.js'],
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
// add transformations here
// i.e. b.transform(coffeeify);
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./dist'));
}
I am using node.js v6.9 on webstorm.
The command you want to run is;
$ browserify function.js --standalone function > bundle.js
Based on this, the modified code is;
// add custom browserify options here
var customOpts = {
entries: ['./function.js'],
standalone: 'function',
};
Simply add one more property to customOpts for the --standalone parameter. The rest of the code remains the same.
I have seen lots of posts online about how to use a set of variables defined in a file using a require statement.
I want to know how I can use two files.
For example, in pseudo...
gulp --env=prod
if (env):
defaultConfig = require('./config/default.json')
envConfig = require('./config/prod.json')
config = combine(defaultConfig, envConfig)
else:
config = require('./config/default.json')
// Now i can access everything like so...
console.log(config.name)
console.log(config.minify)
This keeps by config DRY and also means I don't have to create a new file for every environment I have.
I'm new to Gulp but i thought this would be a common requirement however, Google hasn't turned up anything for having defaults merged with env specific settings.
Do i need to write a node module?
You can do it with ES6 function Object.assign:
gulp --env=prod
if (env):
defaultConfig = JSON.parse(require('./config/default.json'))
envConfig = JSON.parse(require('./config/prod.json'))
config = Object.assign(defaultConfig, envConfig)
else:
config = JSON.parse(require('./config/default.json'))
// Now i can access everything like so...
console.log(config.name)
console.log(config.minify)
ES6 is supported in Node so you can use it whenever you want.
EDIT: If you have older versions of Node, you can use extend like Sven Schoenung suggest.
Use yargs to parse command line arguments and extend to combine the two config objects:
var gulp = require('gulp');
var argv = require('yargs').argv;
var extend = require('extend');
var config = extend(
require('./config/default.json'),
(argv.env) ? require('./config/' + argv.env + '.json') : {}
);
gulp.task('default', function() {
console.log(config);
});
Running gulp --env=prod will print the combined config, while simply running gulp will print the default config.
Use the following function :
function combine(a,b){
var temp0 = JSON.stringify(a);
var temp1 = temp0.substring(0, temp0.length-1);
var temp2 = (JSON.stringify(b)).substring(1);
var temp3 = temp1 + "," + temp2;
return JSON.parse(temp3);
}
I've successfully got Browserify to compile my JavaScript entry files, but I want to utilise the Remapify plugin so as to not have to specify the full relative path upon requiring a module every time.
For example:
require('components/tabs.js')
Rather than:
require('../../components/tabs/tabs.js').
But I cannot get the shorter module references to map to the corresponding file... "Error: Cannot find module [specified_ref] from [file]".
Have I misconfigured Remapify, or is there something wrong with my wider Browserify setup? I am new to Broswerify and Gulp having previously used Require.js and Grunt. Any help would be greatly appreciated. Please let me know if you need any more information about my setup.
If alternatively you can recommend an alternative Gulp task file that will do all of this, thereby throwing my current task out the window, by all means. I wasn't able to find many Browserify + Remapify examples.
Directory Structure
I have my modules (components) in the following directory: './src/components', so for example: './src/components/tabs/tabs.js'.
I am requiring these modules in a JS file for a given page of the app, which are in: './src/pages', so for example, './src/pages/portfolio/portfolio.js'.
Gulp Browserify Task
var gulp = require('gulp');
var config = require('../config');
var browserify = require('browserify');
var remapify = require('remapify');
var source = require('vinyl-source-stream');
var glob = require('glob');
var browserSync = require('browser-sync');
gulp.task('browserify', function(){
var entries = glob.sync(config.src.pages + '/**/*.js');
return browserify({
entries: entries,
debug: true
})
// (Remapify:)
.plugin(remapify, [{ src: config.src.components + '/**/*.js', expose: 'components', cwd: config.srcDir }])
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest(config.build.js))
.pipe(browserSync.reload({ stream: true }));
});
Page.js
'use strict';
var tabs = require('components/tabs.js'); // (Doesn't work, but I want it to)
// var tabs = require('../../components/tabs/tabs.js'); // (Does work)
Remapify has all sorts of problems. I suggest giving my pathmodify plugin a shot.
For your situation usage would look something like:
var pathmod = require('pathmodify');
// ...
.plugin(pathmod(), {mods: [
pathmod.mod.dir('components', '/path/to/src/components'),
]})
I'm using script like this:
run.js:
var gulp = global.gulp = require('gulp');
require('./gulpfile.js');
//interaction
gulp.start('zip');
gulpfile.js:
global.gulp = global.gulp || require('gulp');
gulp.task('zip', function () {});
And start: node run.js
I need it because I need collect some data via inquirer.prompt() before task start.
Everything works, but console freeze cursor after script end(in PHPStorm).
I don't understand why. If I run task via gulp, it's ok.
As mentioned by Aperçu in the comments, try letting gulp know that you're done your task.
Change
gulp.task('zip', function () {});
to
gulp.task('zip', function (done) {done()});