Skip to content

Instantly share code, notes, and snippets.

@laustdeleuran
Last active August 29, 2015 14:07
Show Gist options
  • Save laustdeleuran/29e6dd433033a980b114 to your computer and use it in GitHub Desktop.
Save laustdeleuran/29e6dd433033a980b114 to your computer and use it in GitHub Desktop.
AngularJS + Browserify - Example of index files and alias
/** @module app/app */
'use strict';
// Modernizr (https://www.npmjs.org/package/browsernizr, https://github.com/jnordberg/browsernizr)
require('browsernizr/lib/html5shiv');
require('browsernizr/lib/addTest');
require('browsernizr/test/svg');
var Modernizr = require('browsernizr');
// Detect mobile - yay
Modernizr.addTest('mobilebrowser', function () {
return require('./scripts/plugins/detectmobilebrowsers')();
});
// jQuery include - make available in window before Angular loads, so Angular uses true jQuery objects.
var $, jQuery = require('jquery');
window.jQuery = window.$ = $ = jQuery;
// Angular setup
var angular = require('angular');
var app = angular.module('app', []);
// Local implementations
require('./scripts/filters');
require('./scripts/services');
require('./scripts/controllers');
require('./scripts/directives');
module.exports = app;
/** @module gulpfile */
// Import tasks
var browserify = require('gulp-browserify');
var plumber = require('gulp-plumber');
var flatten = require('flatten');
var uglify = require('gulp-uglify');
var ngAnnotate = require('gulp-ng-annotate');
var gutil = require('gulp-util');
var gulp = require('gulp');
// Determine whether running in production or not:
// If NODE_ENV=production or invoking gulp with --production argument.
var isProduction = process.env.NODE_ENV === 'production' || !!gutil.env.production;
// Compile and minify JS files using Browserify/CommonJS.
// In production everything is minified to a single bundle.
// Otherwise (in development) the JS is output with source maps.
gulp.task('js', function(){
gulp.src('app/app.js')
.pipe(plumber())
.pipe(
browserify({
// Do not parse require statements in certain modules for faster builds.
noParse: [
'jquery', 'angular'
],
shim: {
'jquery': {
path: './app/scripts/plugins/jquery/jquery-1.11.1.js',
exports: '$'
},
'angular': {
path: './app/scripts/plugins/angular/angular.js',
exports: 'angular'
}
},
insertGlobals: true,
debug: !isProduction
})
)
.pipe(isProduction ? ngAnnotate() : gutil.noop())
.pipe(isProduction ? uglify() : gutil.noop())
.pipe(gulp.dest(paths.client.destDir));
});
/** @module app/scripts/directives/index */
'use strict';
require('./module');
require('./another-module');
/** @module app/scripts/directives/module */
'use strict';
var angular = require('angular');
module.exports = angular.module('app')
.directive('module', function($location) {
return {
restrict: 'A',
scope: true,
link: function($scope, $element, $attrs) {
// Module code here
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment