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-usemin2

v0.0.6

Published

An alternative to grunt-usemin.

Downloads

5

Readme

grunt-usemin2

An alternative to grunt-usemin

Usage

Configuration

{
  options: {
    // If provided, then set all path in html files relative to this directory
    baseDir: "baseDir/",

    // Same thing as baseDir but forces path to be absolute to this directory
    absoluteBaseDir: "baseDir/",

    // Task(s) to execute to process the css
    cssmin: 'cssmin',

    // Task(s) to execute to process the js
    jsmin: 'uglify'
  },

  // This should contain a reference to all HTML files that usemin2
  // needs to process
  html: 'src/*.html',

  // This section contain everything about css files processing
  css: {
    // You can create as much section as you want with
    // any name you want to use
    section_name: {
      // Each section should define a destination that point to the file
      // that will be created if the minification process is executed
      dest: "dest/css/section_name.min.css",

      // Files that needs to be processed for this section
      files: [{
        // Same as usual
        cwd: "src",
        // List of src (can be an array), each can be expanded,
        // you can also use a special "__min__" markup to select
        // thje correct file depending on the running process
        src: ["css/*.css", "externals/css/*__min__.css"]
        // Destination of the files when no minification process
        // occurs
        dest: "dest/"
      } /* , ... */]
    }/* , ... */
  },

  // Same as css but for js files
  js: {
    // ...
  }
}

Options

  • baseDir: not set by default, set all path in html files relative to this directory.
  • absoluteBaseDir: same as baseDir but forces path to be absolute from this point (starting with a /).
  • cssmin: defaults to 'cssmin', tasks to execute to minify CSS files. Also accepts an array of tasks like ['cssmin1', 'cssmin2']. In this case, it supposes that the first task is able to produce a single file from numerous inputs. If it does not, use 'concat' first like in: ['concat', 'taskonsinglefile', 'cssmin'].
  • jsmin: same as cssmin but for js minification process, defaults to 'uglify'.

HTML files

Just add simple comments to your HTML file that will be replaced by the correct include(s) depending on the process :

<!-- usemin2:css:section_name -->
<!-- usemin2:js:section_name -->

Invokation

Right now, by default grunt-usemin2 assume it is in dev mode. It means that it will publish each files listed in src sections to its corresponding destination and then replace sections in HTML files by a list of all moved files.

To activate the minification process, you need to be in release mode. To do so, you have to pass a release argument to the task just like that :

grunt usemin2:release

Any argument value other than release is ignored thus making the task behave as if in dev mode.

When the minification process is used, each task of the process is executed resulting in a single file per section. This is the single file that will be included in the HTML file where the section is referenced.

License

MIT License