When I bundle the JavaScript files with the JSPM bundle command and I remove my own source files to obtain a third party library bundle, my CSS files are not removed from the bundle.
My grunt config looks like:
lib: { // third-party libraries bundle
files: {
"src/lib.bundle.js": tsAboutSrcFiles + " - [about/**/*] - [core/**/*]"
}
}
The CSS files that are part of the 'about' and 'core' directories are not removed and end up in the lib.bundle.js
config.js shows that the lib.bundle.js contains files such as:
"about/aboutbox.component.css!github:systemjs/plugin-css#0.1.22.js"
The question is: how do I remove these files from the 3rd party bundle?
Found a solution by trial and error, probably not the most elegant, but at least this works:
lib: { // third-party libraries bundle
files: {
"src/lib.bundle.js": tsAboutSrcFiles + " - [about/**/*] - [core/**/*] - [about/**/*!github:systemjs/plugin-css#0.1.22.js] - [core/**/*!github:systemjs/plugin-css#0.1.22.js]"
}
}
Related
JHipster i using the webpack to serve static files to users, but in my app i want images to load asynchronicly without webpack.
If i understand webpack correctly it is including all files that match the regexp and bundles them.
And any image file that lies in webapp folder will be included
This is the standart image-loader conf for jhipster app.
{
test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {
loader: 'image-webpack-loader',
query: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
}
}
}
]
}
I store the images url in database and wanted to use the spring resource handler to get the images.
Can anyone please tell me what is the correct way of writing the static resource path for jhipster defoult configuration.
I tryed to use /content/webapp/images/ ...
But it does not seem to work which is strange considered that all static files are located there.
the remote file is a single components compiled by webpack
the wenpack config as follow:
{
.....
library: library
,externals: externals
,libraryTarget: "umd"
.....
}
the components is in the cdn,
i want to load and use the remote components in react.
and how to use it like the Pseudo code :
ajax -> get a json > { components name } > use the name to load romote file
for example the json have the botton i need to load the botton.min.js
var Button = reuqire('http://botton.min.js')
class App extends React.Component {
render() {
return (
<div>
<Botton/>
</div>
);
}
}
export default App;
npm install scriptjs
var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
As I said in the other post: I have looked around for a solution and most of all proposals were based on externals, which is not valid in my case.
More info here: https://stackoverflow.com/a/62603539/8650621
Basically, I finished using a separate JS file which is responsible for downloading the desired file into a local directory. Then WebPack scans this directory and bundles the downloaded files together with the application.
Maybe you can find solutions on the following resoures:
https://stackoverflow.com/a/33293033/1204375
how to use webpack to load CDN or external vendor javascript lib in js file, not in html file
Webpack and external libraries
How to use a library from a CDN in a Webpack project in production
https://github.com/webpack/webpack/issues/150
https://github.com/webpack/webpack/issues/240
For local HTML/Sass/Css developement we use libsass (via Grunt) to compile our Sass files to Css. The Css background-image URL's are root relative.
Sass
$dir-img: /img;
.header {
background-image: url(#{$dir-img}/header.jpg);
}
We'd like to change the URL to use a CDN when compiling for production server:
background-image: url(http://media.website.com/img/header.jpg);
Is there some solution to pass-in a command-line argument TO Sass so Sass can use a Sass #IF to switch the root-relative URL's to hard-coded CDN like URL's. Something like:
Command-line:
grunt sass:dist --cdnurl="http://media.website.com/img/"
Sass
Then Sass checks if the command-line argument was given:
#if using CDN {
$dir-img: cdnurl;
#else {
$dir-img: /img;
}
And then all IMG url's would use the CDN URL.
I couldn't find anything on libass command-line options to pass said vars. to Sass.
But eventually came up with a working version of my own! Have Grunt write a Sass config partial.
Pretty simple actually if your already using Grunt and Sass. We'd already had NodeJS and Grunt-cli installed on our staging (test) -server.
Sass setup
In Sass we already used a (larger) Sass config file which holds a few vars like:
_config.scss
$dir-font: '/assets/assets/fonts';
$dir-htc: '/assets/htc';
$dir-img: '/assets/images';
This config file holds much more config settings but I've updated these vars. in this config file to:
#import "_sourcepaths";
$dir-font: '/assets/fonts' !default;
$dir-htc: '/assets/htc' !default;
$dir-img: '/assets/images' !default;
Note the #import partial of _sourcepaths.scss. This smaller partial file is generated by Grunt. The Sass !default; is used as fallback vars. or you might not even need these anymore (are overwritten by Grunt).
Grunt setup
On the Grunt side I added a custom task that is only executed on our staging (or test) -server (for example during a build process). On our local machine we keep using root-relative paths for local development.
Grunt custom target configuration
module.exports = function(grunt) {
grunt.initConfig({
writeSassConfig: {
options: {
scss: './assets/scss/partials/_sourcepaths.scss',
dirFont: '/assets/fonts',
dirHtc: '/assets/htc',
dirImg: '/assets/images'
},
cdn: {
//pathprefix: 'http://cdn.website.com'
pathprefix: grunt.option('pathprefix') || ''
}
}
}
});
Example cdn Grunt target with hardcoded (http://cdn.website.com) or dynamic (via grunt.option command-line argument) pathprefix. See below at 'Running the Grunt task' how to run this. It also has a fallback || '' to empty, which actually resets the paths in the Sass config file to root-relative URL's.
Grunt custom task
Then the required Grunt task (for configuration above). This Grunt task writes the Sass partial to disk.
grunt.registerMultiTask('writeSassConfig', 'Write Sass config file to change source paths', function(){
grunt.config.requires(
this.name + '.options.scss',
this.name + '.options.dirFont',
this.name + '.options.dirHtc',
this.name + '.options.dirImg',
);
// Create Sass vars
var _thisOptions = this.options(),
pathprefix = this.data.pathprefix || '',
contents = "// Generated by Grunt for dynamic paths like a CDN server\n";
contents += "$dir-font: '" + pathprefix + _thisOptions.dirFont + "';\n";
contents += "$dir-htc: '" + pathprefix + _thisOptions.dirHtc + "';\n";
contents += "$dir-img: '" + pathprefix + _thisOptions.dirImg + "';\n";
grunt.file.write(_thisOptions.scss, contents);
});
Grunt aliased task
This creates a custom chained workflow of two tasks running after each other. The sass:dist is a regular Grunt task and target via grunt-sass (libsass) plugin. You are probably already using this.
grunt.registerTask('build-sasscdn', 'Generate Sass config for different Sass paths like a CDN server path', function(){
grunt.task.run(
'writeSassConfig',
'sass:dist'
);
});
Running the custom Grunt task
The pathprefix var., via grunt.option('pathprefix'), in above Grunt custom target is provided via grunt command-line argument:
grunt build-sasscdn --pathprefix="https://cdn.website.com"
This domainname can be changed by the staging (test) -server server-side-scripting language (like .NET/PHP/Ruby). The Sass config file _sourcepaths.scss is now changed by Grunt to:
_sourcepaths.scss
$dir-font: 'https://cdn.website.com/assets/fonts';
$dir-htc: 'https://cdn.website.com/assets/htc';
$dir-img: 'https://cdn.website.com/assets/images';
Remember that _sourcepaths.scss is imported by Sass. The Grunt alias task then runs the usual sass:dist target, which just re-compiles the Sass (on the staging / test server) WITH updated hard-coded CDN domain name paths in the Css.
We are using Grunt to compile and concatenate our typescript files into a single javascript file located in our distribution folder. That functionality is working properly, but Grunt also creates .map and .js files for every ts file it finds; auto-generating them in the same location as the TS files.
Is there a way to prevent grunt from making these extra files and just generate the output.js and output.map?
This is a snip of our grunt.js file.
ts: {
task : {
src: ["**/*.ts", "!node_modules/**/*.ts"],
out: 'app/dist/app.js'
},
options: {
fast: 'never'
}
},
watch: {
typescript: {
files: '**/**/*.ts',
tasks: ['ts']
},
sass: {
files: '**/**/*.scss',
tasks: ['sass']
}
}
In tsconfig.json turn off the compileOnSave option to signal to IDEs not to generate all files for a given configuration upon saving:
{
"compileOnSave": false
}
Not all IDEs currently obey the option. See https://www.typescriptlang.org/docs/handbook/tsconfig-json.html for more detail.
It seams that your IDE is compiling your TS files.
It happens with me once with webstorm,
Witch IDE are you using?
Try to disable typescript compiler.
In case you are using webstorm:
Ctrl+Alt+S
Search for typescript under Languages & Frameworks
uncheck "Enable TypeScript Compiler" checkbox
In the continuing saga of attempting to migrate from an insanely complicated ant build to gradle - We have some resource jar files for 'javahelp' that I'm generating. They contain no classes. I need to add the output of the project that creates these resource jars to the root of my war (not to WEB-INF/lib).
My attempted solution:
apply plugin: 'war'
//Move files into position for the mmplEar project
task stage(overwrite: true, dependsOn: war) << {
}
war {
from project(':help:schedwincli').buildDir.absolutePath + '/libs'
include '*.jar'
}
dependencies {
//Ensure the jar is generated, but we don't want it in the lib dir
providedCompile project(':help:schedwincli')
}
This compiles and runs, and the :help:schedwincli does run and generate the needed jar, however when I open up my war file, the expected jar is not present anywhere in the war. Suggestions?
Edit
I made the changes suggested by Peter below, but now I get this error:
Could not find property 'resources' on configuration container.
This is where it says it's failing:
from '../../runtime', /*Fails on this line*/
'../../runtime/html',
'../../runtime/html/Jboss',
'../../runtime/props',
'../../runtime/props/Jboss',
'../../scripts',
'../../../proj/runtime',
'../../../proj/runtime/html',
'../../../proj/runtime/html/Jboss',
'../../../proj/runtime/props',
'../../../proj/runtime/props/Jboss',
configurations.resources
include '*.css'
include '*.gif'
include '*.html'
include '*.jpg'
include '*.jnlp'
include '*.props'
include '*.properties'
include 'jsps/**'
include '*.jar'
include 'log4j/**'
include 'setupLdap.cmd'
include 'spreadsheets/*.xlsx'
You want something like:
configurations {
resources
}
dependencies {
resources project(':help:schedwincli')
}
war {
from configurations.resources
}