Wro4j (Web Resource Optimizer for Java) make it easier for Java web developers to use things like SCSS / LESS / CoffeeScript / UglifyJS in their projects, without using the gems / npms directly.
I couldn't find though how do I use it for the simple use case of watching some SCSS files
What is the quickest equivalent to
sass --watch /src:/css
In wro4j?
I assume it is related to change detection. If it is true, than there is a configuration property called "resourceWatcherUpdatePeriod" which is used to check periodically resources for change. The next release (1.4.9) will improve the behavior of resourceWatcher by watching for change lazily.
Related
So I have an existing Create React Application and I want to be able to build a chrome extension to work in conjunction with it. Is there a away I can use webpack or something so that my extension kind "lives in" the React application? I want to do this because the existing application is quite large and I don't want to have to make changes (UI, api, or otherwise) twice. In my head I'm picturing it something like this:
- MyApplication/
- src/
- index.html
- App.tsx
- components/
- <bunch of other useful stuff>
- extension/
- index.html
- Extension.tsx (equivalent of App.tsx in react app)
Basically I'd be able to import whatever I need into the extension and run some command like build extension and it would bundle just the files and dependencies imported and necessary for the extension and output that to some directory I can upload to the Chrome Web Store.
I also briefly considered splitting the application into into something like MyApplication-core, MyApplication-web, and MyApplication-extension or something and just installing core in both web and extension but not sure if that's the best strategy or not. The first strategy I outlined seems simpler to maintain but I could be wrong.
Also, if there is another strategy I haven't thought of please let me know! Happy to add clarification if necessary as well! TIA!
Just build it and add manifest with required configurations. After this you will have posibility to load it as an extension.
I was trying to integrate a React.js app in Cordova. Everything goes well, but I was not able to debug the app in the simulator. With chrome://inspect it seems like there's no way to do it, because I can only see the "compiled code". Any solution? Thanks
Maybe there is another better way, but what do the trick for me is to build react with some custom files that i took from node_modules/react-scripts/
(i do that, to avoid react eject)
You need all the sources map on your app.
React by default, use a certain webpack config, but that config doesn't work in your phone.
By default, react use this
You can check it on the file node_modules/react-scripts/config/webpack.config.js
What i do, is to build react with the next webpack config
devtool: "eval-source-map",
So you must
Copy these files on your source code and adapt some imports (there are some import with relative path) You only need these two files
node_modules/react-scripts/scripts/build.js
node_modules/react-scripts/config/webpack.config.js
On the first one, modify it to use the second one,
On the second one, add this devtool: "eval-source-map"
Create new task on package.json , new custom build to use the script your custom build.js
Build with this script, and copy all the source maps with your code, and thats it.
The debug could crash sometimes, (i try it also with iphone + safari, sometimes works, sometimes don't so you must keep trying)
On android tend to work in a better way.
The debug is a little bit slow in compare to the web debug.
I hope this works for you too.
(Sorry for my bad English)
I read various answers like this regarding reducing the bundle size. First I wanted to understand what is going on with my 13MB bundle, so I've installed the Webpack Bundle Size Analyzer. It generated this output:
There are a few things I don't understand:
Why is react appearing twice with two different sizes?
How come it doesn't add up to 13MB? (it's around 4.75MB)
Does this means my own code is only 4KB? (last line)
Is it possible to understand from this tree how to save KBs? I mean, for instance, is there a way to use only parts of lodash or is it required as a whole by React?
Update:
Found the answer for #1. React-color requires ReactCSS which requires a different version of react and lodash. Without React-color my bundle dropped from 13MB to 8MB. I will try to find a way to re-use react and lodash.
It seems that you have eval-source-map devtool option in your webpack config file, that's why you are getting such huge bundle size. This way, sourcemaps are putting inside of bundle js file.
Try to change this option to source-map to build source maps separately.
// webpack.config.js
{
devtool: 'source-map',
// ... other options
}
1) Sometimes other dependencies require again lodash and / or react, so these dependencies are pulled in multiple times by webpack (usually happens when the version differs), here the DedupePlugin should help. The final bundle size also depends on your devtool entry in webpack, so in development it is usually much bigger as you probably have sourcemaps enabled and a your build is not optimized. Hard to tell without your actual webpack config.
2) Maybe webpack is already deduping?
3) last line says 400KB
4) You can definitely save a few kbs. A good way to start is using lodash-webpack-plugin with babel-plugin-lodash, this will import only the lodash methods you are actually using instead of the complete library. You can also just require the bits you need from material-ui as outlined in this answer.
I recently added the webpack-dashboard to my webpack config, so I instantly see the output and percentages that make up my bundle size, so maybe you think twice about adding huge dependencies if you don't really need them.
There are several blog posts that explain why switching from grunt or gulp to building with just plain npm is a good idea for example this one by Cory Hourse or this one by Keith Cirkle. One thing these blog posts do not explain is how I can easily do environment configuration. For example a common requirement is to have different REST API locations. During development the server might be running on localhost:8080, but on production it should be accessed through a relative URL such as /api or /rest/api and the port or protocol are different for development and production.
There are several solutions for this. For example grunt supports template strings like <% %> and <%= %> and there are grunt or gulp plugins like in this question about grunt-ng-config. These solutions are specific to Angular (which I am using), but I am not necessary looking for an AngularJS specific solution.
I also know of the angular-environment plugin, but as far as I can see this does configuration at run time and I am looking for something that can do this at build time.
So what I am looking for is something that allows me to configure my application at build time either by replacing some template strings or by generating a Javascript file with some variables that I can read at run time.
One requirement is that it should be OS independent. So I do not want to use UNIX specific tools such as sed to rewrite a file. And due to different variable expansion (e.g. % vs. $) a solution should not rely on environment variables.
Is there an existing solution or a best-practice for this?
due to different variable expansion (e.g. % vs. $) a solution should
not rely on environment variables
this cuts off your best solution. Why not rely on env vars? node provides
process.env
to access env vars. You could create custom gulp / grunt tasks that use process.env instead of the "different variable expansions" you refer to.
You can use, for example, Jade templating to pass env var values to your HTML at build time. This would generate your index.html on the fly as part of the build process and add relevant classes based on env vars.
For example, according to the value of an env var you might set a class on the HTML tag.
This might reflect the customer.
Then you could have some CSS
.customer1 .myimage {
background-image: url("customer1.png");
}
.customer2 .myimage {
background-image: url("customer2.png");
}
or you could use JavaScript to detect which class was added to head during the build.
A typical extjs example application includes the extjs library by referencing files such as:
ext-all.css
ext-all.js
What's the 'rails 3.1 way' of including these files, noting that they reference hundreds? of files in subdirectories
(e.g. ext-4.0.2/resources/themes/stylesheets/ext4/default/_all.scss)
and there are relative paths:
(e.g. background-image:url('../../resources/themes/images/default/shared/shadow.png'))
I'm tried numerous combinations of require_tree et al., but can't seem to get it to work.
I'm wondering if I need to mess w/ 'provide', but I can't seem to find the documentation I need.
What you want is for this file to compile via the Rails asset pipeline:
resources/themes/templates/resources/sass/my-ext-theme.scss
To get this to work, I learned a few things the hard way:
ExtJS uses SASS to compile (so does Rails) and Compass, which includes blueprint and compass CSS kits. Compass doesn't work with rails, you need to use the gem "compass-rails", which doesn't include the CSS toolkits. Only the main compass gem has these toolkits, and it's a dependency for compass-rails so you should get them if you bundle compass-rails, they need to be in your sass.load_paths config. If you include the "compass" gem without compass-rails you will have strange errors and become an expert at the rails asset pipeline as you try to solve them!
ExtJS uses an older version of SASS, the newer one Rails uses doesn't like having functions and mixins defined inside of modules. To fix this, look at the errors it's giving you (always a function or mixin definition) and move them to _functions or _mixins files.
(more info: getting error after ugrading to sass-3.1.8)
Here's how to get up and running:
Put this into your config/application.rb:
# Set up our ExtJS SASS build environment
config.sass.load_paths << "#{Rails.root}/vendor/assets/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/compass/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/blueprint/stylesheets"
Put the ExtJS stylesheets (the ext4/default directory in the SDK) here:
vendor/assets/stylesheets/ext4/default/
Put my-ext-theme.scss into app/assets/stylesheets and use it like you normally would with rails. It will call this code:
#import 'ext4/default/all';
That will bring in all of the ExtJS definitions, and you should be on your way.
Jeff! Take a look at my answer here, I think your problem is the same.