Browserify: first step

Author: denis-sokolov

.gitignore

@@ -1 +1,2 @@
+/build
 /node_modules

.jshintrc

@@ -7,6 +7,8 @@
 		"supergenpass": true
 	},
 
+	"node": true,
+
 	"noempty": true,
 	"latedef": true,
 	"quotmark": "single",

gulpfile.js

@@ -1,17 +1,24 @@
-/* jshint node: true */
 var gulp = require('gulp');
+var browserify = require('gulp-browserify');
 var shell = require('gulp-shell');
 var zip = require('gulp-zip');
 
 var manifest = require('./manifest.json');
 
+gulp.task('build', function(){
+	gulp.src(['src/events.js']).pipe(browserify()).pipe(gulp.dest('./build/'));
+	gulp.src(['src/page/script.js']).pipe(browserify()).pipe(gulp.dest('./build/'));
+	gulp.src(['src/options/options.js']).pipe(browserify()).pipe(gulp.dest('./build/'));
+});
+
 gulp.task('default', function() {
 	var destination = process.env.BUILD_DESTINATION ||
 		(process.env.HOME ? process.env.HOME + '/Desktop/' : './');
 
 	gulp.src([
 		'_locales/**/*',
 		'3rd/**/*',
+		'build/*',
 		'img/**/*',
 		'src/**/*',
 		'LICENSE',

manifest.json

@@ -17,10 +17,7 @@
 		"scripts": [
 			"3rd/supergenpass-lib.min.js",
 			"src/lib/hash.js",
-			"src/lib/i18n.js",
-			"src/lib/storage.js",
-			"src/messages.js",
-			"src/events.js"
+			"build/events.js"
 		],
 		"persistent": true
 	},

package.json

@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "gulp": "^3.6.0",
+    "gulp-browserify": "^0.5.0",
     "gulp-shell": "^0.2.4",
     "gulp-zip": "^0.3.2",
     "jshint": "^2.5.0"

src/events.js

@@ -1,6 +1,8 @@
-chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
-	/* global storage */
+var storage = require('./lib/storage.js');
+
+require('./messages.js')(storage);
 
+chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
 	// Returning true from this function keeps the message channel
 	// open for a response to be sent asynchronously.
 	// https://developer.chrome.com/extensions/runtime#event-onMessage
@@ -25,8 +27,7 @@ chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
 
 			var tabId = sender.tab && sender.tab.id;
 			chrome.tabs.executeScript(tabId, {file: '3rd/jquery.min.js', allFrames: true});
-			chrome.tabs.executeScript(tabId, {file: 'src/lib/i18n.js', allFrames: true});
-			chrome.tabs.executeScript(tabId, {file: 'src/page/script.js', allFrames: true});
+			chrome.tabs.executeScript(tabId, {file: 'build/script.js', allFrames: true});
 			chrome.tabs.insertCSS(tabId, {file: 'src/page/styles.css', allFrames: true});
 			sendResponse({});
 		});

src/lib/i18n.js

@@ -1,69 +1,68 @@
 /**
- * Abstract i18n functions.
- *
- * This file globalizes a single name "i18n".
- *
- * i18n(message_code, [...args])
- *   Returns a text value for message_code and args
- *
- *   i18n.html(element, message_code, htmls)
- *     Fills the element with a text value for message_code, with %n replaced
- *     by raw html snippets from htmls, returns the element
- *
- *   i18n.page(jQuery)
- *     Runs using jQuery on a page and populates all data-*-msg values.
- *     Use data-msg=key, data-value-msg, and data-placeholder-msg.
- */
-this.i18n = (function(){
-	'use strict';
+* Abstract i18n functions.
+*
+* This file globalizes a single name "i18n".
+*
+* i18n(message_code, [...args])
+*   Returns a text value for message_code and args
+*
+*   i18n.html(element, message_code, htmls)
+*     Fills the element with a text value for message_code, with %n replaced
+*     by raw html snippets from htmls, returns the element
+*
+*   i18n.page(jQuery)
+*     Runs using jQuery on a page and populates all data-*-msg values.
+*     Use data-msg=key, data-value-msg, and data-placeholder-msg.
+*/
 
-	var msg = function(name){
-		var args = Array.prototype.slice.call(arguments);
-		args.shift();
-		return chrome.i18n.getMessage.call(chrome.i18n, name, args) || ('[' + name + ']');
-	};
+'use strict';
 
-	var html = function(el, key, htmls){
-		htmls = htmls || [];
+var msg = function(name){
+	var args = Array.prototype.slice.call(arguments);
+	args.shift();
+	return chrome.i18n.getMessage.call(chrome.i18n, name, args) || ('[' + name + ']');
+};
 
-		var m = el.text(msg(key)).html();
+var html = function(el, key, htmls){
+	htmls = htmls || [];
 
-		// Reverse is requires to replace %10 before %1
-		// Although we replace only a single entry,
-		// it can be reordered in a messages file.
-		htmls.map(function(html, index){
-			return {
-				index: index + 1,
-				html: html.trim()
-			};
-		}).forEach(function(r){
-			m = m.replace('%'+r.index, r.html);
-		});
+	var m = el.text(msg(key)).html();
 
-		return el.html(m);
-	};
+	// Reverse is requires to replace %10 before %1
+	// Although we replace only a single entry,
+	// it can be reordered in a messages file.
+	htmls.map(function(html, index){
+		return {
+			index: index + 1,
+			html: html.trim()
+		};
+	}).forEach(function(r){
+		m = m.replace('%'+r.index, r.html);
+	});
 
+	return el.html(m);
+};
 
-	var api = msg;
 
-	api.html = html;
+var api = msg;
 
-	api.page = function($){
-		$('[data-msg]').each(function(){
-			var el = $(this);
-			var args = el.data('msg').split(';');
-			var key = args.shift();
-			html(el, key, args);
-		});
-		$('[data-value-msg]').each(function(){
-			var el = $(this);
-			el.val(msg(el.data('value-msg')));
-		});
-		$('[data-placeholder-msg]').each(function(){
-			var el = $(this);
-			el.prop('placeholder', msg(el.data('placeholder-msg')));
-		});
-	};
+api.html = html;
 
-	return api;
-})();
+api.page = function($){
+	$('[data-msg]').each(function(){
+		var el = $(this);
+		var args = el.data('msg').split(';');
+		var key = args.shift();
+		html(el, key, args);
+	});
+	$('[data-value-msg]').each(function(){
+		var el = $(this);
+		el.val(msg(el.data('value-msg')));
+	});
+	$('[data-placeholder-msg]').each(function(){
+		var el = $(this);
+		el.prop('placeholder', msg(el.data('placeholder-msg')));
+	});
+};
+
+module.exports = api;