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.
Related
Im using Cordova with Angular and Ionic to develope platform independent mobile applications. Today i learned that it is quite smart for large projects to set up a projects folder like this:
root
index.html
modules
app.js
module_1
module_1.js
module_1.html
module_2
module_2.js
module_2.html
module_2_sub
module_2_sub.js
module_2_sub.html
...
And you define your App.js like this:
angular.module('App', ['App.Module_1', 'App.Module2'])
But that leads to a very huge list of script includes in the index.html if you have a large project:
<script src="modules/app.js"></script>
<script src="modules/module_1/module_1.js"></script>
<script src="modules/module_2/module_2.js"></script>
<script src="modules/module_2/module_2_sub/module_2_sub.js"></script>
....
Is there a smarter way to organize this script includes? Maybe something like just including the app.js and in the app.js include all other needed scripts.
Ofcourse one just could say 'why do you even care about that?' but i kinda have the feeling that it is not very 'nice looking' to have so many includes in the index.html.
do you use grunt or gulp? cause i could recommend you this plugin https://www.npmjs.com/package/grunt-include-source
that include the source automatically in your main html.
And then it could be easier to include the .min if you decide to minify your sources
You could take a look at RequireJS. It sometimes can be a pain to setup for the first time, but once it's up it can help you with your issue.
Take a look at an Angular with RequireJS seed or if you prefer to use Yeoman.
I might also suggest browserify: http://browserify.org. This let's you use the server side node conventions in the browser. And has the additional advantage of letting you share the same code in the browser as on the server. To my mind, it's the most advanced way of handling your code dependencies in a consistent manner.
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.
I am using jquery fileupload plugin and it has 7-8 js files which it loads.
Now others developers are also working on site and sometime it cause confusion and difficult to find which js file is used where.
So i am thinking if i can combine 7 files in one file so that i can know that thats my file
Try this to compile your javascript file or code.
http://closure-compiler.appspot.com
While possibly overkill in this particular case, it might be worth checking out grunt. It will let you keep your files divided into multiple files for when you are working on them, and as soon as any file change compiling, minifying and combining them into a single/groups of files as desired, while also allowing you to define the load order of your code.
It requires some setup the first time you run it (which you can later use as a template) but greatly improves the process of combining/minifying files, and also has support for processing coffescript and sass among others, as well as writing unit tests for your code.
I use Rake to compile Javascript (and SASS to CSS, as well). It minifies the files in a unique JS. It's written in Ruby, but it's easy to configure and it works very fine.
But if more developers are working on the same code, another good idea I strongly suggest is to to use a SVN (sub-version control system), as TortoiseSVN or Git. This will allow many developers to work on the same source files, without losing any change.
I have a project which consist of a lot of static HTML and js files. I need a build tool that can concatenate and minify them.
I saw this great screencast that explains how to do it with ant and YUI. The only thing I'm missing is after the minified version is created , how can i replace references to the JS/CSS files in the HTML, so it will reference the new minified version?
Is there a better/easier tool for this (not GPL/LGPL license)?
Grunt is pretty good, and supports most of those things. This plugin will re-write your CSS link tags, though normally (and for JS) you'd just write the link/script tags to point straight to the minified version anyway, and continually have it build your files.
You can try minify JS and CSS. Minify JS can make 1 JS file merging multiple JS file and same for CSS.
I'm wondering if I can use CoffeeScript to include other standard JS files (as a simple way to do some combining of files).
I have a client-side minification tool I'm using (an app called Live Reload) which is working just fine.
<!-- Some jQuery plugins I'm using. -->
<script src="/js/libs/some-plugin.js"></script>
<script src="/js/libs/another-plugin.js"></script>
<!-- The output of my /js/script.coffee file: -->
<script src="/js/script.js"></script>
What I'd like to do, is just combine those plugins into output of my coffeescript file. I've looked high and low and I've only seen articles on server methods for this as well as a lot of articles on things like requirejs.org. I'm not trying to do anything that complex- I just want to get rid of a couple round trips for js files I know I'm never going to touch.
Does CoffeeScript have an "include" function to speak of?
There are ways you can achieve this by creating a more complex Cakefile, in which you will read the contents of js-files and append them with CS compiler output than write it into the single target js file. You can even create a fake global require function which will mimic its behaviour in the bundled file.
If you were looking for a standard tool or at least an approach to that problem, unfortunately, since CS is very young, there's none yet. There are some attempts though: https://github.com/jashkenas/coffeescript/wiki/%5BIntegrations%5D-Build-Tools.
I'm currently working on such a tool myself and am planning to publish it within a month. I'll post back then.
Basically, the answer seems to be no. This is not something CoffeeScript is capable of.