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][multitask]) 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
});