Giter Club home page Giter Club logo

grunt-este-watch's Introduction

grunt-este-watch Build Status Dependency Status devDependency Status

Run predefined tasks whenever watched file changes. LiveReload included.

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-este-watch --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-este-watch');

Watch task

Run this task with the grunt esteWatch command.

Settings

options.dirs

Note you have to specify only directory ('dir'), or directory recursively ('dir/**/') with all its subdirectories.

Type: Array.<string> Default:

[
  'bower_components/closure-library/**/',
  'bower_components/este-library/**/',
  '!bower_components/este-library/node_modules/**/',
  'client/**/{js,css}/**/'
]

List of watched directories.

options.livereload

Type: Object Default:

{
  enabled: true,
  port: 35729,
  extensions: ['js', 'css']
}

Examples

Watch and compile CoffeeScript.

esteWatch:
  options:
    # just a dirs, no file paths
    dirs: ['dirOne/**/', 'dirTwo/**/']

  'coffee': (filepath) ->
      files = [
        expand: true
        src: filepath
        ext: '.js'
      ];
      grunt.config ['coffee', 'app', 'files'], files
      ['coffee:app']

  # to define all
  '*': (filepath) ->
    return ['urequire:uberscoreUMD']

From github.com/steida/este Gruntfile.coffee.

grunt.initConfig({
  esteWatch: {
    options: {
      dirs: ['bower_components/closure-library/**/',
      'bower_components/este-library/**/',
      '!bower_components/este-library/node_modules/**/',
      'client/**/{js,css}/**/']
    },
    coffee: function(filepath) {
      var files = [{
        expand: true,
        src: filepath,
        ext: '.js'
      }];
      grunt.config(['coffee', 'app', 'files'], files);
      grunt.config(['coffee2closure', 'app', 'files'], files);
      return ['coffee:app', 'coffee2closure:app'];
    },
    soy: function(filepath) {
      grunt.config(['esteTemplates', 'app'], filepath);
      return ['esteTemplates:app'];
    },
    js: function(filepath) {
      grunt.config(['esteUnitTests', 'app', 'src'], filepath);
      var tasks = ['esteDeps:all', 'esteUnitTests:app'];
      if (grunt.option('stage')) {
        tasks.push('esteBuilder:app');
      }
      return tasks;
    },
    styl: function(filepath) {
      grunt.config(['stylus', 'all', 'files'], [{
        expand: true,
        src: filepath,
        ext: '.css'
      }]);
      return ['stylus:all', 'stylus:app'];
    },
    css: function(filepath) {
      if (grunt.option('stage')) {
        return 'cssmin:app';
      }
    }
  }
});

Live Reloading

Live reloading is built into the watch task and enabled by default.

Enabling Live Reload in Your HTML

Once you've started a live reload server you'll be able to access the live reload script. To enable live reload on your page, add a script tag before your closing </body> tag pointing to the livereload.js script:

<script src="http://localhost:35729/livereload.js"></script>

Feel free to add this script to your template situation and toggle with some sort of dev flag.

FAQs

What's wrong with official grunt-contrib-watch?

It's slow and buggy, because it uses combination fs.fileWatch and fs.watch, for historical reason. From Node 0.9.2+, fs.watch is ok.

github.com/steida/este Needs maximum performance and stability, so that's why I had to create yet another Node.js file watcher. This watcher is continuously tested on Mac, Linux, Win platforms.

What are grunt-contrib-watch bugs?

  • Strange "Abort trap: 6" exceptions.
  • File added in new directory isn't detected.
  • LiveReload console.log mess during livereloading.
  • Polling to much files. Etc.

Note about editors atomic save

Node.js fs.watch sometimes does not work with editors atomic save. For example, Node.js v0.10.17 works while v0.10.18 doesn't. Fix for SublimeText is easy, just disable it via "atomic_save": false.

License

Copyright (c) 2013 Daniel Steigerwald

Licensed under the MIT license.

grunt-este-watch's People

Contributors

falsecz avatar steida avatar viliamkopecky avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.