I am having a problem with setting up bowerSync, Gulp and angularJs.
I have set up my local development server with bowerSync and now I am trying to add angularJs to the project. But every time I run the development server my browser freezes and this problem occurs:
In Chrome it shows error in console and displays tried to load angular more than once (It starts to loop).
Here is my gulpfile:
var gulp = require('gulp'),
sass = require('gulp-sass'),
bs = require('browser-sync').create(),
concat = require('gulp-concat'),
clean = require('gulp-clean'),
merge = require('merge-stream'),
install = require('gulp-install'),
gutil = require('gulp-util'),
wait = require('gulp-wait'),
help = require('gulp-showhelp'),
source = require('vinyl-source-stream'),
browserify = require('browserify');
gulp.task('browserify', function(){
return browserify('app/js/app.js')
.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest('js'));
})
//Installs bower and npm components for the project
gulp.task('install', function(){
return gulp.src(['bower.json', 'package.json'])
.pipe(install());
}).help="Installs bower and npm dependencies";
//Cleans dist and .tmp folders from the previous files
gulp.task('clean', function(){
var cleanTmp = gulp.src('dist')
.pipe(clean({read:false}));
var cleanDist = gulp.src('.tmp')
.pipe(clean({read:false}));
return merge(cleanDist, cleanTmp)
.pipe(wait(1500));
}).help="Cleans .tmp and dist folder from previous compiled files";
//Launches the development server
gulp.task('browser-sync', ['sass'], function(){
bs.init(['app/index.html', 'app/views/**/*.html', 'app/css/*.css', 'app/js/**/*.js'],{
server: {
baseDir: "./",
index: "app/index.html",
routes: {
"/bower_components": "bower_components",
"/css": "app/css",
"/images": "app/images",
"/app": "app"
}
},
ghostMode: {
links: false
}
});
}).help="Sets up the local development environment";
//Compiles css files
gulp.task('sass', function(){
return gulp.src('app/scss/*.scss')
.pipe(sass())
.pipe(concat('main.css'))
.pipe(gulp.dest('app/css'))
.pipe(bs.reload({stream: true}));
}).help="Compiles Scss to Css files";
gulp.task('js', function(){
return gulp.src('app/js/**/*.js')
.pipe(gulp.dest('.tmp/js'))
.pipe(bs.reload({stream:true}));
});
//Watches the changes in the files and autorefreshes browser
gulp.task('watch', ['browser-sync'], function(){
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/**/*.html").on('change', bs.reload);
gulp.watch('app/js/**/*.js', ['browserify']);
}).help="Watches changes in HTML, JS and SCSS files and compiles them";
//Builds the files to .tmp and dist folder
gulp.task('build', ['sass', 'clean'], function(){
var base = 'app/**/*';
var pathsToBuild = ['.tmp', 'dist'];
var tmpFolder = gulp.src(base)
.pipe(gulp.dest(pathsToBuild[0]));
var distFolder = gulp.src(base)
.pipe(gulp.dest(pathsToBuild[1]));
return merge(tmpFolder, distFolder);
}).help="Builds project to the dist folder";
//Environment for developing the front-end
gulp.task('dev', ['browser-sync', 'watch']).help="Sets up the environment for the local development";
//Displays gulp tasks
gulp.task('default', function(){
help.show();
});
and here is my app.js file:
'use strict';
var app = angular.module('brainTextApp', ['ngRoute']);
app.config(function($routeProvider, $httpProvider){
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$routeProvider
.when('/', {
templateUrl: "app/index.html"
})
.when('/login', {
templateUrl: "app/login.html"
})
.when('/dashboard', {
templateUrl: "dashboard.htm"
})
});
app.controller('loginController', function($scope, $location){
$scope.submit = function(){
var uname = $scope.username;
var pw = $scope.password;
if($scope.username == 'admin' && $scope.password == 'admin'){
$location.path('/dashboard');
}
}
});
I think it is a very silly mistake somewhere in there, but I am not abel to locate it. I have searched all over the internet and found no solutions for this problem
Hope you guys can help me somehow :)