I'm not sure if this is a problem with h5bp mobile or my version of ant or what - but whenever I run the build script on a project or even on a freshly downloaded version of h5bp mobile the js/lib files such as jquery and modernizr are not copied across to the publish folder. They DO appear in the intermediate folder so the build script is at least aware of them. It works fine on the non-mobile version for some reason.
Remove the included build directory and replace it with the newest one from github.
You need to update some properties in project.properties, though (JS libs directory, main css file, ..).
Related
I want to integrate some build tools like NPM and Grunt whilst i'm working on my Wordpress theme. Eg...I'll write some Sass to compile it down to an .css file.
Where do the build files like grunt file and node_modules folder live within the wordpress theme?
There's documents on how to do it but not many documents on how it is structured.
How do you structure build tools to work with a wordpress theme?
I usually compile my own version of css from scratch when doing a client website - using built in tools suggested by either bootstrap, bulma or uxkit. For bulma you have a nice introduction on how to compile their framework
https://bulma.io/documentation/customize/with-node-sass/
In my workflow - I don't know if that would be optimal for everyone - I put wordpress files on the same level as node_modules folder but compile straight to wordpress theme folder, so my build command is as follows:
"css-build": "node-sass --omit-source-map-url src/scss/app.scss ../wp-content/themes/labaza/app.css",
So in this case when you take your files from local machine to server you just overwrite theme folder, and need to make sure that you're not uploading any node_modules.
Hope that helps - but as I wrote it's only my idea based on how I like to work.
My Eclipse project uses Sass. When running in debug mode, sass:watch (configured per this article) correctly polls for changes to *.scss files, compiles them into CSS and places them in the target directory. However, these changes are not reflected on the page, and inspecting the page using Chrome developer tools shows the new CSS is not picked up.
Using another (CSS-only) project works as expected: any change to CSS is copied to target directory, and a refresh of the page reflects the proper change.
I ran across a similar issue someone had using LESS. Unlike that situation, though, even changing the target CSS directly, the change is not reflected in the browser.
I can't be the only person debugging Sass/CSS in Eclipse, but I can't find any info on this problem.
Any ideas on how to fix this?
EDIT: SCSS is being compiled to CSS and copied to the target build directory, but not into the Tomcat deployment where the code is running. As I've said, this is not an issue with CSS-based projects, only with this where it's a compiled file.
Solved the problem...
An entry needed to be added to Eclipse’s Web Deployment Assembly so that Eclipse would see this dynamically-generated folder and associate it with the project.
The files were being generated to the local_repo/target/branch_name directory, where branch_name was dynamic, and dependent upon what branch you were working on; this made it impossible to create a static entry in Eclipse WDA for us.
Our solution was to have Maven (1) create a sass-generated/css directory under local_repo/target, and (2) copy the css over into the branch_name/static directory where it belongs.
Now, when debugging locally and running Sass Watch, changes to *.scss files are detected, compiled to css, and deployed to the sass-generated/css directory. Since this dir is associated with the project in Eclipse WDA, Eclipse sees the change and deploys it to Tomcat as expected!
After doing the first Maven install on my new Vaadin 8.1 project created from the vaadin-archetype-widget Maven archetype, and first running my app, I noticed a single new file appeared:
myproject-demo/src/main/webapp/VAADIN/themes/demo/styles.scss.cache
➠ Does it make sense to include or ignore this file from my version control?
By ignore, I mean add that filename to my list of file/folders to big ignored by my version control system. (.hgignore file)
If I intend to share this project as open-source, should I include this file to save a step during build? Or does it get rebuilt frequently, so it would be annoying with frequent changes and needlessly flag an irrelevant change, so I should ignore it?
Using Mercurial for version control.
You can ignore styles.scss.cache. It is generated by the Vaadin servlet after it compiles your style for the first time. Cache entry is controlled by VaadinServlet on row 1107 and it will be good to let the server to create and invalidate this file when necessary.
On the fly compilation of SCSS works fine but if that turns out to be "too slow" you can compile your theme to flat styles.css file with maven. For example, Vaadin is compiling Valo theme into vaadin-themes library and you could do similar artefact from your theme. See Vaadin theme documentation for more details.
I'm dealing with an ASP.net project that's maintained by a couple of people via git.
We're looking to minify the CSS files at build time and have checked out the bundle and minify addon however this doesn't appear to offer an option for the minified code to be regenerated from the source files at each build.
Is there a better way for us to minify our source css files on each build?
Understanding your question right, you want to concat and minify your css sources and time you build or deploy.
I do not now how your build stack look like, so I can guess only, but using css files I would use something like grunt or gulp.
On my self I prefer gulp. It is easy to create a task which concat, minify or also auto prefix your css files.
Once your task is created you can add it to your build script, task or bash.
This way works also fine with CI like wercker or travis.
You can use Microsoft Ajax Minifier after build.
Explained here: https://www.codeproject.com/Articles/182690/Minify-Javascript-and-CSS-using-Microsoft-Ajax-Min
Or if you have integration with Jenkins then after build step you can call bat file and run minification on folder of your build directory.
For multiple technology projects, You can create exe based on Microsoft Ajax Minifier and after all builds are done, Run this exe using bat command from Jenking only to minify all the css and js files.
I have integrated this with PHP, ASP.Net and Silverlight code after build of these projects.
One better way is to make your file to online file (like CDN link github can help you in that) and next rather then adding all those css add that link which will be saving much of the build time.
Try to minify your file.
Try to make an online link file.
I'm following an aurelia tutorial with Visual Studio 2015 and ASP.NET core where I installed NPM and run JSPM init, but after successfully creating all the files I can't find the jspm packages or config.js file in my Solution explorer.
UPDATE 1 The hidden folders and files are now showing up, but I have to right click on the main directory and chose the option to add to existing item. As you can see from the image I have a lot of files and folders, how can I speed up the process? Is there a way to just add all files to the project at the same time instead of manually?
Note: The config.js and jspm packages are on my physical directory so I know they exist, but how can I make them show up on my solution explorer menu?
STEPS:
I opened cmd prompt and entered: jspm init + npm install jspm --save-dev and selected yes on everything except on the configuration file part I entered: wwwroot and enter yes on everything, then selected babel.
Please let me know what I should do to make the files show up on the solution explorer or at least point me in the right direction. Thank you.
Originally VS projects did not automatically include new files that were added to the Project directory manually outside of Visual Studio.
However, I find that with VS2015 Update 3 and a new AspNet Core project they do "automagically" show up.
Not sure if maybe you're on a slightly older build, etc. but you could try the older approach as follows:
Select the Project in the Project Explorer (you currently have a solution-level item selected in that screenshot) and then you will see a new icon appear in the row of icons across the top of the Solution Explorer. This is the "Show All Files" icon/button.
Clicking it will show items that are in the physical directory but are not part of the VS Project. You should be able to right-click the file an choose include in project (or at least you used to be able to do this in older projects, etc. as stated).