Exporting your designs doesn't work very well right now, and we want to improve it. Currently, when you click the export button you must choose a folder where the exported files are going to be written to. But this might lead to accidentally choosing the wrong folder and overwriting other files.
We are planning to fix this with a new "Export" dialog:
It will be shown in place of the current folder browse dialog.
It will remember the export paths for your designs, so you won't accidentally overwrite other files.
It will be possible to export only a single page, instead of everything.
It will have options for minifying JavaScript and CSS and removing unused images.
Features that you suggest which we haven't thought about.
Do you like this idea? What else would you wish to see in this dialog?
@martin, all sounds good. If there is one thing that I would like is that I dictate where each JS/CSS/Image file gets exported too. We don't have everything under the layouts folder we have images in a completely different folder as well as JS files and CSS files
So when I export I have to copy stuff out of the assets folder to where they go and then edit the files for relative linking.
I would agree with Saj here on the ability to classify our own file structure for exports, which would of course be integrated into our projects while using them as well since we'd then set them up as so.
I have to say I've actually gotten used to the export of everything into the "assets" folder as it is now, but I've never set my files up this way before and it took some getting used to. Unlike Saj, I am much lazier and I don't intend to edit my pages any more than I have to so I will adjust to whatever structure we are able to use to keep editing after exporting to a minimum. As I've said before in other threads, I intend to use this as not just a page/site builder, but as the app for editing them along the way as well and so far that has proved to be totally doable. I commend the devs highly for the amount of work they've put into this to allow this.
So back to the structure. I for one would love to see it editable within the app so that we can tell it where we want our files to go while building the sites. This would keep the system simple for adding folders in our Design structures so that they go where we expect them to on export. Hopefully that makes sense. :)
In the new export dialog we can show the tree of all files in your design.
Next to each file we can show a "Destination" textbox, which is prefilled with the file name by default. By editing this text box:
You can change the file name or extension
You can add "../../somefolder/", or "C:\Users..." in front of the file name to change the folder it will be exported to.
Renaming and changing the extension is straightforward. But changing paths can lead to many issues. For example, if you modify where an image is exported, what should we put as src attributes in the HTML pages?
For changing paths I would suggest maybe removing the "assets" folder from the equation first. Make all the default folder locations go to the root directory (unless we choose to keep it [a toggle maybe for those that choose to use the current "assets" setup?]). That would probably solve 1/2 the issues with people needing to alter file locations after export. From there, give us the ability to move even those default folders to wherever we want them (without the "assets folder at all).
Then we'd need the ability to create folders at the root level rather than just within folders that are default app folders. With this, then the app would read the "src" from whatever location is in the Design tree (or external links of course).
I guess what I'm saying is we need more freedom to create our folders trees in the Design tree. You could still keep the JS and CSS setups so they do the automatic setting up of the file structure in the <head> of the pages, just that the files would go into the root directory (or wherever we move them to) instead of within an "assets" directory.
Just rambling here on thoughts with it. I'm not a programmer, just a designer so my head can many times come up with things that I think are doable and maybe they aren't lol. I figure it can't hurt to voice the thoughts and at least the ideas are out there just in case something of them is usable. :)
Ok, after many rewrites and even an image :) I think I came up with my final solution.
Based on what @Martin is describing, this is what I'm thinking. Everything you recently said in your post seems like it would work for me.
However, I would change this on it. In the destination give the full path as the app would write it i.e. /assets/img/filename.extension as default.
Editing it changes the SRCs in exported CSS/HTML accordingly. Possibly add an option to update app SRCs (i.e. create folder/move files into folders etc..) so you don't have to do this every time you export. I realize that might be stretching things a little far though.
Add a Change Path button to browse to folder for where the file will physically export to if it's going to be different then the Destination input. The CSS/HTML source would remain as written in the Destination field. So clicking the button put the physical path as wording under the Destination input and export it there. If that isn't set then use what is in the Destination input. Maybe a clear button for the changed SRC.
And one more thing, I export directly to a DEV web server and most of my images I already have physically there on the web server. So possibly add a checkbox for "Update Source Code Only" so it doesn't physically export the file.
You want to set an special dialog for EACH file???!??!?
What should that be good for? You have to program around each file - that will be confusing. And you have to handle it all on an extra level.
I think "keep it simple" should be the first way. The more complex the program will get - the more errors and bugs will find the way in.
What reason for should the exported version different to the intern version???
IF there is a reason ( I have some) then it is much too complicated to set it up in BTS. It's much easier to setup special folders in the next IDE that will used for php-developing e.g.
When I have an exported structure that don't fit my mind... and I have 200 folders, and images, and files - I don't want to spend hours of changing EACH file and folder in BTS to change - I use "search and replace" after the export - that are some minutes to go.
You should use your time to make inside BTS everything work easier.
- Renaming the links of used images when they moved to another folder, or if they are renamed.
- setup the drag-and-drop to move folders and files
If someone dislike the asset folder for their design - that should be enough to make it variable.
The BIGGEST and most IMPORTANT thing in the export is - MAKE it that each design REMEMBERS where the last export was. So if there are more than one design open at the same time, that you don't have to switch each exportdestination back and fore manually. If you forget to switch... the wrong export is overwritten.
And as Saj said... maybe the check before overwriting the same existing file, and save only newer ones.
I see where your coming from Frank.. And I do like some of your points. This is why we are discussing it to fleshing out our ideas :)
One of the main things for me is that at work here we use .shtml file extensions in all our HTML files. And we have a few areas were our images are outside the "ROOT" of the project yet referenced in our code as if they were. All handled by the webservers use of symbolic linking.
So here's some ideas of mine after reading Franks post.
Maybe what could be done is that right clicking the Pages section in Design pane add an option for Default Properties.
In the Pages Default Properties you can set default extension and folder path. When you go to export, each file has an option where you change from the default if need be, such as the Destination input as @Martin described where it contains the full folder path/file.extension as indicated in the Default Properties, or if not changed then the BSS apps default setting.
Then for the Images section do something similar as the Default Properties where you can set the default path. Then on export similar to pages a Destination input where you can change specific files if need be to be different and add the checkbox of update source only.
I like your idea of saved config for each project as well as in the project if I move an image to a folder, update the projects HTML/CSS accordingly.
I find the fact that the Export function does not request an html filename and always creates index.html to be very bad. It wiped out our landing page. Fortunately, we had multiple backup copies. It definitely should request the name of the html file for the page you are creating.
+1 to Franks comment about the app remembering where each project is exporting to. It's a good thing I check that closely before I save, I almost saved a project in another project's folder a couple times now. Would love it if the app could please remember the last place a project was exported to... per project setting.
The new export functionality was added to version 2.4.2, which we released yesterday. It supports remembering export destinations, minification and using CDN for jQuery, Bootstrap and the icon fonts.
After much deliberation, we decided that there is an impossible number of different transformations that people might require from the export. This is why instead of building a similarly complex interface to customize the file paths, we made something better - the ability to configure an Export Script, which is called after every export. This is more involved, as it requires writing code, but gives you a lot of control. You can write the script in any language. For Linux and macOS it should be marked as executable (+x).
For example you can write a script like this in bash to rename a specific file from .html to .php:
#!/bin/bash
cd $1 # the export path is passed as the first argument, which is why we cd there
mv index.html index.php
Similarly, you can move images to external folders, replace parts of your generated code, optimize your images and more. It all depends on what you are able to do with your script.
Although this all sounds great, I'm not a programmer at all so this coding stuff is a bit lost on me. Will there be support examples to help those of us that are not programmers to create various scenarios to get us started?
I could even do something like copy to my server via ssh!
@Jo - There's lots of script help available on Google for this kinda stuff, you'll find it rather trivial to make complex stuff happen with this addition! This is the right solution for this application!
@Martin - maybe you can make an online snippet section like components that people can install or copy / paste. Like "Export as PHP", and it just works for people. "Export as ASP", etc.
Thanks Andrew, I'm sure there are a ton of places on google, but .... I would have to know what to search for to do that lol. As I said, I'm not a programmer, so I have no clue what language I'm looking at in many cases. Working on it, but it's a time consuming process for this old brain so it will be a while before I'm anywhere near using it lol. I like the idea of the Snippet section though, that would definitely make a difference.
Other than exporting to specific locations in a directory, I don't even know what I'd have a need for this for at this time lol. I think right now it would only be used for setting the export directory of specific folders (js, css, etc.) into the root directory rather than within the assets directory.
I have to say one thing on this though. I'm finding it more and more convenient to have the files where they export lol. It's more the importing of them that's giving me grief than the exporting lol. Thanks for your suggestions though Andrew. :)
I would assume that those of us with win10 anniversary update would need to install the Linux Bash Shell for win10 so that we could use the bash example as stated?
I am also one that doesn't know this method of scripting. I had tried making a .sh file with the above example to no avail. Any direction would be helpful.