I have installed CodeSleeve asset-pipeline to manage and minify assets for my project. As I understood, all the scripts and stylesheets are controlled from manifest files located at: app/assets/stylesheets/application.css and app/assets/javascripts/application.js
That is all great, but what if I want to load different assets for different page? For example admin side of the application.
This situation is also mentioned in asset-pipeline documentation and recommended to use separate manifest files.
For example, if your application is silo'ed into admin section and user section then it probably makes sense to have a separate manifest file for each section.
Sounds great, but question remains. How?
Here is a similar question about asset-pipeline on Rails 3.1 and a somewhat complicated solution for such a obvious need, as is the need to include different assets in different sections of the application.
I still tried to make sense of that solution, but this is about Rails, so I still have no idea where are the manfiest files added in Laravel version?
I must admit I first went much longer and complex path, hacking the config array with Laravel Event listener. Got it working though until I turned on production environment, which broke my admin section styles. Now after all the hair-pulling came back to asset-pipeline documentation and found the very simple solution which had been right in front of my eyes the whole time: All you have to do is add parameter to include tag, like this:
<?= javascript_include_tag('admin/application') ?>
This will point to folder assets/admin and look for application.js from that folder. Resulting html markup will be:
<script src="assets/admin/application.js" data-foo="bar"></script>
Same thing with stylesheets.
Related
So, I am setting up a new site and my project's folder structure looks like this now.
foo.com/
index.php
assets/
css/
img/
js/
vendor/
I have added vendor/ for js/css libraries that I must install to keep them separate, since I want anyone who installs my project to install those in vendor from package.json - most libraries contain too many files 99% which I don't want to push to production.
Now once the project is finished, I would like to push the code to production with only the necessary js/css files.
This is where the problem comes. For example, if I install bulma css using:
yarn add bulma --modules-folder ./assets/vendor
It will dump all bulma-related files which are almost 70 into /vendor/bulma/ but I will only be needing one or two css files afterwards, since I will compiles the sass file to css as:
sass vendors/bulmna/style.scss assets/css/style.css
So my questions is: I am assuming this is how every developer does it and there are no documentations I can find that suggest how to do it. Is it safe to ignore the /vendor directory? What if I install vue, font-awesome, bootstrap .. how can I only fetch the files I need but not everything in /vendors folder?
Your question is actually quite broad - however, I'll try to list as much as possible.
Lets say you're building a project from scratch and needed to include vuejs, jquery, fontawesome but only need to include a couple of files.
The issue you're hitting here is module dependency with respect to npm modules. (and there are many different tools that you can use to manage versions on your library dependencies as well as ensuring they are included into your project, i.e. package managers).
Ok - now from here, you may say to yourself
but I only need say, one icon from fontawesome in your final build (dist) and I don't want to commit all my modules into source control
Again, this is where you omit node_modules and other dependent libraries from source control (i.e. include node_modules your .gitignore)
To reiterate
You can install the required library,
add node_modules to .gitignore ,
bundle those libraries into a vendor single file to be consumed by your users (can be via browserify/webpack/rollup/gulp/grunt/yarn etc).
generate bundle within npm script
Now you may ask further -
Why would I use any of those tools? - they're distracting me from simply copy/pasting vendor libaries into my source control.
Build tools were created to
streamline the developer pipeline so that you DONT have to copy/paste vendor libaries into a vendor folder.
ensures that all files are bundled to the client automatically
allows you to keep track/restrict library version updates/ when required via package.json
allows you to add other build steps (such as minification, md5hash versioning, compression, code splitting, asset management to name a few).
Now lets break down the original question here:
How to ensure other developers get everything they need when cloning the repository
how do I ensure I can provide only the necessary files to the end user (if I only use specific parts of vendor libaries?)
1. How to ensure developers get what they need
Again, to reiterate above, adding devDependancies and .gitignoring allows you to only add the necessary files to your project.
2. How can I ensure clients get what they need without bloating request files?
This is where build tools such as webpack, browserify, gulp, grunt, rollup, attempt to achieve. This is because with some libraries that exceed in file size of 200kb minified, you may need to separate these files into different client requests (and as such, not demand the user to request one large file, which was symtomatic of browserify projects).
The second technique you will need to be aware of, is with specific libraries, you can use import mdn link where you can require one function/class from a dependant library (which further reduces file size).
Another technique is using less import statements (which can extract less functions/styles similar to above, but this isn't currently supported in SCSS). for SCSS, you're basically left with copy/pasting the necessary styles into your base scss and that'll save you space as well.
EDIT
How to create a bundle from npm install libaries
From the comments you've mentioned above (about not wanting to include a tool into your workflow, there's no point outlining any one particular strategy - you can find answers/tutorials online about how to setup gulp/browserify/webpack for your particular needs).
However, As you are currently using yarn - I'll go into details about that.
Firstly, yarn is a package manager (like npm). All it does with the --modules-folder is install the package into the specified folder, that's all. So we don't really care about that (since it's doing the same thing as npm). (i.e. your vendor folder is the same as node_modules in many respects).
We could use
webpack
gulp
grunt
rollup
browserify
brunch
(All build tools that essentially allow you to bundle all those packages into a single entry point to be packaged to the client).
I won't go into how, because that is a process you can find online, and from the above comments, I can tell you don't particularly care either.
What you are looking for is a zero-config javascript build tool. (Extremely out of the scope of your original question, and i'll only answer that in a separate Q&A).
I'd try Googling on "tree shaking CSS" to see if that gives you something.
Maybe something like: https://github.com/jacobp100/es-css-modules
Rollup plugin may be useful. It works for js, with postcss, the link says it works with css also.
https://code.lengstorf.com/learn-rollup-css
Have a look at Pancake. It has been built specifically for the purpose of moving only those files out of the node_modules folder that you need. I wrote an article about it here: https://medium.com/dailyjs/npm-and-the-front-end-950c79fc22ce
(probably not an answer but a good tip)
PS: I am the author of both, the article and the tool so with clear bias :)
I'm pretty new to laravel and so far I'm liking it. Due to some situations where I forgot to include my new js or css files into my layout, Im looking for a way to link all files from those folders.
Im totally willing to create this myself, but I'm not sure what is the best way to do this. So far I have registered some serviceproviders, like viewcomposers and helpers. I was thinking I can make another viewcomposer which collects the folders I want, and link it to the desired layout.
But I don't want to create unnecessary functions (which might already exist). I'm hoping you guys can give me some insight in what's possible in laravel, good/bad practice, useful classes to use etc.
I wouldn't do this.
I would use Elixir (depending on which version of Laravel you are using) to compile and version my assets. This will mean that you only need to include the references to one file CSS file and one JS file in your view.
https://laravel.com/docs/5.3/elixir
You then just need to maintain your gulpfile.
Versioning your assets also means that you never need to CTRL+F5 to refresh them.
If i've built a web app using code igniter, what's the proper way to deploy it? Should my install only include my files, or do I also package all the codeigniter code with it?
I'm just entering into the world of open source so I'm not so sure what protocol is.
Thanks.
This is a good question and I've seen it done both ways. There's definitely reasons Not to include the CI files. Like any potential in the future license changes. And it seems like with the projects that are shared by more experienced developers that is how they do it.
Because if you are sharing your project for other CI developers, then the reality is they will not use the copy of CI you include - they will fold your files into their version of CI. So including JUST the files needed for your app - actually makes much it easier. Its certainly what I would prefer. Just keep the standard application folder structure: config controllers models etc. but only include the folders that you have files for. And make it clear what version of CI you have tested it on. If you can say it will work on the release version (not the beta) then people on PHP 5.2 will know they can use it.
Of course you need to include all the CodeIgniter files, or else how would it run?
Most people tend to rename the application and system files and place them outside of the web root for security reasons. "After moving them, open your main index.php file and set the $system_folder and $application_folder variables, preferably with a full path, e.g. '/www/MyUser/system'".
Got a trouble when including some external javascript code (example can be jquery.treeview plugin with css and images included) - in vendor/assets (where this should go) it seems it doesnt work with images. Any experience or example of doing this?
I suspect it's because you need to correct /images/foo.jpg to the new scheme of /assets/foo.jpg
If not, please include logs and examples.
Along the lines of what Zach said, the solution I've used is to modify the js/css files to be erb templates, and used asset_path('treeview/foo.jpg') to replace '/treeview/foo.jpg', and move all plugin images to the app/assets/images/treeview folder.
This will make everything work swimmingly, but it is less than ideal in requiring hacking up plugins before they work with the new system.
Of course, you can also keep your CSS and JS files in /public/javascripts and just javascript_include_tag them as usual, but you'll lose the precompile/bundle/compress functionality the asset pipeline provides.
So, I'm making a CMS at the mo, and using the modular extensions HMVC CI 2.0. It's lovely. I'm wondering the correct method for keeping my assets (js, css, img) related to a module within the module directory.
The problem being, how do I link to these assets? Let's say I'm using a template engine and passing the js files to load for a specific page:
$js[] = 'assets/js/my_js.js';
I suppose I'm asking this all wrong, but is there an easy way to link using the current module's directory?
Thanks in advance.
There's nothing currently built in to CI or HMVC for this.
I prefer not to reference files that are allowed direct access, like images/js/css, from within the application directory. Mainly because:
I don't want anyone to know what the guts of my app look like. By referencing files from directly within a module, you expose your application's directory structure.
I would never do this if I weren't using HMVC
You must now allow direct access to (certain) directories within the application via .htaccess. For security reasons, I prefer to simply disallow the entire thing.
I understand the desire to be as modular as possible, but to me it's not worth this hassle. I prefer to keep a separate directory in a public folder called "modules" (duplicating my application/modules structure), that has nothing but "assets" (css, js, images...).
I'd offer some code but I have no clue how you are adding js/css to your views - it's probably much different than the way I do it. It would be easy enough to write a function to detect the current module, controller, or method and change the asset folder automatically, but this may interfere with other shared assets. I'd suggest writing an entirely separate function for loading assets from modules.