I am looking for a tool to optimize my website's complete build. I am using SASS as a CSS preprocessor and Uglify to create my JavaScript files, and a couple of more tools all tied together with Grunt. Also, the markup is in this case a single index.html file, but in other projects it's in either PHP files or in Liquid templates.
I am using BEM (block, element, modifier) to name my classes and sometimes, that leads to quite huge classnames, such as navigation__item__link--home or even longer.
I am looking for a tool that automatically converts the final, built CSS files in a way that it changes the class or id names to something like .a, .b, but changes every HTML and JavaScript files according to the same method, so that correlated codes won't get messed up.
I want to keep my original project files of course, so I would like the tool to be capable of creating new files according to these rules and preferably, capable of using it with Grunt.
It sounds like you are looking for a tool called munch. It is a pre-deployment tool that does just what you are asking for. It is a command line utility that you point at your view (html), css and js files and it will shorten class names and ids while still keeping them unique and keeping referential integrity intact between all of the source files. There are also some handy options, like the ability to output a map file that lists what transformations it made. The documentation is pretty straight-forward.
FWIW, I am not affiliated with the project.
I would recommend Grunt for this.
The sass and css can be done with existing grunt-sass plugin and the javascript can use the grunt-uglify plugin.
While I'm not sure if there is a plugin that already does the custom uglification, you could easily write a plugin to do so. Grunt plugins are written in node, so it's pretty approachable if you're familiar with javascript.
Related
I want to make a single server call for css and JS file for to optimize the speed. So can any one suggest me Is this good to merge css and JS with our custom css and JS. And also i override Bootstrap css class in custom css It will create any problem???
well, no problem should happen. putting codes and rules in different files is to manage them in better way.
the point is don't forget to place bootstrap css rules above your own rules. this way your customized rules will override bootstraps.
I suggest you use UglifyCSS and UglifyJS. You can also use an asset management framework for PHP like Assetic that uses these tools easily.
The CSS cascading order is very important, the last declared is more relevant.
You can definitely combine them. Just be sure to do so in the same order you would load them if loading separate files.
Afterwards, minify them using any number of minifiers (just google it), and even gzip them for even smaller files.
Assuming you've done the same with your images and icons (i.e. spriting them) you'll have very few http requests.
I started a small web/html project, in which I will have at least a few js files, including dependencies and stuff.
Just because I like it clean, I'd like to minify all those files into one. That's pretty easy with uglifyjs and grunt, problem solved.
But there's something else: in my "source" (uncompiled) html file, I have a bunch of <script> tags. Something like this:
<script src="js/dependency1.js"/>
<script src="js/dependency2.js"/>
<script src="js/mystuff.js"/>
But as I said above, after the build I end up with one big file, allTheStuff.js. I wish I could automatically modify my HTML to:
<script src="js/allMyStuff.js"/>
Is there a way I can do that automatically? Any tool to recommend?
And same question for CSS.
Try grunt-usemin for this. It will handle both javascript and CSS.
From the GitHub page for the project:
Replaces references to non-optimized scripts or stylesheets into a set
of HTML files (or any templates/views).
When it works, it's a really nice tool to simplify the exact problem you describe. The downside is that it's a little clunky to use as you juggle the HTML tags usemin needs and the grunt configuration.
But, clunky config issues aside, I've used it and it's very nice to automate the copy, concat, and uglify steps and to modify the HTML to use the results of those tasks.
Related: grunt-include-source offers automation to inject a list of files into your HTML. If you decided you wanted to handle things yourself rather than turn it all over to usemin, this tool is a handy item to automate updating the HTML as you build a custom build process based upon your needs.
I'm building a library, and plan to use parts (could be entire files or arbitrary lines) of other libraries in my code. Also, I would like to have fixes on the other library reflect onto my library as well.
I could just add the entire library (script tag, AMD, etc.) and use it. But I don't want to use the entire bulk of another library for my very small library. One of these libraries is Modernizr, but I'll only be using at most a dozen checks only.
I could just copy-paste the implementation from one library to mine. However, when the library I need updates, this would mean copy-paste all over again.
I read about GIT and submodules, where a subfolder could contain a sub-project. This sounds promising, where a build script could extract parts of the other library and put it into my code. However, the library could have different code structure than mine which would lead to manual editing, which defeats the purpose of some steps.
I haven't gone that deep into automation but I have had basic experience with makefiles. How would one go about in doing such integration?
It's not generally a good idea to use parts of libraries that didn't pre-package those parts for you. The correct way to do it would depend on each library and how it is meant to be made/compiled. There may also be license considerations, which will vary depending on the license of the library, some would require maintaining the license for the part of the library that you use.
[Edit]
Would it be possible to include the entire other libraries, and then use some sort of minification on your library to keep the size down?
So my question is kinda a clone of this one except the answer proposed use .net technology and I'm working on linux.
Here is a summary :
I'm working with html5 based slide for presentation. These slides are created like every website with subfolders containing resources. I'm looking for a way to convert this slides in a standalone file to be able to share them easily.
This just means replacing all images by base64 images and js/css import by inline plain text.
I'm also using require.js so replacing javascript import could be a bit more tricky but this will be a second time problem.
I'm not using MHTML because it's not really supported by browsers.
Try to use Gulp.js or Grunt.js which operate with files and have plenty of plugins each. I personally prefer to use Gulp because of its stream-based model—it's fast and flexible, but you may find Grunt more simple or (very likely) find an appropriate plugin faster. Both of them are Node.js utils accepting configuration files written in JavaScript, so you don't have to use Java or any nonconventional technology for this task.
You may start with reading an introductionary article about Gulp, then search for available gulp plugins by one of the keywords: inline, asset, minify, etc.
Good luck with workflow optimization!
Use the single-file-cli which does what you need.
We have a large web project, where we need components which can talk to each other which can be put in a central repository of components for different projects.
Using reuirejs and Backbone for the modular development. Went through different boilerplate available for backbone and requirejs, but none matched my requirement. So I have created following directory structure. It can be explained as follows.
---resources
|---custom-components
|---mycomponent
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent.js
|---mycomponent2
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent2.js
|---libraries
|---backbone
|---underscore
|---jquery
|---jquery-ui
|---jqueryplugins
|---jcarouselite
|---thirdpartyplugins
|---page-js
|---mypage.js
|---mypage2.js
resources directory will contain all the resources. Under that we will have 4 directories as mentioned.
libraries, jqueryplugins and thirdpartyplugins are obviusly the directories for the name they say.
page-js directory will contain the actual main-js which will be used inside our html file as requirejs data-main attribute.
Custom-component is where all widgets created by us will reside, as you can see it has a js file with same name as that of the component, which will be entry point of this widget. This directory also has directories for js, css and templates. CSS and templates will be loaded by text plugin and CSS plugin respectively. Js directory will contain all the backbone code to make this widget work.
Custom components will be asked by main-js residing in page-js.
Coming to what I need.
1. I want experts to have review this directory structure in perspective of large web projects, where you will need to share your widgets with other teams. suggestions are welcome.
2. My each custom-component will define a module, which will have dependencies within package structure as well as outside package structure. I want to know, if there is any way to use r.js to optimize only my custom widget dependency within package structure and let the plugins and libraries optimized separately.
3. I am developing single page ajax application, so I will be asking modules on demand so I need to cleanup modules and widgets when I dont need them, is there any way for cleaning up I should be aware of?
About the directory structure
As a directory structure pattern, I highly recommend using directory structure of cakePHP. it's really robust as in words!! I'm running multiple apps (one of them is as big as Groupon) and it works just like a charm.
You may need to tweak it a little because, you know, cake is a PHP framework and yours is a javascript one.
Here is the cake's awesome MVC directory structure:
Please note that you may host thousands of apps on a single cake installation. so if you're interested, what are you waiting for? go to their site and read their docs.
About the cleaning up techniques
Well, here is one of the downsides of the Javascript which I don't like. there is no real way to destroy a OO module like in Java or C++. here we don't have such things like C++'s ~ destructors.
For many years, programmers use module = null to free up memory from un-used codes.
Take a look at these also:
Can dynamically loaded JavaScript be unloaded?
Loading/unloading Javascript dynamically
How to unload a javascript from an html?
Hope it helps and good luck on designing your app ;D
Probably I'm late in answering this, but anyway let me share my views here, incase someone else finds it useful.
Your directory structure looks alright. It is always a better design to keep your business components self contained in to a particular directory. I will not recommend Cake MVC structure which break the Open Close Principle. Also have a look at the directory structure recommended by http://boilerplatejs.org which is a reference architecture for large scale JavaScript development.
I do not get the question very clear. when r.js is run it will optimize all JS files it find in the directory (exclude possible) and then create a single script by going though the dependency tree. In production you only need that single script (plus locale files if i18n plugin is used)
Read my blog post below. It might give you some hints: http://blog.hasith.net/2012/11/how-much-multi-page-single-page.html