overview

jonogould edited this page May 3, 2012 · 5 revisions

Overview

node-build-script is a tool that optimizes your code for production use on the web, relying on grunt build tool.

It is packaged as a grunt plugin, it defines an h5bp binary which wraps grunt plus few additional tasks and helpers.

But nothing is forcing you to install this package globally, you can decide to pull in the set of tasks and helper in your grunt setup, instead of relying on the global h5bp binary.

Install

node-build-script is not available on npm yet, but you can install it via npm very much the same way.

Installing the package is as simple as running the following command:

npm install https://github.com/h5bp/node-build-script/tarball/master

You can find more detailed documentation in the installation section.

Usage

This assumes the package was installed globally. If it was installed locally, simply replace h5bp by grunt in the following commands

Running h5bp --help should output the following to the console

grunt: a task-based command line build tool for JavaScript projects. (v0.3.7)

Usage
 h5bp [options] [task [task ...]]

Options
    --help, -h  Display this help text.
        --base  Specify an alternate base path. By default, all file paths are
                relative to the "grunt.js" gruntfile. (grunt.file.setBase) *
    --no-color  Disable colored output.
      --config  Specify an alternate "grunt.js" gruntfile.
   --debug, -d  Enable debugging mode for tasks that support it. For detailed
                error stack traces, specify --debug 9.
   --force, -f  A way to force your way past warnings. Want a suggestion? Don't
                use this option, fix your code.
       --tasks  Additional directory paths to scan for task and "extra" files.
                (grunt.loadTasks) *
         --npm  Npm-installed grunt plugins to scan for task and "extra" files.
                (grunt.loadNpmTasks) *
    --no-write  Disable writing files (dry run).
 --verbose, -v  Verbose mode. A lot more information output.
     --version  Print the grunt version.

Options marked with * have methods exposed via the grunt API and should instead
be specified inside the "grunt.js" gruntfile wherever possible.

Available tasks
        concat  Concatenate files. *
          init  Generate project scaffolding from a predefined template.
          lint  Validate files with JSHint. *
           min  Minify files with UglifyJS. *
         qunit  Run QUnit unit tests in a headless PhantomJS instance. *
        server  Start a static web server.
          test  Run unit tests with nodeunit. *
         watch  Run predefined tasks whenever watched files change.
       default  Alias for "intro clean mkdirs concat css min rev usemin
                manifest" tasks.
        reload  Alias for "default connect watch:reload" tasks.
           css  Concats, replaces @imports and minifies the CSS files *
         intro  Kindly inform the developer about the impending magic
        mkdirs  Prepares the build dirs *
         clean  Wipe the previous build dirs
      manifest  Generates manifest files automatically from static assets
                reference. *
           rev  Automate the hash renames of assets filename *
         serve  Spawns up a local http server on both staging / output
                directory
        usemin  Replaces references to non-minified scripts / stylesheets *

Tasks run in the order specified. Arguments may be passed to tasks that accept
them by using colons, like "lint:files". Tasks marked with * are "multi
tasks" and will iterate over all sub-targets if no argument is specified.

The list of available tasks may change based on tasks directories or grunt
plugins specified in the "grunt.js" gruntfile or via command-line options.

For more information, see https://github.com/cowboy/grunt

Loading tasks and helpers in your grunt setup

You may opt to go for the local install, and manually load the tasks and helpers the node-build-script provides.

Assuming you have no gruntfile yet for your project, run the following grunt init command:

grunt init:gruntfile

Grunt will ask you for few different things, simply follow the instructions. This will create a new grunt.js file relative to your current working directory.

The generated gruntfile should look like this (depending on the answers to the few questions, check out related grunt documentation)

/*global module:false*/
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: '<json:package.json>',
    meta: {
      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
    },
    lint: {
      files: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
    },
    qunit: {
      files: ['test/**/*.html']
    },
    concat: {
      dist: {
        src: ['<banner>', '<file_strip_banner:lib/<%= pkg.name %>.js>'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    min: {
      dist: {
        src: ['<banner>', '<config:concat.dist.dest>'],
        dest: 'dist/<%= pkg.name %>.min.js'
      }
    },
    watch: {
      files: '<config:lint.files>',
      tasks: 'lint qunit'
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        browser: true
      },
      globals: {
        jQuery: true
      }
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'lint qunit concat min');

};

To load the node-build-script and helpers, you'll need to use

grunt.loadNpmTasks('node-build-script')

next to

grunt.registerTask('default', 'lint qunit concat min');

Then, from your projet's root, running grunt --help should output the following:

...

Available tasks
        concat  Concatenate files. *
          init  Generate project scaffolding from a predefined template.
          lint  Validate files with JSHint. *
           min  Minify files with UglifyJS. *
         qunit  Run QUnit unit tests in a headless PhantomJS instance. *
        server  Start a static web server.
          test  Run unit tests with nodeunit. *
         watch  Run predefined tasks whenever watched files change.
       default  Alias for "lint qunit concat min" tasks.
          emit  A basic task that emits events over socket.io
       connect  Spawns up a local http server with socket.io enabled
           css  Concats, replaces @imports and minifies the CSS files *
         intro  Kindly inform the developer about the impending magic
        mkdirs  Prepares the build dirs *
         clean  Wipe the previous build dirs
      manifest  Generates manifest files automatically from static assets
                reference. *
           rev  Automate the hash renames of assets filename *
         serve  Spawns up a local http server on both staging / output
                directory
        usemin  Replaces references to non-minified scripts / stylesheets *

...