npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grunt-assemble-less

v0.8.1

Published

Compile LESS to CSS. Adds experimental features that extend Less.js for maintaining UI components, 'bundles' and themes. From Jon Schlinkert, core team member of Less.js. This project is a fork of the popular grunt-contrib-less plugin by the talented Tyle

Downloads

11

Readme

grunt-assemble-less NPM version Build Status

Compile LESS to CSS. Adds experimental features that extend Less.js for maintaining UI components and themes. From Jon Schlinkert, core team member of Less.js.

This project is a fork of the popular grunt-contrib-less by the talented Tyler Kellen. Please use that plugin if you require something stable and dependable.

Getting Started

This plugin requires Grunt ~0.4.2

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 assemble-less --save-dev

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

grunt.loadNpmTasks('assemble-less');

Less task

Run this task with the grunt less command.

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

Options

lessrc

Type: String

Default: null

A convenience option for externalizing task options into a .lessrc or .lessrc.yml file. If this file is specified, options defined therein will be used.

globalVars

Type: Object

Default: undefined

Prepend variables to source files.

modifyVars

Type: Object

Default: undefined

Append variables to source files.

metadata

Type: String|Array

Default: Empty string

Pass metadata as context to Lo-Dash templates embedded in LESS files. The name of the files is used as the first path in the template variables, so if you want to use data from palette.yml, your templates would look something like: <%= palette.foo %>.

Data may be formatted in JSON, YAML. See this YAML example and this LESS example.

Note that data passed into options.metadata is merged at the task and target levels. You can turn this off by adding options: {merge: false}, which then disables merging and allows targets to override any data passed in at the task-level.

imports

Type: Object (each option accepts a String or Array)

Default: null

