I am creating a watch.json file on glitch.com, following these instructions: https://glitch.happyfox.com/kb/article/60-can-i-change-which-files-cause-my-app-to-restart/
My goal is to NOT automatically restart the browser page after every edit in JS or CSS files. Or when it does, it should throttle to reload only after 50 seconds.
{
"install": {
"include": [
"^package\\.json$",
"^\\.env$"
]
},
"restart": {
"exclude": [
"^public/",
"^dist/",
"\\.js$",
"\\.md$",
"\\.html$",
"\\.css$"
],
"include": [
"\\watch.json"
]
},
"throttle": 50000
}
Sadly, this doesn't seem to work. Any change in JS or CSS files will immediately cause a reload. What could be wrong?
The glitch project is here: https://glitch.com/edit/#!/ml5test-two
The watch.json file refers to build/restart times for full-stack apps, not browser window refreshes. You can turn off "refresh app on changes" in the project menu in the editor. See: https://help.glitch.com/kb/article/46-can-i-turn-off-or-on-automatic-refreshing-of-the-app-preview-when-i-make-changes/
Question Part 1
In my current setup, I have a folder that looks like this:
/wwwroot <-- Hosted in localhost
/_project <-- Contains gruntfile.js
/_dev <-- Contains Source Code
The wwwroot folder is hosted in XAMPP and open in my browser. The _project folder contains my gruntfile.js, and _dev contains all the JS and SCSS that is compiled into JS and CSS by Grunt.
This has worked fine for a year or two, but recently, I updated my packages, and the generated sourcemaps have begun breaking. Chrome shows a blank code panel in Sources, and Firefox Dev displays a 404 error's HTML in the sources code panel. The sources were now being looked for inside the /wwwroot folder. Because of this, the sources 404 and aren't shown, and I can't use sourcemap debugging which I rely on.
Relevant parts of Gruntfile:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
Short of painfully rearranging my directory structure... how can I fix this?
Question part 2:
I've tried using grunt-uglify-contrib's sourceMapRoot option as follows:
uglify: {
common: {
options: {
mangle: false,
compress: true, // true or false or {}
preserveComments: 'all', // true or 'all' or 'some'
sourceMap : true,
sourceMapRoot: "C:/Users/quint/Documents/Github/build-siteengine/a/a/a/a"
},
files: {
// '../wwwroot/Content/includes/js/libs.js': ['../_dev/js/common/libs/*.js'],
'../wwwroot/Content/includes/js/buildbar.js': ['../_dev/js/common/buildbar/*.js'],
'../wwwroot/Content/includes/js/framework.js': ['../_dev/js/common/framework/*.js'],
}
},
}
For some reason, though, the paths that show in the Sources panel in Firefox Dev are missing four directories, hence why I've added the /a/a/a/a. Why would this be happening?
This also doesn't solve my problem, since in Firefox Dev clicking on the line numbers open the file in the browser and don't take me to the line of code in the debugger, and in Chrome there is no effect.
I am trying to minify my web components using gulp's uglify plugin but it fails because it does not recognize the custom html tags.
Are there any gulp plugins that can minify html containing custom tags?
Try out gulp-htmlmin.
I use it to minify my elements.html file after vulcanising, but I suppose it should work on non vulcanised elements just as well.
Here's how I call the plugin inside my gulpfile:
.pipe(htmlmin({
removeEmptyAttributes: true,
customAttrAssign: [{"source":"\\$="}],
customAttrSurround: [
[ {"source": "\\({\\{"}, {"source": "\\}\\}"} ],
[ {"source": "\\[\\["}, {"source": "\\]\\]"} ]
],
collapseWhitespace: true,
// always leave one space
// because http://perfectionkills.com/experimenting-with-html-minifier/#collapse_whitespace
conservativeCollapse: true,
minifyJS: true,
minifyCSS: true,
removeComments: true,
removeCommentsFromCDATA: true,
removeCDATASectionsFromCDATA: true
}))
To do this is quite the challenge. You use the crisper plugin to factor out the script into it's own file. You can then minify the script source. Afterwards use vulcanize to inline your script back into the HTML.
I have a TypeScript project in Visual Studio Code with the following task:
{
"version": "0.1.0",
// The command is tsc.
"command": "tsc",
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// Under windows use tsc.exe. This ensures we don't need a shell.
"windows": {
"command": "tsc"
},
"isShellCommand": true,
// args is the program to compile.
"args": [],
// use the standard tsc problem matcher to find compile problems in the output.
"problemMatcher": "$tsc"
}
This works well when we hit "Ctrl + Shift + B" to build.
Is it possible to have another task that when we press "F5" to run/debug it runs a command through the command line?
Thank you.
TASK RUNNERS VS DEBUGGING PLUS LIVE PREVIEW
Task Runner
Currently, for VSCode version 0.5.0, you can use a task runner, identified in your task.json, to run multiple tasks using the same runner. At this time, configuring different tasks runners is not possible. For example, if you were using Gulp as a task runner you might have something like the following:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "serve-dev",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
},
{
"taskName": "serve-build",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
}
Now the Gulp tasks would be defined and coded with Gulp but the important thing to note is the isBuildCommand and isTestCommand as these correlate to CTRL+SHFT+B and CTRL+SHFT+T respectively. So these two tasks would be available as keyboard shortcuts. In addition, if you add additional tasks they will each be enumerated and accessible with CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". Each of your tasks with be enumerated, listed and selectable.
The following code just demonstrates how eash VSCode task is related to a task runner task:
//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {
serve(false /* is Build */);
});
//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {
serve(true /* is Dev */);
});
Debugging
Now for debugging with Node.js or Mono you have similar options. You will want to configure your launch.json or press the 'gear icon'. You can set the debugger to debug or run your app and use the VSCode 'F5' or PLAY button or menu's to start/stop/restart your app. From there you just use your favorite browser and access the server of your app. You can also use an external debugger to 'attach' to your app. Following is a sample launch.json:
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Debug src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": true,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Run src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
Notice the 'stopOnEntry' property for the RUN and DEBUG setups. This is how you can use the debugger to run or debug the app. From there you would just use the debug 'PLAY' button combined with the debug menu to select the appropriate configuration.
Live Preview
Live Preview is not currently implemented in VSCode. Two of my favorites so far are BrowserSync and Live.JS.
GULP TASK WITH NODEMON
Following is some code that may help point the way to configuring Gulp to run a node.js server. Remember that Gulp tasks can require other tasks to run first. In the code above, the Gulp task "serve-build" requires another task "optimize" to run first. "optimize" can require other tasks to run and so forth.You can chain these tasks so that your top level tasks run all of your sub-level tasks. Following is a function that's executed from a Gulp task in the gulpfile.js setup:
function serve(isDev) {
log('Start pre processes and node server...');
var nodeOptions = {
script: config.nodeServer,
delayTime: 3,
env: {
'PORT': port,
'NODE_ENV': isDev ? 'dev' : 'build'
},
watch: [config.server]
};
return $.nodemon(nodeOptions)
.on('restart', ['vet'], function (ev) {
log('*** nodemon restarted');
log('files changes on restart:\n' + ev);
setTimeout(function () {
browserSync.notify('reloading now ...');
browserSync.reload({ stream: false });
}, config.browserReloadDelay);
})
.on('start', function () {
log('*** nodemon started');
startBrowserSync('isDev');
})
.on('crash', function () {
log('*** nodemon crashed: script crashed for some reason');
})
.on('exit', function () {
log('*** nodemon exited cleanly');
});
}
So the following Gulp tasks actually just run this function which runs nodemon via the Gulp nodemon plugin to make production / "build" or test / "dev" builds using a parameter variable:
//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {
serve(false /* is Build */);
});
//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {
serve(true /* is Dev */);
});
MAPPING GULP TASKS TO THE VSCODE TASK RUNNER
Finally, you can map your top-level Gulp tasks like "serve-dev"
and "serve-build" by adding entries to your VSCode tasks.json and using isBuildCommand and isTestCommand to map to CTRL+SHFT+B and CTRL+SHFT-T respectively.
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "serve-dev",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
},
{
"taskName": "serve-build",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
}
VSCode Output
VSCode also has a task.json property to show output of your running tasks in VSCode. This will open the OUTPUT window of VSCode just like using SHFT+CTRL+H or selecting the menu VIEW then selecting SHOW OUTPUT. At this time the output window does not display color.
Just set "showOutput" to always. Perhaps this could replace your need to start a terminal/command line window thats running your node app. You can also set this property to never or silent depending on your needs. You can find more info about these properties in the VSCode documentation.
You can also STOP a running task by with CTRL-SHFT-B or CTRL-SHFT-T or use the menus after starting a task.
Finally, if you must compile your code and run the app in a terminal I think you will need to use a script/batch file in your task.json configuration that runs your task runner and then starts your node server.
If you don't want to use gulp and just do the typescript compilation then a simple way is to go to terminal and run tsc -w <filename.ts>, no need of tasks.json.
It watches for file changes and converts them to js files.
Then whenever you hit 'F5' it should run the updated js file pointed in launch.json.
If you want tsc to convert mutiple ts files you can also add tsconfig.json in your application root with "rootdir", then just run tsc -w and F5 to execute application.
sample tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "ES5",
"outDir": "<js dir>",
"rootDir": "<point to all ts dir>"
}
}
I believe this was solved by a later feature, namely the pre launch task. You can have it run a task before it launches node/Chrome with F5.
http://tstringer.github.io/javascript/vscode/nodejs/gulpjs/2015/10/14/vscode-prelaunchtask.html
Preface: I'm a beginner to this stuff.
I'm trying to make an extension that replaces the current tab url with a predefined url. So far I have the following:
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.update(tabs.id, {url: "https://www.wikipedia.org/"});
});
The chrome app developer tool tells me that "tabs is not defined" but I have "tabs" in my manifest permissions. Manifest:
"permissions": [
"tabs",
"declarativeContent",
"https://www.wikipedia.org/"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon-19.png",
"default_title": "Simple-Switch"
}
Permissions don’t declare variables that you can use (as if there were a "var tabs"); they define what functions you are allowed to use (in this case, that you can call functions in chrome.tabs).
Your problem is that your callback takes an argument of tab, but you use the variable tabs. Hence "tabs is not defined". So the simplest fix would be function(tabs). But you should also use tabs.query instead of the deprecated tabs.getSelected:
chrome.tabs.query({active:true,currentWindow:true}, function(tabs){
chrome.tabs.update(tabs[0].id, {url: "https://www.wikipedia.org/"});
});
You can also change the tabs permission to activeTab.