Auto Save CSS/JavaScript Changes Locally using Chrome Extensions

These days, there are better ways to edit CSS/JavaScript files and get the live-update without much difficulties.Some of the tools, that will help us achieve this task are as follows:

  1. Tincr( which I use ) available from http://tin.cr/
  2. AutoSave (https://github.com/NV/chrome-devtools-autosave)
  3. Livereload ( costs you $9.99)

Option 1:

Tincr is pretty easy to set up on Chrome. All we have to do is to install it from Chrome webstore.

For Django developers , configuration may spring a surprise. You will not see any support for Django projects :) but not to worry, just select the configuration file option, and write a “tincr.json” file drop it to the root of your application. A sample tincr.json file is as follows, this file is used by me ( as you can notice that I have added CSS and JavaScript files in media directory)

`{
toFile : [
  {from: /media/(.+\\.js),
   to: media/$1},
   {from: /media/(.+\\.css),
   to: /media/$1}
  ],
  fromFile : [
     {from: (\\\\|/)media\\1(.+(\\.js|\\.css))(\\.[a-zA-Z]+)?$,
      to: /media/$2?body=1}
      ]
}`

You can have the original configuration file from http://tin.cr/docs.html and modify it according to your project directory structure.

Option 2:

This is a project being developed by Nikita Vasilyev , a good article on how to set this up is written by Addy Osmani. This is a free tool, and has dependency with Node.js.

Option 3:

Livereload is an awesome mac app ( http://livereload.com/) which is available through Mac App Store. It has great support for SASS,Stylus and various other scripting compilers.

Although, it is a great tool. I keep myself away because it is a paid app ( $10 approx.) and I prefer FOSS applications/software.

The very same team has released a linux version which uses browsers, I haven’t tried it though.

So my conclusion, there are plenty of new and interesting tools available in the market to release you from the pain of write+save+click refresh :) . Get your hands dirty and try a bit of HTML/CSS/JavaScript, you can become a better web developer with added skills.