Git Product home page Git Product logo

grunt-include-replace's Introduction

grunt-include-replace Build Status devDependency Status

Grunt task to include files and replace variables.

Allows for parameterised file includes:

hello.html

<!DOCTYPE html>
<h1>Hello World!</h1>
@@include('/path/to/include/message.html', {"name": "Joe Bloggs"})

message.html

<p>Hello @@name!</p>

Result:

<!DOCTYPE html>
<h1>Hello World!</h1>
<p>Hello Joe Bloggs!</p>

Getting Started

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-include-replace --save-dev

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

grunt.loadNpmTasks('grunt-include-replace');

The "includereplace" task

Overview

The task allows you to preprocess your project file contents by replacing placeholder "variables" and including content from other files. In addition to "global" variables that are replaced in all files you specify, the task introduces the concept of "local" variables, which are passed as parameters to included files.

WARNING: The task does not check for recursive includes.

In your project's Gruntfile, add a section named includereplace to the data object passed into grunt.initConfig().

grunt.initConfig({
  includereplace: {
    your_target: {
      options: {
        // Task-specific options go here.
      },
      // Files to perform replacements and includes with
      src: '*.html',
      // Destination directory to copy files to
      dest: 'dist/'
    }
  }
})

Options

options.globals

Type: Object
Default value: {}

Global variables available for replacement in all files.

options.prefix

Type: String
Default value: @@

Variable/include directive prefix. Careful when changing as it is added to the regular expression used for finding variables to be replaced.

options.suffix

Type: String
Default value: ``

Variable/include directive suffix. Careful when changing as it is added to the regular expression used for finding variables to be replaced.

options.includesDir

Type: String
Default value: Relative to including file

Directory where includes will be resolved.

options.docroot

Type: String
Default value: .

@@docroot is a magic local variable that contains the relative path from the file that uses it to the path specified.

options.encoding

Type: String
Default value: utf-8

Encoding files are using.

options.processIncludeContents

Type: Function
Default value: undefined

A function called for every included file prior to processing by grunt-include-replace. It is passed the include file contents, local variables and the file path as parameters and should return the (possibly altered) file contents.

Usage Examples

Default Options

includereplace: {
  dist: {
    options: {
      globals: {
        var1: 'one',
        var2: 'two',
        var3: 'three'
      },
    },
    src: '*.html',
    dest: 'dist/'
  }
}
Files array format
includereplace: {
  dist: {
    options: {
      globals: {
        var1: 'one',
        var2: 'two',
        var3: 'three'
      },
    },
    files: [
      {src: 'js/**/*.js', dest: 'dist/', expand: true, cwd: 'src/'},
      {src: '*.css', dest: 'dist/css/', expand: true, cwd: 'src/css'}
    ]
  }
}
Files object format
includereplace: {
  dist: {
    options: {
      globals: {
        var1: 'one',
        var2: 'two',
        var3: 'three'
      },
    },
    files: {
      'dist/js/': ['**/*.js', '!dist/**/*.js'],
      'dist/css/': ['**/*.css', '!dist/**/*.css']
    }
  }
}

Custom Options

The following example allows include statements to appear as comments in HTML files by altering the prefix and suffix. Also all includes are resolved relative to the directory inc/ (relative to your Gruntfile) rather than relative to including file.

includereplace: {
  dist: {
    options: {
      prefix: '<!-- @@',
      suffix: ' -->',
      includesDir: 'inc/'
    },
    src: '*.html',
    dest: 'dist/'
  }
}

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

  • 2016-04-06   v4.0.0   Grunt 1.x support
  • 2015-08-28   v3.2.0   Pass file path to processIncludeContents
  • 2015-08-04   v3.1.0   Support for non-utf8 encoding
  • 2015-02-05   v3.0.0   Better logging for missing source files
  • 2014-05-05   v2.0.0   Adds globbing on include paths
  • 2013-12-30   v1.2.0   Rename like grunt-contrib-copy by specifying dest filename (for single files)
  • 2013-06-19   v1.1.0   Added magic local variable @@docroot: relative path from the file that uses it to the path specified
  • 2013-06-19   v1.0.0   Refactored files processing code to use Grunt files API properly
  • 2013-05-03   v0.4.0   Support for cwd directive
  • 2013-04-26   v0.3.0   Added new option includesDir - if set all includes resolved relative to that directory
  • 2013-04-19   v0.2.0   Added option processIncludeContents - a function that allows you to alter included file contents
  • 2013-02-18   v0.1.0   Grunt 0.4.x support

js-standard-style

grunt-include-replace's People

Contributors

alanshaw avatar xhmikosr avatar monzou avatar dumbccount avatar diogobeda avatar builtbylane avatar marlonbernardes avatar timothyklim avatar qyoz avatar druide avatar orthographic-pedant avatar whispy avatar

Watchers

rosa maria palacios juncosa avatar  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.