Prepend @import statements to src files using any of the new @import directives released after Less.js v1.5.0, less, css, inline, reference (multiple and once probably aren't applicable here, but feel free to use them if you find a use case). See examples.

Any new import directives will be immediately available upon release by Less.js.

process

Type: Boolean|Object

Default: false

Process source files as templates before concatenating.

  • false - No processing will occur.
  • true - Process source files using grunt.template.process defaults.
  • options object - Process source files using grunt.template.process, using the specified options.
  • function(src, filepath) - Process source files using the given function, called once for each file. The returned value will be used as source code.

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

banner

Type: String

Default: Empty string

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

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

stripBanners

Type: Boolean|Object

Default: false

Strip JavaScript banner comments from source files.

  • false - No comments are stripped.
  • true - /* ... */ block comments are stripped, but NOT /*! ... */ comments.
  • options object:
    • By default, behaves as if true were specified.
    • block - If true, all block comments are stripped.
    • line - If true, any contiguous leading // line comments are stripped.

paths

Type: String|Array

Default: Directory of input file.

Specifies directories to scan for @import directives when parsing. The default value is the directory of the specified source files. In other words, the paths option allows you to specify paths for your @import statements in the less task as an alternative to specifying a path on every @import statement that appears throughout your LESS files. So instead of doing this:

@import "path/to/less/files/mixins.less";

you can do this:

@import "mixins.less";
rootpath

Type: String

Default: ""

A path to add on to the start of every url resource.

compress

Type: Boolean

Default: false

Compress output by removing some whitespaces.

cleancss

Type: Boolean

Default: false

Compress output using clean-css.

ieCompat

Type: Boolean

Default: true

Enforce the css output is compatible with Internet Explorer 8.

For example, the data-uri function encodes a file in base64 encoding and embeds it into the generated CSS files as a data-URI. Because Internet Explorer 8 limits data-uris to 32KB, the ieCompat option prevents less from exceeding this.

optimization

Type: Integer

Default: null

Set the parser's optimization level. The lower the number, the less nodes it will create in the tree. This could matter for debugging, or if you want to access the individual nodes in the tree.

strictImports

Type: Boolean

Default: false

Force evaluation of imports.

strictMath

Type: Boolean

Default: false

When enabled, math is required to be in parenthesis.

strictUnits

Type: Boolean

Default: false

When enabled, less will validate the units used (e.g. 4px/2px = 2, not 2px and 4em/2px throws an error).

syncImport

Type: Boolean

Default: false

Read @import'ed files synchronously from disk.

dumpLineNumbers

Type: String

Default: false

Configures -sass-debug-info support.

Accepts following values: comments, mediaquery, all.

relativeUrls

Type: Boolean

Default: false

Rewrite urls to be relative. false: do not modify urls.

urlArgs

Type: String

Default: none

Appends string to url tokens for cache busting.

customFunctions

Type: Object

Default: none

Define custom functions to be available within your LESS stylesheets. The function's name must be lowercase and return a primitive type (not an object or array). In the function definition, the first argument is the less object, and subsequent arguments are from the less function call. Values passed to the function are not simple primitive types, rather types defined within less. See the LESS documentation for more information on the available types.

report

Choices: false|'min'|'gzip'

Default: false

Either do not report anything, report only minification result, or report minification and gzip results. This is useful to see exactly how well Less is performing, but using 'gzip' can add 5-10x runtime task execution.

Example ouput using 'gzip':

Original: 198444 bytes.
Minified: 101615 bytes.
Gzipped:  20084 bytes.

sourceMap

Type: Boolean

Default: false

Enable source maps.

sourceMapFilename

Type: String

Default: none

Write the source map to a separate file with the given filename.

sourceMapURL

Type: String

Default: none

Override the default url that points to the sourcemap from the compiled css file.

sourceMapBasepath

Type: String

Default: none

Sets the base path for the less file paths in the source map.

sourceMapRootpath

Type: String

Default: none

Adds this path onto the less file paths in the source map.

outputSourceFiles

Type: Boolean

Default: false

Puts the less files into the map instead of referencing them.

version

Type: String

Default: less (current release)

Specify the directory containing the version of Less.js to use for compiling. You may specify a version at the task level or a different version for each target.

less: {
  options: {
    version: 'vendor/less'
  },
  styles: {
    files: {
      'css/style.css': ['src/style.less']
    }
  }
}

Useful for testing new features included in a beta or alpha release, or for comparing the compiled results from different versions of Less.js.

debug

Type: Boolean

Default: false

Generate some before/after files into a tmp directory so you can inspect what's happening. LESS source files will be saved with .less extension, and any metadata that's processed will be saved with a .json extension.

Usage Examples

Basic config for compiling LESS to CSS.

less: {
  development: {
    options: {
      paths: ["assets/css"]
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  },
  production: {
    options: {
      paths: ["assets/css"],
      compress: true
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  }
}

lessrc

A .lessrc file must contain valid JSON and look something like this:

{
  "compress": true,
  "metadata": "src/*.{json,yml}",
  "paths": ["vendor/bootstrap/less"]
}

A .lessrc.yml must contain valid YAML and look something like this:

compress: true
paths:
- vendor/bootstrap/less

Import directives

Prepend @import statements to src files using any of the new @import directives released after Less.js v1.5.0.

Options are:

  • reference: use a less file but do not output it
  • inline: include the source file in the output but do not process as less
  • less: treat the file as a less file, no matter what the file extension
  • css: treat the file as a css file, no matter what the file extension
less: {
  options: {
    paths: 'vendor/bootstrap/less',
    imports: {
      reference: ['variables.less', 'mixins.less'],
      inline: ['normalize.css'],
      less: ['normalize.css'],
      css: ['foo.css', 'bar.css']
    }
  },
  files: {}
}

Compile individual bootstrap components

Use import directives to compile each Bootstrap's LESS components separately.

Using the imports: {} option and the "files array format" enables us to compile each Bootstrap LESS component without having to add @import "variables.less"; and @import "mixins.less"; to every file.

less: {
  options: {
    paths: 'vendor/bootstrap/less',
    imports: {
      reference: ['variables.less', 'mixins.less'],
    }
  },
  components: {
    files: [
      { expand: true, cwd: 'vendor/bootstrap/less', src: '*.less', dest: 'assets/css/', ext: '.css' }
    ]
  }
}

Pass metadata to Lo-Dash templates

Use the metadata option to pass context to Lo-Dash templates before compiling. For example, let's say you have a config like this:

less: {
  options: {
    metadata: 'src/*.{json,yml}'
  },
  styles: {
    files: {
      'css/style.css': ['src/style.less']
    }
  }
}

and a data file, palette.yml, with some variables defined:

# palette.yml
info:    '#000'
warning: '#111'
danger:  '#222'
success: '#333'

Then in our LESS file, you can use Lo-Dash templates in LESS variables:

@palette-info:    <%= palette.info %>;
@palette-warning: <%= palette.warning %>;

.swatch-info {
  background: @palette-info;
}
.swatch-warning {
  background: @palette-warning;
}

Or use the templates in lieu of LESS variables:

.swatch-danger {
  background: <%= palette.danger %>;
}
.swatch-success {
  background: <%= palette.success %>;
}

Release History

DATE VERSION CHANGES

  • 2013-12-31 v0.7.0 Update to use the Less.js v1.6.0 API for banner, globalVars and
    modifyVars.
  • 2013-12-17 v0.6.0 Adds globalVars and modifyVars options. See readme and Gruntfile for
    examples.,Support sourceMapURL,Support outputSourceFiles,Support
    sourceMapFilename, sourceMapBasepath and sourceMapRootpath,Upgrade to LESS 1.5 Support strictUnits option,Support sourceMap option,Add
    customFunctions option for defining custom functions within LESS,Output
    the source file name on error,yuicompress option now cleancss (Less changed underlying dependency)
  • 2013-07-29 v0.5.0 Completely refactored the plugin based on grunt-contrib-less.,Add examples for all features to Gruntfile.,Removed the concat feature.,You can now use .lessrc or .lessrc.yml for externalizing task options.,New
    stripBanners option
  • 2013-06-12 v0.4.7 Cleaned up a lot of the Gruntfile. Examples are more clear.,New import
    option for prepending import statements to LESS files before compiling.,New banner option for adding banners to generated CSS files.
  • 2013-03-16 v0.3.0 New option to specify the version of less.js to use for compiling to CSS.
  • 2013-03-13 v0.2.3 New options from Less.js 1.4.0
  • 2013-02-26 v0.1.0 First commit.

Authors

This project is a fork of the popular grunt-contrib-less by Tyler Kellen. Please use that plugin if you require something stable and dependable.

This fork is maintained by:

Jon Schlinkert

Brian Woodward

License

Copyright (c) 2014 Tyler Kellen, contributors. Copyright (c) 2014 Jon Schlinkert, contributors.
Released under the MIT license


This file was generated by grunt-verb on April 21, 2014.