Skip to content

Latest commit

 

History

History
190 lines (133 loc) · 4.97 KB

README.md

File metadata and controls

190 lines (133 loc) · 4.97 KB
Raw

piglet

Piglet is a watcher for LESS projects. It was inspired by Twitter Bootstrap's Makefile, and me getting tired of having to go to the command line every time I made a change to a .less file.

Quick start

git clone https://github.com/cdcarson/piglet.git
cd piglet
npm install
# make sure piglet is executable
chmod +x
# run piglet
./piglet ~/my/less ~/my/less/styles.less ~/my/css


@___,__
(   ^'_] Piglet is watching.
//-\\'
^^  ^^   ^C to stop him.

Watch:       /Users/me/my/less/
Compile:     /Users/me/my/less/styles.less
Target:      /Users/me/my/css/styles.less
Compiler:   lessc

Make a change to any .less file in /Users/me/my/less/, and piglet will compile.

Compiling...
Compiled in 0.948 seconds.

If you have an error in your less, piglet will notify you...

Compiling...

  __,___@
 [_'^   ) Error
   //-\\
   ^^  ^^

Command failed: FileError: 'missing.less' wasn't found in /Users/me/my/less/styles.less on line 14, column 1:
13 @import "footer";
14 @import "missing";

..and continue watching.

Optionally, add piglet to .bash_profile

If you want to command piglet from any directory add it to your .bash_profile

nano ~/.bash_profile
# add this…
export PATH=~/bin:/Users/your/path/to/piglet:$PATH
source ~/.bash_profile

This will allow you to do this:

# pwd: /Users/me/my/fabulously/long/path/wordpress/wp-content/themes/blue/assets
piglet less less/styles.less css


@___,__
(   ^'_] Piglet is watching.
//-\\'
^^  ^^   ^C to stop him.

Watch:  /Users/me/my/fabulously/long/path/wordpress/wp-content/themes/blue/assets/less/
Compile: /Users/me/my/fabulously/long/path/wordpress/wp-content/themes/blue/assets/less/styles.less
Target: /Users/me/my/fabulously/long/path/wordpress/wp-content/themes/blue/assets/css/styles.less
Compiler:   lessc

Command Line Usage

Usage: piglet [options] <watch> <source> <target>

    Required Arguments:

    watch: The directory path to watch. Changes to .less
           files in this directory will trigger compilation.

    source: The single source .less file to compile.

    target: The directory path or file path to which piglet
            will compile.

    Options:

    -r --recess: Use recess instead of lessc to compile.
                 Much slower.

Specifying recess

You can optionally use recess instead of less as the compiler instead of lessc by using option -r or --recess. Recess is much slower than lessc, but it might be a better option for going into production, since it's by the Bootstrap guys and performs validation.

Using piglet with Twitter Bootstrap

This is how we're using piglet to help with Twitter Bootstrap. We're setting up our projects like this:

- wordpress
  - wp-content
    - themes
      - blue
        - assets
          - less
            - (bootstrap source .less files)
            - style.less
            - (project source .less files, e.g. header.less)
          - css
            - style.min.css
          - img
            - glyphicons-halflings.png
            - glyphicons-halflings-white.png
          - fonts
          - ico
          - etc

Note that this setup ensures that relative URLs in the less files (like ../img/glyphicons-halflings.png) are valid in the css files as well.

The Twitter Bootstrap .less files can be found here. Just paste them into the less directory.

We set up our style.less like this:

@import "variables"; //Bootstrap's variables
@import "mixins";    //Bootstrap's mixins

@import "mytheme_mixins";
@import "mytheme_variables";
@import "../fonts/myfunfont/style.css";

@import "bootstrap";
/* optionally add desktop-only styles here */
@import "responsive";

@import "header";
@import "content";
@import "sidebar";
@import "footer";

Then we use piglet to watch the entire less directory:

# pwd: /Users/me/project/wordpress/wp-content/themes/blue/assets
piglet less less/style.less css

This compiles Bootstrap and our custom styles into one minified css, css/styles.min.css, that we can include in the header.

To Do

  • Allow piglet to pass options into lessc and recess.

Credits

      __,___@
     [_'^   )
       `//-\\
       ^^  ^^
     @___,__
jgs  (   ^'_]
     //-\\'
     ^^  ^^

LICENSE

Copyright 2013 Modern Media.

Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0