Compile CoffeeScript on Save? - javascript

Is there anyway to easily compile CoffeeScript on save? I'm using TextMate or Sublime Text 2.

Coffeescript has a 'watch' feature. You could set up, as a semi-permanent process:
coffee –wc -o media/js/ src/coffee/*.coffee
And for every file with an extension ".coffee", the corresponding compiled ".js" file will be put into the target directory every time you save.
That said, I use a makefile and a fabfile, because my HTML is HAML, my CSS is LessCSS, and my development directory is not my test path, so I needed something smart enough to "build and deploy."
If your machine supports inotify, you could use inotifywait to watch your entire work path, and call Make as needed. But at that point, you're into hard-core geekery.

You can also accomplish this without the command line:
Add a build process to Sublime Text.
Make sure that Save All on Build is selected in the Tools menu.
Use ⌘B instead of ⌘S when saving.
So instead of compiling on save, you're saving on compile.

The most straightforward solution with Sublime, is to install the Sublime package called Better Coffeescript (preferences --> package control --> install package...), and then make sure that its configuration includes "compileOnSave": true (preferences --> package settings --> Better Coffeescript...). Then restart Sublime.
For Sublime, anything else is not enough or too much extra components. Just came here after upgrading to Sublime 3, and it works like charm for Sublime 3 (as it did for Sublime 2, I just forgot about it at first).

Well coffee --watch has 2 major flaws:
New files created after command has been issued aren't being watched
Requires manual initiation so there can be a chance you forget to do it, which doesn't sound more brilliant than forget to compile before you git commit it
The solution I came up with is a rather simple Bash script that takes coffee --watch a few steps further which will allow your working directory tree to be watched ever since system login, and automatically get compiled into JavaScript on each file save/change
or new file creation:
http://blog.gantrithor.com/post/11609373640/carefree-coffeescript-auto-compiler
There may be more elegant way to do this, but this implementation works great =)

If you also want bundling, buildr offers watching and bundling too: https://github.com/balupton/buildr.npm
The (Java|Coffee)Script and (CSS|Less) (Builder|Bundler|Packer|Minifier|Merger|Checker)

gem install stasis
stasis -d
The best solution I have found compared with all other static compilation tools like StaticMatic, Middleman, etc.
Very flexible and configurable and does not rely on any preset folder structure. Just add controller.rb and write some Ruby. Lots of helpers for doing clever things before/after compilation.
https://github.com/winton/stasis

I like codekit :) Simple and effective way to compile coffeescript, sass, less, haml, and more, with lots of niceties. http://incident57.com/codekit/

Related

VS2015 Convert javascript to typescript and node modules

I developed a javascript web app with npm and webpack. Now I converted all those .js files to .ts by using the powershell command stated here. The succeeding actions in the link is using grunt; I want to directly use VS2015 Typescript project but I cannot find any reference on the net about what to do with the node_modules and how I can fully convert all my package.json and webpack into Typescript project. The Task Runner Explorer in VS2015 only supports Grunt and Gulp tasks.
I recommend going with the "bare-foot" solution first. I'd rely much less on VS2015. It's maybe the best IDE available, but JS and TS projects can be handled from command line without relying on the magic of the IDE. This way you can gain a deeper understanding of these technologies and I think now it would be easier too.
I recommend the following steps:
create a tsconfig.json in the root folder. Read around, there's plenty of info available. Just one hint: use 'filesGlob' to specify the files to compile.
use TSD to get the .d.ts files of the libs you use from DefinitelyTyped. You might create, or at least just declare, the missing packages.
run 'tsc --project .' from command line to compile everything. You'll see the errors that are to be solved.
I'm typing from mobile, I can edit the codes tomorrow. Have any comments?

What to ignore in bower.json

I have a library that I'm developing and I'm publishing it to bower. Right now I'm ignoring everything except genie.js (the library) and genie.min.js. Is there value in having the README.md or the travis build file or the demo files or anything else? It seems to me that the reason someone adds your component to their project is so they can use it in their product and they don't want their file system polluted, am I wrong?
You're right, just the minimum. I would go a step further and drop the minified file, which is the best practise in Bower, as users are most likely using a build system and having an additional minified file is just wasting space.
You can easily ignore everything but one file by using globbing in the "ignore" property in bower.json like this:
"ignore": ["./!(genie.js)"]

How can I concatenate javascript files and replace the reference in my HTML?

As part of my build/CI process on TeamCity, I would like to specify a set of JavaScript files referenced in my HTML and combine them into one.
In other words, this is what I would like to accomplish.
Before:
<script src="1.js" />
<script src="2.js" />
After
<script src="combined.js" />
I am looking for a commandline tool to concatenate 1.js and 2.js into combined.js. Then, a commandline tool (or maybe the same tool) to replace the references in the HTML file to this new file. Please tell me how I could accomplish this.
What I have tried so far:
I have been looking at grunt-usemin which looks good, but requires the build server to perform an npm install on each build to get the dependencies, then run it. That takes too long and isn't a nice solution, because we build+deploy very frequently.
I know I could also add my node_modules folder to git but this is also undesirable. It would be nice if grunt could run these modules installed globally but it is not the grunt way (unless I am mistaken, grunt wants everything installed locally).
Someone also suggested running grunt on the developer machines. Again, undesirable as we have transient VMs and this would break the development flow.
It would be nice if I could run grunt-usemin locally without grunt!
For combining the files you can just use cat
cat 1.js 2.js > combined.js
To replace the chunk of html you could use sed
sed -i "s/<script src=\"1.js\">\n<script src=\"2.js\">/<script src=\"combined.js\">/g" *.html
This is a rather general solution, but it seems a bit clunky to me. If you're rendering this html in node you might consider replacing it in javascript if the combined file exists.
if (fs.existsSync('combined.js')) {
res.end(html_contents.replace('<script src="1.js"/>\n<script src="2.js"/>','<script src="combined.js">'));
} else {
res.end(html_contents);
}
for better performance you can of course use the asynchronous version of fs.exists
I ended up creating my own: https://npmjs.org/package/hashcat
npm install -g hashcat
#gustavohenke's recommendation was close but ultimately h5bp was proving to be too problematic for use on a build server. Ultimately creating this module did not take long and serves my needs for now. I will mark this as the answer until a better answer comes along in the future.

Minify and join CSS & JS files on linux, server side

In my project, for example, I have this structure:
/public/js/src/ /* many jquery plugins there */
/public/css/src/ /* many css files there, that describe different things */
After changes have been made, I would like to type in command line something like:
root#hostname:/var/www/test/public# ./build
which would generate two files:
/public/css/build.css - all files from /public/css/src/ folder with minified source
/public/js/build.js - all files from /public/js/src folder with minified source
For the moment I am using less css, which is working on node. I would like to have one script that will do everything, for css as for javascript. Could you please advise the best way to "build" dev-source javascript & css files?
You can use YUI Compressor. I'm sure it's also available for Linux.
It works from the command line. Read here how it works.
Example:
java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js --charset utf-8
I'm sure you can setup a simple Bash script that executes two commands, one for CSS and one for JS by using parameters as input.
YUI-Compressor is available as a package in any Ubuntu version.
apt-get install yui-compressor
Hope it helps
You can use Apache ANT and YUI Compressor to set up your own build process. You can minify all your JS and CSS files with a single command.
EDIT: if you want a sample project try H5bp's ant build scripts http://html5boilerplate.com/
I know this is an old question, but for those getting here through Google. You can easily use Compass for this.
compass compile --output-style compressed --force
More info: http://compass-style.org/help/tutorials/production-css/
Use ACCSS for css compression, its compression rate is better than YUI-Compressors and its written in c with automake installation, so it is portable to almost every system.
Like above, you can use a shell script to combine less and accss. accss support reading from stdin, so you can combine them with
lessc styles.less | accss > out.css
It also has severeal compatibility options, especially for Internet Explorer.
https://github.com/acwtools/accss

On-the-fly minifying css and js

What tools can minify JS/CSS files after saving files without using console? I want something like SimpLESS. Write and update some js and css files and they minify and concatenate in two "build" files like that daemon program do automatically with LESS.
For Windows: Smalify works for me, if I'm not using CoffeeScript. I haven't tried them, but there are several other CodeKit alternatives here.
You can always find a plugin for your Text Editor. I don't know which editor you are using, but most of the popular ones either have build systems, have strong plugin communities, or both.
Sublime Text 2: Tons of plugins, and you can customize a build and save script.
Notepad++: Vibrant community, has minification plugins that would work for you as well.
CodeKit for Mac.
Check this python script.
http://github.com/hkasera/minify
It minifies js as well as css files too. It stores detailed log files and you can add this script as a git hook and save yourself from doing it manually everytime.
Hope it may help!

Categories