-
Notifications
You must be signed in to change notification settings - Fork 5
/
Documentation.html
67 lines (51 loc) · 10 KB
/
Documentation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html> <html> <head> <title>less-watcher.coffee</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="resources/docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> less-watcher.coffee </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <p><strong>less-watcher</strong> is a script that can watch
a directory and recompile your <a href="http://lesscss.org/">.less styles</a> if they change.</p>
<p>It's very useful for development as you don't need to think about
recompiling your Less files. Search is done in a recursive manner
so sub-directories are handled as well.</p>
<pre><code>Usage:
less-watcher -p [prefix] -d [directory]
Options:
-d Specify which directory to scan. [default: "."]
-p Which prefix should the compiled files have? Default is style.less will be compiled to .less.style.css. [default: ".less."]
-h Prints help [boolean]
</code></pre>
<p>Installing less-watcher is easy with <a href="http://npmjs.org/">npm</a>:</p>
<pre><code> sudo npm install less-watcher
</code></pre>
<p>Run this to watch for changes in the current working directory:</p>
<pre><code> less-watcher
</code></pre>
<p>Run this to watch for changes in a specified directory:</p>
<pre><code> less-watcher -d ~/Desktop/my_project
</code></pre>
<p>less-watcher requires:</p>
<ul>
<li><a href="http://nodejs.org/">node.js</a></li>
<li><a href="http://en.wikipedia.org/wiki/Find">find</a></li>
<li><a href="https://github.com/amix/watcher_lib">watcher_lib</a></li>
<li><a href="https://github.com/amix/optimist">optimist</a></li>
</ul> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Specify the command line arguments for the script (using optimist)</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">usage = </span><span class="s2">"Watch a directory and recompile .less styles if they change.\nUsage: less-watcher -p [prefix] -d [directory]."</span>
<span class="nv">specs = </span><span class="nx">require</span><span class="p">(</span><span class="s1">'optimist'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">usage</span><span class="p">(</span><span class="nx">usage</span><span class="p">)</span>
<span class="p">.</span><span class="nx">default</span><span class="p">(</span><span class="s1">'d'</span><span class="p">,</span> <span class="s1">'.'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">describe</span><span class="p">(</span><span class="s1">'d'</span><span class="p">,</span> <span class="s1">'Specify which directory to scan.'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">default</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span> <span class="s1">'.less.'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">describe</span><span class="p">(</span><span class="s1">'p'</span><span class="p">,</span> <span class="s1">'Which prefix should the compiled files have? Default is style.less will be compiled to .less.style.css.'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">boolean</span><span class="p">(</span><span class="s1">'h'</span><span class="p">)</span>
<span class="p">.</span><span class="nx">describe</span><span class="p">(</span><span class="s1">'h'</span><span class="p">,</span> <span class="s1">'Prints help'</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Handle the special -h case</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">if</span> <span class="nx">specs</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">argv</span><span class="p">).</span><span class="nx">h</span>
<span class="nx">specs</span><span class="p">.</span><span class="nx">showHelp</span><span class="p">()</span>
<span class="nx">process</span><span class="p">.</span><span class="nx">exit</span><span class="p">()</span>
<span class="k">else</span>
<span class="nv">argv = </span><span class="nx">specs</span><span class="p">.</span><span class="nx">argv</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Use <code>watcher-lib</code>, a library that abstracts away most of the implementation details.
This library also makes it possible to implement any watchers (see coffee-watcher for an example).</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">watcher_lib = </span><span class="nx">require</span> <span class="s1">'watcher_lib'</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Searches through a directory structure for *.less files using <code>find</code>.
For each .less file it runs <code>compileIfNeeded</code> to compile the file if it's modified.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">findLessFiles = </span><span class="nf">(dir) -></span>
<span class="nx">watcher_lib</span><span class="p">.</span><span class="nx">findFiles</span><span class="p">(</span><span class="s1">'*.less'</span><span class="p">,</span> <span class="nx">dir</span><span class="p">,</span> <span class="nx">compileIfNeeded</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Keeps a track of modified times for .less files in a in-memory object,
if a .less file is modified it recompiles it using compileLessScript.</p>
<p>When starting the script all files will be recompiled.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">WATCHED_FILES = </span><span class="p">{}</span>
<span class="nv">compileIfNeeded = </span><span class="nf">(file) -></span>
<span class="nx">watcher_lib</span><span class="p">.</span><span class="nx">compileIfNeeded</span><span class="p">(</span><span class="nx">WATCHED_FILES</span><span class="p">,</span> <span class="nx">file</span><span class="p">,</span> <span class="nx">compileLessScript</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Compiles a file using <code>lessc</code>. Compilation errors are printed out to stdout.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">compileLessScript = </span><span class="nf">(file) -></span>
<span class="nv">fnGetOutputFile = </span><span class="nf">(file) -></span> <span class="nx">file</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/([^\/\\]+)\.less/</span><span class="p">,</span> <span class="s2">"#{argv.p}$1.css"</span><span class="p">)</span>
<span class="nx">watcher_lib</span><span class="p">.</span><span class="nx">compileFile</span><span class="p">(</span><span class="s2">"lessc #{ file }"</span><span class="p">,</span> <span class="nx">file</span><span class="p">,</span> <span class="nx">fnGetOutputFile</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Starts a poller that polls each second in a directory that's
either by default the current working directory or a directory that's passed through process arguments.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">watcher_lib</span><span class="p">.</span><span class="nx">startDirectoryPoll</span><span class="p">(</span><span class="nx">argv</span><span class="p">.</span><span class="nx">d</span><span class="p">,</span> <span class="nx">findLessFiles</span><span class="p">)</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>