What are the best practices of compiling files? Should i make 1 compiled js file with a lot of unused libraries on different pages? Or should i manually compile different files for different pages?
What I suggest is you can organize your JS and CSS into categories like this
frameworks.js - includes Jquery, Bootstrap JS etc
application.js - specific to your application
You can do the same thing with the css files
framework.css
application.css
I would take all of your application JS files like login.js, validation.js etc and compile those into application.js
Same idea with the css files.
All of your dependencies will be in one file and application specifc JS into your main application.js file
Related
There is a similar question: Rails 4: Where to put JavaScript/CSS plugins. But none of the answers actually answer my question.
This plugin is third-party, so I'd like to put it somewhere in vendor directory (and not in the assets directory).
Also I think it's better to keep all the plugin files in one directory, so I don't want to spread js, css files and images into different directories.
So is there any nice way of dealing with vendor js plugins in Rails 4?
Add the third party plugin as:-
Approach 1:-
Consider the example, to add gem 'bootstrap-sass', do like that:-
In Gemfile:-
gem 'bootstrap-sass', '3.3.1', :path => 'vendor/bootstrap-sass-3.3.1'
Puts the whole plugin of bootstrap in vendor/ folder so the directory structure will looks like
vendor/bootstrap-sass-3.3.1/assets/
vendor/bootstrap-sass-3.3.1/lib/
vendor/bootstrap-sass-3.3.1/tasks/
vendor/bootstrap-sass-3.3.1/ #other directory and files
Approach 2:-
If only third party js files are included, then put js files in vendor/assets/javascripts/ and require it in application.js as :-
//= require file_name_without_js_extension
Example:-
//= require jwplayer
For css, put css files in vendor/assets/stylesheets/ and require it in application.css as :-
*= require file_name_without_css_extension
I have a website I'm working on in Visual Studio 2013 and I'm mainly using AngularJS 1.2.6. In my index.html I have a src line for each .js file which for 3 page is 6 lines, 1 js file for each controller and 1 js page for each view.
Is there a way I could consolidate all of these lines into 1 .js file and call that .js file in my index.html?
Yes, you can use something like grunt.js to build a custom build script for your .js files. In your case, you may want to use grunt-contrib-concat with grunt-contrib-watch.
If you are not familiar with grunt, feel free to read the tutorial.
I searched over the internet but I could not find an answer to my question. I am just trying to figure out a clean way to structure my CSS and JS files inside my project. Let us say for example I have a CSS folder and I have a custom my.css file and also I have a Scripts folder and I have inside it a myscript.js. I understand that my.css will go in the CSS folder and myscript.js will go under the Scripts folder in this folder setup :
root
css
my.css
Scripts
myscript.js
My question is, if I want to use a jQuery plugin like jstree for example. This library require me to add one js and one css file. Should I keep these files under the Scripts and CSS folder ?
Plan A
root
css
my.css
jstree.css
Scripts
myscript.js
jstree.js
Or should I separate them into a different folder for cleaner structure like this
PLan B
root
css
jstreeFolder ---> jstree.css
my.css
Scripts
jstreFolder ---> jstree.js
myscript.js
Is this structure acceptable? Any standard ways for achieving this ?
Any help is appreciated.
Root
-- styles
|-- your_file.css
-- scripts
|-- your_file.js
-- libs (or plugins)
|-- jquery
|-- jquery-ui
...
I think this structure will be nicer and all the third party libraries (no matter css or javascript libs) that you've chosen should be located under libs directory. It will make maintenance be easier and clear.
For mainentance reasons i prefer another approach. The library jstreee organise the javascript files, css-files and images in a certain way.
/libs/
/jstree/ // <-- folder
/themes/ <-- folder
/default/ <-- folder
style.css
32px.png
jstree.js
jstree.search.js
/other-plugin/
I put everything under libs and in a folder with the name of the library. This way the external dependency of a library is clear and the internal path structure (css files may point to images) of the external library is untouched.
Im looking for a way to compile all of my coffeescript files, currently in individual files such as features.coffee // scroll.coffee etc etc, in to one main outputed .js file.
Im using an application.coffee file at current to act as the main file. Ive imported my various files using:
#= require features.coffee
#= require scroll.coffee
However when Im outputting the application.coffee to application.js on the code from within the application.coffee is outputting and not that of the imported files
Im assuming that coffeescript imports are not native features and that some sort of plugin will be needed
Thanks in advance
You have to manually merge the source files into a main script file ( aka concatenate them ), then compile to JavaScript. You have not specified what you are working with, but in node.js, the require function only executes an external script ( to put it very simply ), it does not place the source code into current file as you seem to be expecting.
There are many tools on the network to concatenate your source code into a single main script - just google around and find what suits you best.
I managed to use require.js and it's optimizer to optimize my project. But it generates 3 javascript files:
1. main file
The require.js config file (the one referenced in html as data-main )
2. require.js library
The code for require.js.
3. My application code
Is it possible to merge these 3 javascript files into one single file?
Take a look at the grunt js project, with specific to :
grunt concat
and the plugin for require js:
https://github.com/asciidisco/grunt-requirejs