| *~ | |
| bundle.js | |
| bundle.min.js | |
| node_modules |
| 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> | |
| <meta charset=utf-8 /> | |
| <title>jquery mobile shim example</title> | |
| <link rel="stylesheet" href="./node_modules/jquery-mobile/dist/jquery.mobile.min.css"> | |
| </head> | |
| <body> | |
| <div data-role="page" id="pageone"> | |
| <div data-role="header"> | |
| <h1>Page One</h1> | |
| </div> | |
| <div data-role="main" class="ui-content" style="font-size:large"> | |
| <h1>Welcome to the browserify-shim jquery mobile Example</h1> | |
| <p>You are using jQuery version:</p> | |
| <span id='jq-version'></span> | |
| <p>Click button to test <code>$.mobile.changePage('#pagetwo')</code></p> | |
| <button class="ui-btn" data-foo="#pagetwo">Go to Page Two</button> | |
| </div> | |
| <div data-role="footer"> | |
| <h1>Footer Text</h1> | |
| </div> | |
| </div> | |
| <div data-role="page" id="pagetwo"> | |
| <div data-role="header"> | |
| <h1>Page Two</h1> | |
| </div> | |
| <div data-role="main" class="ui-content" style="font-size:large"> | |
| <p>Success! <code>$.mobile.changePage('#pagetwo')</code> ran successfully.</p> | |
| <button class="ui-btn" data-foo="#pageone">Go to Page One</button> | |
| </div> | |
| <div data-role="footer"> | |
| <h1>Footer Text</h1> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="./bundle.min.js"></script> | |
| </body> | |
| </html> |
| var $ = require("jquery"); | |
| $.mobile = require('jquery-mobile'); | |
| // custom button click handler to demonstrate working $.mobile function | |
| $(document).on('click', 'button', function() { | |
| var link = $(this).attr("data-foo"); | |
| console.log('running $.mobile.changePage("'+link+'")'); | |
| $.mobile.changePage(link); | |
| }); |
| { | |
| "name": "browserify-jquery-grunt", | |
| "version": "0.0.0", | |
| "description": "foo", | |
| "main": "index.js", | |
| "repository" : "gist:e0a22155a7f2fbe67b5a", | |
| "dependencies": { | |
| "jquery": "^1.11.0", | |
| "jquery-mobile": "^1.4.0" | |
| }, | |
| "devDependencies": { | |
| "grunt": "^0.4.5", | |
| "grunt-browserify": "^3.2.0", | |
| "grunt-contrib-uglify": "^0.6.0", | |
| "browserify-shim": "~3.0.0" | |
| }, | |
| "browserify": { | |
| "transform": [ | |
| "browserify-shim" | |
| ] | |
| }, | |
| "browser": { | |
| "jquery": "./node_modules/jquery/dist/jquery.min.js", | |
| "jquery-mobile": "./node_modules/jquery-mobile/dist/jquery.mobile.min.js" | |
| }, | |
| "browserify-shim": { | |
| "jquery": "$", | |
| "jquery-mobile": { | |
| "exports": "$.mobile", | |
| "depends": [ | |
| "jquery:$" | |
| ] | |
| } | |
| }, | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "Mike Chelen <michael.chelen@gmail.com> (https://github.com/mchelen/)", | |
| "license": "BSD-2-Clause" | |
| } |