I create a default yeoman project. yeoman server works great.
yeoman build results in files put in the dist folder.
when i push to a folder on a staging server that is not at the root i get 404s. This is to be expected ( i think ), but does anyone know how to modify the grunt file or pass in something to the compiler argument to allow the behavior i want?
Which is to run yeoman build and then be able to push the content of the dist folder to a non root location and not have the website choke on the image paths and js paths etc?
thanks for your time cp
My bug was caused by confusion about yeoman.
I was having problems with the build process and paths and the renaming of images.
So my bad.
I think this is the solution to my issue.
Not the best but what I have learned is that …
If you define an image path in the .scss as “../” Yeoman will not modify the path or image name.
Problem: it still renames all the images and compresses them, so the .css can’t find the correct image.
The unmodified image does not exist in dist / images
So the work around is
1.Keep the ../ in the .scss file.
2.Run yeoman build
3.And then use optiPng on all the images we want to compress. This will result in compressed images that are not renamed.
4.Then drop those images in your images folder on staging.
And the. css will be able to target them.
FYI yeoman uses optiPng. (i think)
Related
I have been searching all over for information on where django-cms is storing the CSS and SCSS data for my site, which I am working on localhost. When I go to edit the CSS file directly, it has no effect, so I'm wondering what needs to be done to edit those CSS files. Obviously they have been loaded somewhere. How can they be reloaded, or in general what is the best practice for editing the CSS files?
Apparently I had to do this with both the style.scss and style.css files, which seem to have the same css classes. But even after editing both files, I had to refresh the site on my localhost a few times before I could see the changes. Frustrating, but it does work to edit the files directly in the static folder.
#Lawrence DeSouza At first you should mention which plugins and style frameworks you use.
If you are using some sort of a frontend framework like Bootstrap 4 your should compile its css from scss separately. You can do it right on the dev server in a separate directory outside your project dir and cloned from the official repository. Normally you would only need to change variables in "/bootstrap-4.x.y/scss/_variables.scss" file. On the next step you would compile your *.css files with "npm run dist" command and then copy compiled files from "/bootstrap-4.x.y/dist" directory to your "/projectname/appname/static/css" directory. The process is well-documented here. After copying changed files to your "static" folder you should run "python manage.py collectstatic" and refresh the page. If it's not working after refreshing the page in a browser (normally it should work) - restart the server. I am a bit biased towards Bootstrap, but the logic should be the same in your case.
What is the easiest way to do this?
I have a simple one page Boostrap website with a less folder and a css folder.
I have no way of making changes to the .less files and having them compile as a .css file in the css folder.
I have tried instructions on Grunt.js via Boostrap, which compiles everything to a dist folder inside node_modules but I don't want to include the entire build system when I publish my website. And I don't want to have to manually copy and paste the css folder from the build system.
I tried the instructions on Less and had no idea which files were where. In the past I used Compass but it only works with Sass.
I feel like this should be really easy, anything that I'm overlooking?
I tested my Netbeans setup with a html5 project and the css file was generated from Less file accordingly. then, I went ahead with a drupal bootstrap project and got no css file.
With the html5 project, I can select the root directory, hit the right button of the mouse, select "new->LESS file" to create a less file xxx.less under root/less directory and a css file xxx.css shows. But with the drupal bootstrap project, my best luck is using command-line 'lessc less/xxx.less css/xxx.css' to generate the css file. Did I overlook anything?
It seems that Netbeans 8 has a pretty "dumb" way of looking for LESS files by default. That default is that Netbeans looks in the project root for a folder called "less" that it then monitors for changes and compiles the output into a folder called "css" (both in the root of the project).
When working on something like a Drupal or Wordpress project, you might have your content be logically saved (for some reason) in a folder like: wp-content/themes/my-theme/lib/less.
So, what you need to do is add and/or modify the input and output folders to make sure that you're achieving the desired results. From the Project Properties windows select "CSS Preprocessors" and from there you can choose to either modify the defaults, or you can add a new folder to the watch list and have it get compiled into any directory of your choosing. The Input and Output paths are relative to the document root so you might do something like: /lib/less for the input source and output directly to the /css folder or it could be something like /static-assets/styles/compiled/css (for all that Netbeans or anyone else cares).
It is rather strange that Netbeans doesn't automatically set the input folder to the folder where you created the LESS file but such is life, it's not the first time I've experience a "Huh?" moment when working with Netbeans.
I'm currently using YUI Compressor to compress my CSS files in a project which worked fine but because of multiple files for plugins I decided to use subfolders in my CSS folder. How can I make the File Watcher also work on subfolders? I can't seem to find any documentation on this, nor have I found anyone with the same problem on the web.
I don't mind if all CSS files throughout the whole project scope gets minified, but I want to avoid defining new File Watcher every time I create a new subfolder.
PS: I see a checked "Track only root files" option in the Edit Watcher screen, but it's greyed out, so I can't turn it off. Don't know why this option is provided, since it always seems to be greyed out, no matter what settings I try.
Not sure i understand what subfolders are meant. With default scope (Project Files) all .css files in the project (root folder with all subfolders, recursively) are watched - why do you need to create a new watcher when adding a folder? Do you use some custom scopes in your watcher(s)?
Found it!
The "Track only root files" option not being optional was not the (or atleast not the whole) problem. This was bypassable by not using the default YUI Compressor file watcher template but creating a custom one.
The real problem was that my scope was set to Project files (the Root of the project) but the Arguments string being set to $FilePath$.css -o $FilePathWithoutAllExtensions$.min.css. What this means is that The watcher was searching for C:/[PROJECTPATH]/[SUBFOLDERS]/[FILENAME].css in the Project root, and then outputting it into the Root of the project (-o $FileNameWithoutExtension$.min.css).
With some fiddling with the Arguments and the Insert Macro's function i made this new Arguments string: $FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.css -o $FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.min.css. It now watches all [FILENAME].css files and places the minified versions in the same folder of the original.
Using the Show console: Always instead of Show console: Error option really helped me figuring out this problem since not finding a file to minify, based on the arguments, apparently is "not an error".
Hope this explanation will help to safe some frustration and hours for everyone who encounters this problem.
I struggle a while with this also due to the fact that you always have to apply settings, make some change on the SCSS File and see if it's working.
My setup is working find now for a following structure:
// Source
./scss/
- styles.scss
- _variables.scss
- subfolder/
- more-styles.scss
// Output
./css
- styles.css
- subfolder/
- more-styles.css
My File Watcher Settings look like that:
// Program:
sass
// Arguments:
./$FileDirPathFromParent(scss)$$FileName$:../css/$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css
// Output paths to refresh:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
// Working directory:
$Projectpath$/scss/
One of the keys was to set the working directory correctly, for example $FileDir$ is just the SCSS file is in, so the relative paths are wrong.
I created a new project using yeoman angular generator which I then modified to some extend to fit my own needs. However later on I realized I'd like to use mean.io for express and mongodb supports. It took me quite some time to copy necessary parts from the mean.io default project to my own project. However I am still facing serious problems with grunt-rev and grunt-usemin.
The original yeoman generated project had app/ folder which contained all the AngularJS items. The new project however has app/ folder for all the items that exist in the server and then public/ folder for all the items needed in the client end. Now the grunt-rev plugin renames the css and image files to contain some identifier that matches the version of that item. I think this is pretty useful so I would like to keep it in my project. Now then; my index.html is located in the app/ folder and all the css and images are in the public/ folder. In my index.html I got images in format like "<img src="images/imagename.png">". This works when I test the project by launching the node express server since it offers both the app/views/ and public/ from the same location which is the server root. Usemin doesn't understand this however as the image sources don't match the absolute folder structure. I tried to move app/views/ content to app/ but to no avail. The same happens with css files that are built with cssmin. I got property in my index.html and under that all my css. After the build I got styles/main.css there but as usemin doesn't realize the folder structure, I end up with styles/main.css in index.html and 986a2d75.application.css in styles/.
Is there any way to let usemin know that two folders should be handled like they are one? I found that you could force usemin to look for certain pattern but that would force me to remember to add every image to gruntfile separately so I'd rather not use these plugins at all before I'd do that.
Finally found out about Generator Angular Fullstack which did everything I needed and more. It properly handles the copying of files from src->.tmp->dist and does all the necessary usemin magic in the process. Awesome tool!