I'm starting a fresh web project and the last part of my configuration is to enable debugging for my CoffeeScripts files.
The whole project is build using a Grunt task that compile coffee to js and generates the proper map file but I cannot make the Coffeescript debuging work in IntelliJ.
Note that I don't want to use IntelliJ File Watchers.
Here is my Gruntfile :
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON('package.json')
coffee:
options:
sourceMap: true
files:
expand: true
flatten: true
cwd: 'src/'
src: ['**/*.coffee']
dest: 'src/'
ext: '.js'
concat:
option:
separator: ';'
dist:
src: ['src/**/*.js']
dest: 'dist/<%= pkg.name%>.js'
uglify:
options:
banner: '/*! <%= pkg.name %> v<%= pkg.version%> by Pierre Degand <%= grunt.template.today("dd-mm-yyyy") %> */\n'
dist:
files:
'lib/<%= pkg.name%>.min.js': ['<%= concat.dist.dest %>']
watch:
files: ['<%= coffee.files.src %>']
tasks: ['coffee', 'concat', 'uglify']
grunt.loadNpmTasks('grunt-contrib-concat')
grunt.loadNpmTasks('grunt-contrib-uglify')
grunt.loadNpmTasks('grunt-contrib-coffee')
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.registerTask('default', ['coffee', 'concat', 'uglify'])
My Simple CoffeeScript file (Break point is on line 2 on IntelliJ) :
name = 'Pierre'
console.log "Hello #{name} !"
Generated JS file from Grunt :
(function() {
var name;
name = 'Pierre';
console.log("Hello " + name + " !!");
}).call(this);
/*
//# sourceMappingURL=app.js.map
*/
The source map
{
"version": 3,
"file": "app.js",
"sourceRoot": "",
"sources": [
"app.coffee"
],
"names": [],
"mappings": "AAAA;CAAA,GAAA,EAAA;;CAAA,CAAA,CAAO,CAAP,IAAA;;CAAA,CACA,CAAA,CAAa,CAAb,EAAO,CAAM;CADb"
}
And finally the html I use to test
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="src/app.js"></script>
</body>
</html>
When I used File watchers, the .js and the .map.js were subfiles of the .coffee file, can I achieve the same behavior without using File Watchers ?
If I right-click/"Debug index.html" in IntelliJ, I can read "Hello Pierre!!" in my IntelliJ debuger console, but the script is not breaked on the console.log()
Did someone had same troubles ?
Thanks!
When I used File watchers, the .js and the .map.js were subfiles of the .coffee file, can I achieve the same behavior without using File Watchers?
No, you can't. This is a file watchers feature
If I right-click/"Debug index.html" in IntelliJ, I can read "Hello Pierre!!" in my IntelliJ debuger console, but the script is not breaked on the console.log()
This works for me if I refresh a page in browser after the code was executed. Please vote for this ticket
Related
This question has been asked before but there appears to be no concrete answer. My situation is perhaps simpler, and perhaps someone has found a solution by now.
I'm using vite to build a vue.js app, and wish to exclude a bunch of .js files which are just data (word lists for a word game) and which will be modified over time by the server. The files are in a subdirectory of the main build. I have added them into index.html:
<body>
<script type="module" src="./src/assets/words/3letter.js"></script>
......
<script type="module" src="./src/assets/words/9letter.js"></script>
<div id="app" align="center">
</div>
<script type="module" src="/src/main.js"></script>
and after reading through several posts here and at github I have modified vite.config.js in various ways:
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
},
optimizeDeps: {
exclude: [
'./src/assets/words/*.js'
],
},
// build: {
// commonjsOptions: {
// exclude: [
// './src/assets/words/*.js'
// ]
// },
// }
})
but neither the optimizeDeps method or the commonjsOptions method works; when I run npm run build the word files are still included in the build, and the refs to them are removed from index.html
If I remove type="module" from the html refs, the build process gives me errors:
script src="./src/assets/words/3letter.js" in "/index.html" can't be bundled without type="module" attribute
and the relevant lines aren't removed from index.html, but the word lists are still being bundled! - they're easy to see inside the big resulting built .js file
I guess I was taking the wrong approach.
Since the .js files I want to excllde are just data (which my change over time)....
export const words4 = [
"ABED",
"ABET",
"ABLE",
"ABLY",
"ABUT",
"ACED",
....]
.....it's best that I recreate them as .json files instead of .js files, then use an http GET to retrieve them. Or, since MySql will be running on the server, store the words lists there.
I am using the Tailwind CLI installation and all the files work except the PHP files.
So I decided to try adding in my TailwindCSS configuration the .php extension and then tried to connect to the page with the Live Server but no the page was not using Tailwind.
Here is my tailwind.config.js:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,php}"],
theme: {
extend: {},
},
plugins: [],
}
Ok so i manage to make it work if your .php file is located on the root directory your tailwind config must look like this.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./*.{html,php}"],
theme: {
extend: {},
},
plugins: [],
}
then on the portion where you have to link your output.css on your html head section you must include the ./
<link href="./dist/output.css" rel="stylesheet">
Or to validate open your dev tool network tab and check if output.css returns http response 200
I'm using Express/Node with Pug as the view template. Attempting to use Tailwind for styling, but have been unable to get Tailwind to modify my CSS based on the classnames added in the Pug files. Has anyone run into this before?
Here is the Pug file where I'm attempting to modify how "Testing tailwind" will display. However, it loads with black plain text.
I was able to populate my style.css file with the tailwind boilerplate base, components, and utilities. If I style the class name in styles.css it works, so the file is linked correctly...
Most likely Tailwind was not render. In this article and this video show how to do it.
You must install tailwindcss postcss autoprefixer postcss-cli
npm install tailwindcss postcss autoprefixer postcss-cli
Create postcss.config.js
module.exports =
{
plugins:
{
tailwindcss: {},
autoprefixer: {},
},
}
and tailwind.config.js
/** #type {import('tailwindcss').Config} */
module.exports =
{
content:
[
'./views/*.{pug, html}',
],
theme:
{
extend:
{
},
},
plugins:
[
],
}
And public/styles/tailwind.css css file within
#tailwind base;
#tailwind components;
#tailwind utilities;
To package.json add script
"tailwind:build": "postcss public/styles/tailwind.css -o public/styles/style.css",
And now you can build tailwind for your pug templates or some other html files. Just run npm run tailwind:build and open your host
But for don't running again and again this script you can watching for files with this script
"tailwind:watch": "postcss public/styles/tailwind.css -w -o public/styles/style.css"
Just run npm run tailwind:watch and your css file will be updating on change tailwind.css file
module.exports = {
content: ["./**/*.pug"],
theme: {
extend: {},
},
plugins: [],
};
try like this:
I recently encountered this problem. I was following this video and at the end, tailwind didn't seem to work at all.
After looking at document, I tried a new approach and it worked:
Instead of:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Injecting css file as the tutorial
link(href="./styles/style.css", rel="stylesheet")
body
h1 Hello world!
p My starter template
Try this:
doctype html
html(lang="en")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
title Node.js with TailwindCSS, Express and Pug
// Follow the document
style
include ../public/styles/styles.css
This worked out for me, I hope this helps some of you.
Happy coding!
Hello need help immediately,
I have web directory as
- WebContent
index.jsp
dojo
testjs
- bpl
- mywidget.js
Context path is /TestWeb/CheckDojo
script in index.jsp:
dojo.registerModulePath("testjs","/TestWeb/CheckDojo/testjs");
is working and i can do
require([ "dojo/dom", "testjs/bpl/mywidget", "dojo/domReady!"], ...
but in dojo 1.8 ,
in dojoconfig i am using
data-dojo-config="locale: en-us,
async: true,
config-tlmSiblingOfDojo: false,
packages: [{
name: 'testjs',
location: '/TestWeb/CheckDojo/testjs'
}],
parseOnLoad: true"
then in require mywidget is searched in dojo directory which is not the correct path.
what and how should i load the package ?
Look here enter link description here (module indentifiers). The documentation tells that the location is relative of the 'dojo' folder (defined in dojo.baseUrl).
You should change the code to :
data-dojo-config="locale: en-us,
async: true,
config-tlmSiblingOfDojo: false,
packages: [{
name: 'testjs',
location: '../TestWeb/CheckDojo/testjs'
}],
parseOnLoad: true"
Well, I read all about build and all about dojo. Three days nightmare and so on... Need some help.
I'm using the last version of dojo. 1.7.2 in:
</sites/somesite/scripts/dojo17>
which contains
--dojo
--dijit
--dojox
--utils
I use the following profile:
dependencies = {
stripConsole: "all",
action: "release",
optimize: "shrinksafe",
layerOptimize: "shrinksafe",
//optimize: "closure",
//layerOptimize: "closure",
//mini: true,
//localeList : 'en-us',
//cssOptimize: "comments",
//selectorEngine: "acme",
releaseName: "content7",
layers: [
{
// This is a specially named layer, literally 'dojo.js'
// adding dependencies to this layer will include the modules
// in addition to the standard dojo.js base APIs.
name: "dojo.js",
customBase : true,
dependencies: [
"dojo.fx",
"dijit.form.Button",
"dojox.gauges.AnalogGauge",
"dojox.gauges.AnalogArcIndicator",
"dojox.gauges.AnalogNeedleIndicator",
"myApp.smartmix"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ],
[ "myApp", "../../../myApp" ]
]
};
then i use this build script
./build.sh profile=../../../../myApp/myApp.profile.js releaseDir=../../../release
And I got the
</sites/somesite/scripts/release/content7>
which contains
--dijit
--dojo
--dojox
--myApp
NOW in my index.html file I have
<script type="text/javascript">
//<![CDATA[
var djConfig = {
parseOnLoad: true,
isDebug: false,
modulePaths: {
'myApp': '../myApp'
}
};
//]]>
</script>
<script type="text/javascript" src="scripts/release/content7/dojo/dojo.js"></script>
<script>
dojo.require('myApp.smartmix');
</script>
And YES this reduce the 230 files loaded without the build to 153 files.
BUT stills I (want to) believe that is posibble to reduce to one or 2 files.
But HOW?????
Please, some help will be appreciated!!!!
Ok, your profile is not right.
1st of all: You are using customBase, which is an advanced property for creating a minimal version of dojo core. I don't think you want that, do you? Normally, you just let dojo build its core normally, and that ends up as dojo.js in your output dir.
2nd of all: Every layer entry there will generate a minified .js file with all the files in dependencies inside it.
So, if you want your myApp stuff in a built JS file, you'll need to create a layer, and put your files in its dependencies.
Dojo will still generate all the individual files - but you don't have to deploy them. Just deploy the layer files. I usually have a layer for Dojo core, a layer for the dijit/dojox stuff I want, and then a layer for my custom JS. Then there are three JS files, which dojo will output in the dojo dir, and they are used in the HTML page.
...
layers: [
{
// this is a layer 'application', which will cache all
// dependencies to smartmix and declare smartmix in the same file
name: "../../../myApp/smartmix.js",
dependencies: [
"dojo.fx",
"dijit.form.Button",
"dojox.gauges.AnalogGauge",
"dojox.gauges.AnalogArcIndicator",
"dojox.gauges.AnalogNeedleIndicator",
"myApp.smartmix"
]
}
],
...
you will need only two requests;
<script src=..dojo.js></script>
and
<script>require(["myApp.smartmix"], function(smartmixApplication) { });</script>