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

casper-usemin-tmp

v0.0.23

Published

因为usemin在grunt-requirejs config那里的实现似乎有bug,对usemin进行了修改,核心代码全都是usemin的!后面再给usemin作者pull下request

Downloads

9

Readme

grunt-usemin Build Status

Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).

Watch out, this task is designed for Grunt 0.4 and upwards.

Getting Started

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, install this plugin with this command:

npm install grunt-usemin --save-dev

Workflow

usemin is composed of 2 different tasks (useminPrepare and usemin) that are part of the same workflow:

  • useminPrepare: detects special construction (blocks) in the HTML files and update the grunt config to run concat/uglify/cssmin/requirejs on the files referenced in the block. It does not changes the HTML files it is working on.
  • usemin: in the HTML and CSS files it treats, it replaces the blocks by a reference to a single file, as well as all references to images, scripts, CSS files, by their minified/revved/.. version if it is found on the disk. As such this target rewrites the HTML and CSS files it is working on.

Usually, useminPrepare is launched first, then the concat, uglify, cssmin and requirejs tasks are launched (they will created the minified/revved version of the referenced files), and then, in the end usemin is launched.

The useminPrepare task

A special task which uses the build block HTML comments in markup to get back the list of files to handle, and initialize the grunt configuration appropriately, and automatically.

Custom HTML "block" comments are provided as an API for interacting with the build script. These comments adhere to the following pattern:

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
  • type: either js or css
  • ** alternate search path **: (optional) By default the input files are relative to the treated file. Alternate search path allow to change that
  • path: the file path of the optimized file, the target output

An example of this in completed form can be seen below:

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

Internally, the task parses your HTML markup to find each of these blocks, and initializes for you the corresponding Grunt config for the concat / uglify tasks when type=js, the concat / cssmin tasks when type=css.

The task also handles use of RequireJS, for the scenario where you specify the main entry point for your application using the "data-main" attribute as follows:

<!-- build:js js/app.min.js -->
<script data-main="js/main" src="js/vendor/require.js"></script>
<!-- -->

One doesn't need to specify a concat/uglify/cssmin or RequireJS configuration anymore.

It is using only one target: html, with a list of the concerned files. For example, in your Gruntfile.js:

'useminPrepare': {
  html: 'index.html'
}

Options

uglify

Type: 'string' Default: 'uglify'

Name of the tool used to uglify the JavaScript.

cssmin

Type: 'string' Default: 'cssmin'

Name of the tool used to minify the CSS.

dest

Type: 'string' Default: nil

Base directory where the transformed files should be output.

The usemin task

This task is responsible for replacing in HTML and CSS files, references to non-minified files with reference to their minified/revved version if they are found on the disk.

usemin: {
  html: ['**/*.html'],
  css: ['**/*.css'],
  options: {
    dirs: ['temp', 'dist']
  }
}

dirs

Type: 'array of strings' Default: nil

Used to limit the directories that will be looked for revved files when replacing reference. By default all subdirectories are looked at.

basedir

Type: 'string' Default: nil

Change the basedir that represent the location of the transformed file. For example, let's imagine you have someting like:

|
+--- styles
    \ main.css
+--- views
    \ index.html

By default, if the file to be transformed is index.html, the images, scripts, ... referenced by this file will be considered are being in the views directory, whereas they must be linked to the styles directory.

License

BSD license and copyright Google