Skip to content

Instantly share code, notes, and snippets.

@mchelen
Last active July 23, 2019 15:25
Show Gist options
  • Save mchelen/e0a22155a7f2fbe67b5a to your computer and use it in GitHub Desktop.
Save mchelen/e0a22155a7f2fbe67b5a to your computer and use it in GitHub Desktop.
example: browserify + jquery + grunt
*~
bundle.js
bundle.min.js
node_modules

This is an example of using Grunt to run Browserify to create minified client-side Javascript that can use jQuery.

To use the example, checkout & cd into the repo, then:

npm install
grunt

Now open index.html in a web browser, and look in the Javascript console.

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! Grunt Uglify <%= grunt.template.today("yyyy-mm-dd") %> */ '
},
build: {
src: 'bundle.js',
dest: 'bundle.min.js'
}
},
browserify: {
build: {
src: 'index.js',
dest: 'bundle.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
// Default task(s).
grunt.registerTask('default', [
'browserify',
'uglify'
]);
};
<!DOCTYPE html>
<html>
<head>
<title>node / browserify example</title>
</head>
<body>
<script src="./bundle.min.js"></script>
Open Javascript console to see if JQuery ran successfully.
</body>
</html>
var $ = require("jquery");
$(document).ready(function(){
console.log("hello world");
});
{
"name": "browserify-jquery-grunt",
"version": "0.0.0",
"description": "foo",
"main": "index.js",
"repository" : "gist:e0a22155a7f2fbe67b5a",
"dependencies": {
"jquery": "^1.0.0"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-browserify": "^3.2.0",
"grunt-contrib-uglify": "^0.6.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Mike Chelen <[email protected]> (https://github.com/mchelen/)",
"license": "BSD-2-Clause"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment