Is there a way to turn off compiling/minify of JS and CSS in development mode? If I make one change to one file do I have to do “bench build” in order to see the results? Is there a way to only compile the file that has changed, perhaps automated? It’s pretty time consuming waiting for all the compile before you can refresh to see your changes.
Thank you,
Dave
Add bench watch in your Procfile (in frappe-bench folder) to auto rebuild on file save.
It should be there by default.
I checked my Procfile it does have a watch statement. It should be the default, I haven’t changed anything. Here is the contents:
Procfile:
redis_cache: redis-server config/redis_cache.conf
redis_socketio: redis-server config/redis_socketio.conf
redis_queue: redis-server config/redis_queue.conf
web: bench serve --port 8000
socketio: /usr/local/bin/node apps/frappe/socketio.js
watch: bench watch
schedule: bench schedule
worker_short: bench worker --queue short
worker_long: bench worker --queue long
worker_default: bench worker --queue default
Snippet from hooks.py
app_include_css = "assets/custom_test/css/test-it-min.css"
build.json
{
"custom_test/css/test-it-min.css": [
"public/css/style_edit.css",
"public/css/foo.css"
]
}
Location I am placing the styles sheets:
/frappe-bench/apps/custom_test/custom_test/public/css
* style_edit.css
* foo.css
You don’t have to include it in app_include_css if you are bundling it in build.json
bench watch will only build packs for which the file has been changed.
I’m really confused on where and why to include the CSS in a particular file (hooks or build). The reason I assumed it went into build.json, was to combine multiple CSS into one file and minify (assumed the minifying only happened in production I thought including it in hooks.py, made frappe include it on the final page/head section.
If I am only to include it in one, which one is preferred?
I understand only modified files are to get built, which is what I want. Im only running ‘bench build’ because when I modify a CSS file nothing happens. I can refresh the browser, clear cache and refresh, and even look at the log displayed on the bench start terminal. Nothing seems to happen even though I am modifying the file and saving it. When I run bench build, of course it refresh because everything is being rebuilt.
Ill try to look back at the documentation as well. Go over building an app section. Any insight you can give would be appreciated.
After messing around with it for some time , I finally have the javascript compiling multiple JS files and updating “live”, no need for a restart. This is the first time trying the JS, I was focused on CSS at the time. I double checked the paths, everything matches the JS paths, of course substituting CSS for JS in the path. Still the CSS wont building. The JS files will rebuild anything I have in the build.json once dirty. It displays it both in the terminal and on the site. The only way I can get CSS to rebuild is by killing the server and starting it back up. It rebuilds that way, which make me think the paths should be correct.
Last post here about this. 
I went to the erpnext app and made a change to a JS file, and watched the log and it update:
| /Users/starke/frappe-bench/apps/erpnext/erpnext/public/js/communication.js dirty |
So then I tried to modify a CSS file in the erpnext app, and nothing in the log. Reacts the same way my apps does. I did a fresh install with CentOS 7 (minimum) and the easy install script at Linode instead of using my local mac… Install went smooth. However, I am getting the same results.
Is there a config file for watch? It is suppose to monitor the CSS folder, correct?
Super stoked to start learning erpNext, but having to refresh my own CSS each time is getting frustrating.
Thanks in advance!
Which CSS file are you editing?
My apologies upfront for being so verbose. I just want to make sure I explain what I think what should happen is correct.
I just did the test again, because I don’t remember the files I did earlier. The first image is the JS file edited. I edited conf.js, the console shows that conf.js is dirty, and it writes out erpnext.min.js. As I would expect. But speaking of what I expect, let me confirm what I am thinking is the way it really works.
For example, when I edited conf.js, it wrote erpnext.min.js becuase in the build.json file:
Build.json:
],
"js/erpnext.min.js": [
"public/js/conf.js",
"public/js/utils.js",
"public/js/queries.js",
"public/js/sms_manager.js"
conf.js is part of the value of the key “js/erpnext.min.js” (not sure if the wording is correct on that)". So when edited, it writes out erpnext.min.js because “watch” sees that conf.js is dirty, so it needs to rewrite erpnext.min.js.
erpnext.min.js gets added to the app, because of the line in hooks.py
hooks.py:
app_include_js = "assets/js/erpnext.min.js"
Is this correct?
Screen shot below of the successful rewrite of erpnext.min.js.
Then I moved on to the css file. I edited website.css in the frappe app. In the build.json file:
{
"css/frappe-web.css": [
"public/css/font-awesome.css",
"public/css/octicons/octicons.css",
"public/css/website.css"
I would expect when "website.css becomes dirty, it would rewrite "frappe-web.css, and be added in the app becuase in hooks.py, it has line:
web_include_css = [
"assets/css/frappe-web.css"
]
But as you can see in the screenshot below, when I edit website.css by adding
.foo {
color:red;
}
But the console shows nothing and file “frappe-web.css” is not updated. See below.
I just downloaded the virtual image, and it reacts the same way my mac and the centos install works. So everything must be in good order and the way I think it works is just incorrect.
Confused and throwing in the towel! 
I don’t know why in official documentation we are missing many information miss leading or uncompleted information like this command bench start
btw, when there are option like bench watch to build assets automatically also there is command like bench serve --port 8000 to just serve the application for development and testing
