Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp, Browserify & Angular Test Set Up
//-- app file
'use strict'
//-- call in some dependencies
global.JQ = global.jQuery = require('jquery')//-- assign JQ to the global namespace for access
require('./paht/to/my/js/vendor/bootstrap.js');
require('angular');
require('angular-ui-router');
//-- get controller dependencies
var mainCtrl = require('./controllers/mainCtrl.js');
//-- TestServices
var testOneCtrl = require('./controllers/testOneCtrl');
var testTwoCtrl = require('./controllers/testTwoCtrl.js');
//-- get services dependencies
var TestService = require('./services/TestService');
//-- init angular js
var ngApp = angular.module('ngApp', ['ui.router'], function($interpolateProvider){
//-- as the output conflicts with laravel blade syntax lets alter the defaults
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
/**
* Config
*/
ngApp.config(['$stateProvider','$logProvider','$urlRouterProvider', function ($stateProvider, $logProvider,$urlRouterProvider) {
//-- enable logging
$logProvider.debugEnabled(true);
}]);
/**
* Controllers
*/
ngApp.controller('mainCtrl', ['$scope', '$log', mainCtrl])
ngApp.controller('testOneCtrl', ['$scope', 'TestService', '$log', testOneCtrl]);
ngApp.controller('testTwoCtrl', ['$scope', '$log', 'TestService', '$rootScope', '$timeout', testTwoCtrl]);
/**
* Services
*/
ngApp.factory('TestService', ['$http', '$q','$log', TestService]);
//-- Gulp File
//-- init
// Gulp required modules
var gulp = require('gulp')
notify = require('gulp-notify'),
concat = require('gulp-concat'),
util = require('gulp-util'),
cache = require('gulp-cache'),
clean = require('gulp-clean'),
prefixer = require('gulp-autoprefixer'),
sass = require('gulp-ruby-sass'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
pngcrush = require('imagemin-pngcrush'),
streamify = require('gulp-streamify'),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
ngmin = require('gulp-ngmin');
//-- Set up some variables for ease of editing
//-- Set the sass details
var sassData = {
'mgrSrc' : 'path/to/my/sass/**/*.sass',
'boostrap' : 'path/to/my/bootstrap/sass/vendor/**',
'target' : 'public/css'
};
//-- set the js details
var jsData = {
'mgrSrc' : 'path/to/my/js/**/*.js',
'target' : 'public/js/app'
};
//-- set the images details
var imgData = 'public/imgs/*';
//-- Set up the My CSS
gulp.task('MyCSS', function(){
return gulp.src(sassData.mgrSrc)
.pipe(sass({ style: 'compressed' }).on('error', util.log))
.pipe(prefixer('last 6 version'))
.pipe(concat('mgrmain.min.css'))
.pipe(minifycss())
.pipe(gulp.dest(sassData.target))
});
//-- Set up the Imgs
gulp.task('imgs', function(){
return gulp.src(imgData)
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
});
//-- Set up the Site JS
gulp.task('MyJS', function() {
return browserify('./path/to/the/main/js/app.js')
.bundle({ debug: true }).on('error', util.log)
.pipe(source('app.min.js'))
//-- uncomment when ready to minify
// .pipe(streamify(uglify({mangle: false})))
.pipe(gulp.dest('./public/js/app/'));
});
//-- clean folders
gulp.task('clean', function() {
return gulp.src([sassData.target, jsData.target], {read: false}).pipe(clean());
});
//-- Set up the watch
gulp.task('watch', function(){
//-- set up watchers for the abvoe tasks
gulp.watch(sassData.boostrap,['MyCSS']);
gulp.watch(sassData.mgrSrc,['MyCSS']);
gulp.watch(jsData.mgrSrc,['MyJS']);
gulp.watch(jsData.mgrSrc,['MyJS']);
//gulp.watch(imgData,['imgs']);
})
//-- Set the default file
gulp.task('default', ['clean'], function() {
gulp.start('MyCSS','MyJS','watch');
});
'use strict';
/**
*
*/
module.exports = function(scope, TestService, log) {
log.info('Test One Controller loaded');
//-- Place your controller code here
//-- eg of getting data
TestService.storeList(scope);
//-- eg of adding data
TestService.addStore(store).then(
function(res){ /* - this is a success callback add success code here*/},
function(statusCode){ /* - this is an error/failed callback add any error code here*/}
);
};
module.exports = function($http, $q, $log) {
return {
getStores : function(){
var deferred = $q.defer();
$http({method: 'GET', url : 'api/stores'})
.success(function(data, status, headers, config) {deferred.resolve(data) })
.error(function(data, status, headers, config) { deferred.reject(status);});
return deferred.promise;
},
addStore : function(storedata){
var deferred = $q.defer();
$http({method: 'POST', url : 'api/store/create', data : storedata})
.success(function(data, status, headers, config) {deferred.resolve(data) })
.error(function(data, status, headers, config) { deferred.reject(status);});
return deferred.promise;
},
removeStore : function(storeid){
var deferred = $q.defer();
$http({method: 'POST', url : '/api/store/remove', data: {id : storeid}})
.success(function(data, status, headers, config) { deferred.resolve(data); })
.error(function(data, status, headers, config) { deferred.reject(status);});
return deferred.promise;
},
storeList : function($scope){
this.getStores().then(
function(stores){ $scope.stores = stores;},
function(statusCode){$log.info('There was an issue with data collection: ' + statusCode)}
);
}
}//-- end return
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment