grunt-import v1.0.3

grunt-import

Inline file importer with @import command.

Syntax - add @import "path/to/file"; into any of your files to get it imported/injected into that placeholder.

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-import --save-dev

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

grunt.loadNpmTasks('grunt-import');

Importer task

Run this task with the grunt import command.

Task targets, files and options may be specified according to the Grunt Configuring tasks guide.

Options

banner

Type: String Default: empty string

This string will be prepended to the beginning of the output. It is processed using grunt.template.process, using the default options.

(Default processing options are explained in the grunt.template.process documentation)

footer

Type: String Default: empty string

This string will be appended to the end of the output. It is processed using grunt.template.process, using the default options.

(Default processing options are explained in the grunt.template.process documentation)

indent

Type: Boolean Default: false

If true, any whitespace preceding the @import statement will be preserved and the all of the imported content will be automatically indented.

Usage Examples

To include a file into another file add @import "path/to/another/file"; at any point inside your importing/source file.

Including external libs

In this example, running grunt import:dist (or grunt import because grunt-import is a multi task) will parse src/intro.js file writing the output to dist/intro.js

// Project configuration.
grunt.initConfig({
  import: {
    options: {},
    dist: {
      src: 'src/intro.js',
      dest: 'dist/intro.js',
    }
  }
});

In this example, running grunt import:dist will parse build/foo.js and write dist/foo.js, and parse build/bar.js and write dist/bar.js.

// Project configuration.
grunt.initConfig({
  import: {
    dist: {
      files: {
        'dist/foo.js': 'src/foo.js',
        'dist/bar.js': 'src/bar.js',
      }
    }
  }
});

Running Importer with Uglify after import

In this example, running grunt watch:js will parse src/intro.js file writing the output to stage/intro.js and followup with the Uglify task writing output into dist/intro.js

// Project configuration.
grunt.initConfig({
  import: {
    options: {},
    dist: {
      src: 'src/intro.js',
      dest: 'stage/intro.js',
    },
    tasks: ['uglify:dist']
  },
  uglify: {
    dist: {
      src: 'stage/intro.js',
      dest: 'dist/intro.js',
    }
  }
});

Running Importer with Watch and Uglify after file changed

In this example, running grunt watch:js will listen to any changes to the src/intro.js after which it will run import:dist task followed by uglify:dist.

// Project configuration.
grunt.initConfig({
  watch: {
    js: {
      files: ['src/intro.js'],
      tasks: ['import:dist']
    }
  }
  import: {
    options: {},
    dist: {
      src: 'src/intro.js',
      dest: 'stage/intro.js',
    }
    tasks: ['uglify:dist']
  },
  uglify: {
    dist: {
      src: 'stage/intro.js',
      dest: 'dist/intro.js',
    }
  }
});

Running Importer on a directory

In this example any .js file in src/ will be parsed and outputted to dist/

// Project configuration.
grunt.initConfig({
  import: {
    options: {},
    dist: {
      expand: true,
      cwd: 'src/',
      src: '*.js',
      dest: 'dist/',
      ext: '.js'
    }
  }
});

Intercepting events

You can listen to import events emitted by grunt.import using:

grunt.event.on('import', function(action, filepath, target) {
  //your code
});