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

amd-optimize

v0.6.1

Published

An AMD (i.e. RequireJS) optimizer that's stream-friendly. Made for gulp. (WIP)

Downloads

1,047

Readme

This project is no longer actively maintained. Mostly, because we use Webpack in our projects now. I am happy to review incoming PRs, though. If you would like to become maintainer, please contact me. – @normanrz

amd-optimize Build Status

An AMD (RequireJS) optimizer that's stream-friendly. Made for gulp. (WIP)

Features

  • Trace all dependencies of an AMD module
  • Stream-friendly: Pipe in files and get an ordered stream of files out. No need for writing on disk in between.
  • Support for precompilation of source files (ie. CoffeeScript)
  • Wraps non-AMD dependencies
  • Supply a custom loader for on-demand loading
  • Leaves concatenation and minification to your preferred choice of modules
  • gulp-sourcemaps support

Example

var gulp = require("gulp");
var amdOptimize = require("amd-optimize");
var concat = require('gulp-concat');

gulp.task("scripts:index", function () {

  return gulp.src("src/scripts/**/*.js")
    // Traces all modules and outputs them in the correct order.
    .pipe(amdOptimize("main"))
    .pipe(concat("index.js"))
    .pipe(gulp.dest("dist/scripts"));

});

Motivation

This aims to be an alternative to the powerful r.js optimizer, but made for a streaming environment like gulp. This implementation doesn't operate on the file system directly. So, there's no need for complicated setups when dealing with precompiled files. Also, this module only focuses on tracing modules and does not intend replace a full-fletched build system. Therefore, there might be tons of use cases where r.js is a better fit.

Installation

$ npm install amd-optimize

API

amdOptimize(moduleName, [options])

moduleName

Type: String

options.paths

paths : {
  "backbone" : "../bower_components/backbone/backbone",
  "jquery" : "../bower_components/jquery/jquery"
}

options.map

map : {
  // Replace underscore with lodash for the backbone module
  "backbone" : {
    "underscore" : "lodash"
  }
}

options.shim

shim : {
  // Shimmed export. Specify the variable name that is being exported.
  "three" : {
     exports : "THREE"
  },

  // Shimmed dependecies and export
  "three.color" : {
     deps : ["three"],
     exports : "THREE.ColorConverter"
  },

  // Shimmed dependencies
  "bootstrap" : ["jquery"]
}

options.configFile

Type: Stream or String

Supply a filepath (can be a glob) or a gulp stream to your config file that lists all your paths, shims and maps.

amdOptimize.src("index", {
  configFile : "src/scripts/require_config.js"
});

amdOptimize.src("index", {
  configFile : gulp.src("src/scripts/require_config.coffee").pipe(coffee())
});

options.findNestedDependencies

Type: Boolean
Default: false

If true it will trace require() dependencies inside of top-level require() or define() calls. Usually, these nested dependencies are considered dynamic or runtime calls, so it's disabled by default.

Would trace both router and controllers/home:

define("router", [], function () {
  return {
    "/home" : function () {
      require(["controllers/home"]);
    },
    ...
  }
})

options.baseUrl

options.exclude

options.include

options.wrapShim

Type: Boolean
Default: false

If true all files that you have declared a shim for and don't have a proper define() call will be wrapped in a define() call.

// Original
var test = "Test";

// Output
define("test", [], function () {
  var test = "Test";
  return test;
});

// Shim config
shim : {
  test : {
    exports : "test"
  }
}

options.preserveFiles

Type: Boolean
Default: false

If true all files that you combine will not be altered from the source, should be used for outputted files to match the original source file, good for debugging and inline sourcemaps. A good code minifier or uglify will remove comments and strip new lines anyway.

options.loader

WIP. Subject to change.

amdOptimize.src(
  "index",
  loader : amdOptimize.loader(
    // Used for turning a moduleName into a filepath glob.
    function (moduleName) { return "src/scripts/" + moduleName + ".coffee" },
    // Returns a transform stream.
    function () { return coffee(); }
  )
)

amdOptimize.src(moduleName, options)

Same as amdOptimize(), but won't accept an input stream. Instead it will rely on loading the files by itself.

Algorithms

Resolving paths

Finding files

  1. Check the input stream.
  2. Look for files with the default loader and baseUrl.
  3. Look for files with the custom loader and its transform streams.
  4. Give up.

Recommended modules

  • gulp-concat: Concat the output files. Because that's the whole point of module optimization, right?
var concat = require("gulp-concat");

gulp.src("src/scripts/**/*.js")
  .pipe(amdOptimize("index"))
  .pipe(concat("index.js"))
  .pipe(gulp.dest("dist"));
var uglify = require("gulp-uglify");

gulp.src("src/scripts/**/*.js")
  .pipe(amdOptimize("index"))
  .pipe(concat("index.js"))
  .pipe(uglify())
  .pipe(gulp.dest("dist"));
var coffee = require("gulp-coffee");

gulp.src("src/scripts/**/*.coffee")
  .pipe(coffee())
  .pipe(amdOptimize("index"))
  .pipe(concat("index.js"))
  .pipe(gulp.dest("dist"));
  • gulp-if: Conditionally pipe files through a transform stream. Useful for CoffeeScript precompilation.
var gif = require("gulp-if");

gulp.src("src/scripts/**/*.{coffee,js}")
  .pipe(gif(function (file) { return path.extname(file) == ".coffee"; }, coffee()))
  .pipe(amdOptimize("index"))
  .pipe(concat("index.js"))
  .pipe(gulp.dest("dist"));
var eventStream = require("event-stream");
var order = require("gulp-order");

eventStream.merge(
  gulp.src("bower_components/almond/almond.js"),
  gulp.src(amdOptimize("index"))
    .pipe(concat("index.js"))
)
  .pipe(order(["**/almond.js", "**/index.js"]))
  .pipe(concat("index.js"))
  .pipe(gulp.dest("dist"));

Current limitations

Tests

  1. Install npm dev dependencies npm install
  2. Install gulp globally npm install -g gulp
  3. Run gulp test

License

MIT © scalable minds 2014