Giter Site home page Giter Site logo

nopnop / grunt-transfo Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 1.0 72 KB

Transfo offer both 'copy' and 'concat' task at once with the addition of streamed transformation of content and optional caching based on files mtime to limit unrequired file processing. Transfo should be used as an alternative to any grunt-contrib-copy and/or grunt-contrib-concat usage without any change in your grunt configuration (see compatibility test)

License: MIT License

JavaScript 100.00%

grunt-transfo's Introduction

grunt-transfo

Transfo offer both 'copy' and 'concat' task at once with the addition of streamed transformation of content and optional caching based on files mtime to limit unrequired file processing. Transfo should be used as an alternative to any grunt-contrib-copy and/or grunt-contrib-concat usage without any change in your grunt configuration (see compatibility test).

transfo.png

Functionalities overview

  • Replace grunt-contrib-copy without any configuration changes
  • Replace grunt-contrib-concat without any configuration changes
  • Lazy mode offer caching to reduce processing time if the source is not newer than the destination (see lazy option)
  • Use of Stream instead of buffering all the file content before copy or concat.
  • Pipe stream of sources and/or concatenated sources through a pipeline of Stream Transform (see transforms option).
  • Adding dynamically files to the processing queue while the sources goes through the transforms pipeline.
  • Processing more than one file at a time (see concurrency option)

Getting Started

This plugin requires Grunt ~0.4.1 and node >= 0.10.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-transfo --save-dev

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

grunt.loadNpmTasks('grunt-transfo');

The "transfo" task

Overview

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

You can use grunt-transfo in place of any grunt-contrib-copy or grunt-contrib-concat configuration.

grunt.initConfig({
  transfo: {
    options: {
      // Any grunt-contrib-copy and/or grunt-contrib-concat options
      // Any grunt-transfo options (see below)
    },

    // Copy
    any_copy_task: {
      files: [
        {expand: true, src: ['path/**/*.js'], dest: 'build/', filter: 'isFile'}
      ]
    },

    // Concat
    any_concat_task: {
      options: {
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */',
      },
      src: ['build/project.js','vendors/**/*.js'],
      dest: 'dist/built.js',
      expand: true
    },
  },
})

Options

concurrency

Type: Integer (>= 1) • Default: 1

How many files to proceed at the same time (copy and concat are asynchronously executed).

transforms

Type: Array of Function • Default: []

Each function is a constructor for a Transform stream. Any time a source is processed, each constructor is called with following arguments and must return a Transform stream.

Array of function(src, dest, options, addFiles) ...

  • src {String}: The source file path
  • dest {String}: The destination file path
  • options {Object}:
    • All your task options
    • isConcat {Boolean}: This is file will be concatenated with others
  • addFiles {Function}: A helper to add files to the process queue. Usefull to add file detected while the transformation (expl: assets in css source):
    • sources {Array|String}: One or many path to copy / concatenate
    • dest {String}: Destination path
    • options: Copy/concat options (transfo options)
options: {
  transforms: [
    // PassThrough ...
    function(src, dest, options, addFiles) { return new stream.Transform(); }
  ]
}

See too Stream Handbook to understand why using stream may be very powerfull.

See too through2 a nice wrapped around stream.Transform.

transformsConcat

Type: Array of Function • Default: []

Like the transforms option but for the concatenated result.

Array of function(src, dest, options) ...

  • src {String}: The source file path
  • dest {String}: The destination file path
  • options {Object}:
    • All your task options
    • isConcat {Boolean}: This is file will be concatenated with others

lazy

Type: Boolean • Default: false

Do nothing if the destination file already exist with an equal or posterior mtime of the source(s). Both for copy and concat. Concat task a cached copy of the sources files after processing and transformation in tmp/grunt-transfo (see cache option below).

This option can be useful to reduce processing time. Especially when you use transfo with watch and livereload.

cache

Type: String • Default: tmp/grunt-transfo

The path to use to store lazy & concatenation cached files. Remember to add this path to your clean task if you plan to use the lazy option.

readOnly

Type: Boolean • Default: false

Only read source content through the process & transform pipeline but write nothing to the destination.

Usage Examples

The transfo-unifyurl library is an example of grunt-transfo stream transformation. transfo-unifyurl copy all css assets by adding them to the grunt-transfo pipeline.

npm install transfo-unifyurl
grunt.initConfig({
  transfo: {
    // This is a concat task. grunt-transfo allow copy task too
    concat_css: {
      src: ['src/**/*.css'],
      dest: 'build/css/compiled.css',
      options: {
        // Add unifyurl to the transformation pipeline
        transforms: [require('transfo-unifyurl')],
        // Set unifyurl options (below the default options):
        unifyurl: {
          // Assets destination: relative to the css destination path.
          dest:       './',

          // Url to the destination (default is a resolved
          // relative path based on dest value)
          url:        null,

          // List source extension to process. Other sources are ignored.
          extensions: ['.css']
        },
      },
    },
  },
})

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

(Nothing yet)

grunt-transfo's People

Contributors

nopnop avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

gruntjs-updater

grunt-transfo's Issues

A small typo in README.md

Hello,

It seems that there is a small typo in README.md:

Transfo should be used has an alternative

Best regards,
Denis

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.