I'm using a library called tinymce that has plugins with it. Each is in a folder like so tinymce/plugins/{pluginName}/plugin.js. There are about 20ish different plugins, but I only want 8 of them. Is there anyway to do that without writing out 8 lines in my bundle just changing out the pluginName?
Did you try including only the tiny_mce.js file in the bundle?
I used TinyMCE some time ago and in my BundleConfig.cs I did only add:
bundles.Add(new ScriptBundle("~/bundles/tinymce").Include("~/Scripts/tinymce/tiny_mce.js")); //the main api script only
With only this configuration I was able to use all the plugins with no issues. Maybe I'm missing something in your particular scenario, though.
Related
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.
I’m a new user to CodeKit and sass and I’ve been playing around with it for the past few days trying to figure out how to use it correctly to improve my workflow.
I’m building a WP project so I start by creating a new CodeKit project with Zurb and compass. It outputs the files and I throw them into a folder called 'Foundation'. I then throw in my WordPress files, and throw that ‘Foundation’ folder into the theme I’m working on in WP in my ‘assets’ folder. I know in the YouTube video CodeKit mentions not to pull the files out so that any linking isn’t messed up, but I can’t keep those files in the root of my project because they need to be within the theme.
So it looks like this:
wordpress/theme/assets/foundation
Assets is also where my sass files live for the overall site
wordpress/theme/assets/sass
Where I get hung up is in the compiling of the files.
I have one master style.sass file where I import all my partials and that works correctly. I want to include the foundation app.scss file so everything is in one place, but it doesn’t call it up. It says the compiling is complete, but when I look at the code it’s just the import line without the foundation code actually being outputted. I also found that if I place my sass partials in a folder called partials, CodeKit can't compile them, even though I'm importing them with the folder name, example: partials/layout, instead of layout.
I’m doing this locally so I can’t show you the link, but I guess I just feel like I’m setting this up entirely wrong.
My question are:
How do others setup their projects on CodeKit with WordPress and Foundation?
Is it correct to import .scss files into a .sass file?
Any help would be appreciated.
You should make your CodeKit project only contain the folder for the theme you are developing. CodeKit should then put foundation, jquery, and other scripts and frameworks in a folder called bower_components because it uses bower to fetch the project's dependencies.
The advantage of using bower is you can update the packages from the command line and also through CodeKit. You can also keep dependencies out of the git repo by adding bower_components to your .gitignore file.
Check out this directory structure that I use based on the Roots Sage Starter Theme
/your-custom-theme-folder
|--/bower_components
|--/foundation
|--/jquery
|--/etc.
|--/assets
|--/fonts
|--/images
|--/scripts
|--main.js // custom js for theme goes here
|--/styles
|--/modules
|--/utilities
|--/etc.
|--main.scss // all sass is imported through this file
|--/dist // all files compile to this directory
|--/fonts
|--/scripts
|--app.js // all js files concatenated together
|--app.min.js
|--/styles
|--app.css // main.scss outputs all imported sass to this file
|--app.min.css
|--functions.php
|--index.php
|--single.php
|--style.css // no actual styles in this file, just theme info
|--etc.
I developed a website, which can be used by different customers. As a result, we want to give different CSS styles and images to individual customers.
What we want is to manage CSS and images separately, so we won't need to deploy the site again just because we added some new CSS or images. As the site is under MVC, when accessing URLs such as:
www.mysite.com/customerA/myPage
www.mysite.com/customerB/myPage
we can find the customer id and find the right CSS and image to return.
The problem is that we want to bundle CSS, when the CSS or images are bundled, two issues will occur:
How the bundle detect underlying CSS file change? Is it possible?
Some users may already visited the URL and cached the bundled CSS, how can we disable the cached CSS, so it will get the new version?
The .NET bundling strategy is very intelligent in solving both of your issues. Once you create a bundle - example below:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
And render this bundle out on your website, the output looks something like this:
<link href="/Content/css?v=xUfHQEnjwMk9UEexrvHPdvPxJduGrgz0bbI5qy5BGHY1" rel="stylesheet"/>
Notice the ?v=bigTextstring. Anytime a file in your bundle changes, the bundling framework will change the bigTextString after the ?v=. So, for your first question, yes, it will automatically detect file changes. You can get more information about how all of that process works if you visit this SO question. For your second question, the ?v= parameter, when changed, signals the client's browser that this is a different file than you had, you need to download it again.
Tommy has a great answer. I just wanted to elaborate on a few points.
First, as long as the bundle itself hasn't changed (added/removed scripts/styles or changed the location of those files), then you can freely update the files themselves without republishing the whole site. The bundler runs at runtime and looks at the last modified timestamp of the included files. If any of the files has changed, a new bundle will be generated with an updated cache-busting querystring param.
However, since the actual bundle configuration is code-based, if you add/remove items from the bundle or change the location of the file(s), such that you have to update the bundle configuration in BundleConfig.cs then you must republish, or at least also update the project DLL. This is because the code compiled within that DLL has changed.
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.
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)