I have a gulp script that minifies my javascript:
gulp.task("min:js",
function() {
return gulp.src([paths.js, "!" + paths.minJs])
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
When it minifies
<script src="Scripts/Min/modernizr.js"></script>
<script src="Scripts/Min/main.js"></script>
<script src="Scripts/Min/angular.js"></script>
That seems to work, but when I try to minify
<script src="Scripts/Min/modernizr.js"></script>
<script src="Scripts/Min/main.js"></script>
<script src="Scripts/Min/angular.js"></script>
<script src="Scripts/Min/angular-ui-router.js"></script>
I get angular is not defined in my console and the site doesn't come up.
I'm relatively new to gulp and angular, am I missing something here?
Update
Paths:
paths.concatJsDest = "Scripts/site.min.js";
paths.js = "Scripts/Min/**/*.js";
Now that I've narrowed my problem down to file order, I can use gulp-htmlreplace to load angular.min.js first:
<!--build:angular-->
<script src="Scripts/Src/angular.js"></script>
<!-- endbuild -->
<!-- build:js -->
<script src="Scripts/Min/modernizr.js"></script>
<script src="Scripts/Min/main.js"></script>
<script src="Scripts/Min/loading-bar.js"></script>
<script src="Scripts/Min/angular-ui-router.js"></script>/script>
<!-- endbuild -->
And the gulp steps:
gulp.src('Index.html')
.pipe(htmlreplace({
js: paths.concatJsDest,
angular: paths.angularmin
}))
.pipe(gulp.dest('.'));
});
gulp.task("min:js",
function() {
return gulp.src([paths.js, "!" + paths.minJs])
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
My consideration is that I'll be adding many more modules to my angular as I build out the site, so a static order isn't ideal.
Related
So I have successfully setup my gulpfile.js to handle copying files to a 'dist' folder to then move over to my windows server, but am curious on how I can deal with file pathing? So my gulp looks like:
var gulp = require('gulp');
var clean = require('gulp-clean');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var filter = require('gulp-filter');
var mainBowerFiles = require('main-bower-files');
// var imagemin = require('gulp-imagemin');
// var pngquant = require('imagemin-pngquant');
var bases = {
app: 'app/',
dist: 'dist/',
};
var paths = {
scripts: ['ppt/scripts/**/*.js'],
styles: ['ppt/styles/**/*.css'],
html: ['ppt/views/**/*.html'],
assets: ['ppt/assets/**/*.png', 'ppt/assets/**/*.svg'],
extras: ['index.html', '404.html', 'robots.txt', 'favicon.ico'],
};
var gulp = require('gulp'),
mainBowerFiles = require('main-bower-files');
gulp.task('bower', function() {
// mainBowerFiles is used as a src for the task,
// usually you pipe stuff through a task
return gulp.src(mainBowerFiles())
// Then pipe it to wanted directory, I use
// dist/lib but it could be anything really
.pipe(gulp.dest('dist/lib'))
});
// Delete the dist directory
gulp.task('clean', function() {
return gulp.src(bases.dist).pipe(clean());
});
// Process scripts and concatenate them into one output file
gulp.task('scripts', ['clean'], function() {
gulp.src(paths.scripts, {
cwd: bases.app
}).pipe(uglify()).pipe(concat('app.min.js')).pipe(gulp.dest(bases.dist + 'scripts/'));
});
// Imagemin images and ouput them in dist
// gulp.task('imagemin', ['clean'], function() {
// gulp.src(paths.images, {
// cwd: bases.app
// }).pipe(imagemin()).pipe(gulp.dest(bases.dist + 'assets/'));
// });
// Copy all other files to dist directly
gulp.task('copy', ['clean'], function() {
// Copy html
gulp.src(paths.html, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'views'));
// Copy styles
gulp.src(paths.styles, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'styles'));
//Copy assets
gulp.src(paths.assets, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'assets'));
// Copy app scripts
gulp.src(paths.scripts, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist + 'scripts'));
// Copy extra html5bp files
gulp.src(paths.extras, {
cwd: bases.app
}).pipe(gulp.dest(bases.dist));
});
// A development task to run anytime a file changes
gulp.task('watch', function() {
gulp.watch('app/**/*', ['scripts', 'copy']);
});
// Define the default task as a sequence of the above tasks
gulp.task('default', ['clean', 'scripts', 'copy']);
In using angular mvc, my index.html which sets my pathing for scripts, 3rd party components, etc... looks like (not complete file, just lines that are applicable):
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/angular-loading-bar/build/loading-bar.css" rel="stylesheet" />
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.common-material.min.css" rel="stylesheet" />
<link href="../bower_components/kendo-ui/styles/kendo.material.min.css" rel="stylesheet" />
<link href="ppt/styles/main.css" rel="stylesheet" />
<!-- 3rd party libraries managed by Bower -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-aria/angular-aria.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/angular-moment/angular-moment.js"></script>
<script src="../bower_components/kendo-ui/js/kendo.all.min.js"></script>
<script src="../bower_components/ng-file-upload-shim/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="../bower_components/ng-file-upload/ng-file-upload.min.js"></script>
<script src="../bower_components/checklist-model/checklist-model.js"></script>
<script src="../bower_components/angular-validation-match/dist/angular-validation-match.js"></script>
<!-- Load app main script -->
<script src="ppt/scripts/app.js"></script>
<!-- Load services -->
<script src="ppt/scripts/services/authInterceptorService.js"></script>
<script src="ppt/scripts/services/authService.js"></script>
<script src="ppt/scripts/services/pptService.js"></script>
<script src="ppt/scripts/services/claimsService.js"></script>
<script src="ppt/scripts/services/swipesService.js"></script>
<script src="ppt/scripts/services/recurService.js"></script>
<script src="ppt/scripts/services/tokensManagerService.js"></script>
<script src="ppt/scripts/services/docsService.js"></script>
<script src="ppt/scripts/services/ordersService.js"></script>
<script src="ppt/scripts/services/errorService.js"></script>
<script src="ppt/scripts/services/utilsService.js"></script>
<script src="ppt/scripts/services/cardsService.js"></script>
<script src="ppt/scripts/services/mobileAppService.js"></script>
<!-- Load controllers -->
<script src="ppt/scripts/controllers/indexController.js"></script>
<script src="ppt/scripts/controllers/infoController.js"></script>
<script src="ppt/scripts/controllers/homeController.js"></script>
<script src="ppt/scripts/controllers/pptController.js"></script>
<script src="ppt/scripts/controllers/pptProfileController.js"></script>
<script src="ppt/scripts/controllers/logreg/loginController.js"></script>
<script src="ppt/scripts/controllers/logreg/signupController.js"></script>
<script src="ppt/scripts/controllers/logreg/forgotController.js"></script>
<script src="ppt/scripts/controllers/claims/claimsController.js"></script>
<script src="ppt/scripts/controllers/claims/swipeController.js"></script>
<script src="ppt/scripts/controllers/claims/recurController.js"></script>
<script src="ppt/scripts/controllers/docs/docsController.js"></script>
<script src="ppt/scripts/controllers/orders/ordersController.js"></script>
<script src="ppt/scripts/controllers/orders/orderController.js"></script>
<script src="ppt/scripts/controllers/refreshController.js"></script>
<script src="ppt/scripts/controllers/tokensManagerController.js"></script>
<script src="ppt/scripts/controllers/associateController.js"></script>
<script src="ppt/scripts/controllers/cards/cardsController.js"></script>
<script src="ppt/scripts/controllers/mobileapp/mobileAppController.js"></script>
<!-- Load custom filters -->
<!-- Load custom directives -->
This shown and said, what is the best way to understand setting the pathing so it works when in the 'dest' folder'? I try to keep some things relative. Thoughts on this?
Thanks much.
I know it is simply a matter of adding 'dist', but I am wanting gulp to handle that as a task.
Change all the ../bower_components and ppt to be dist.
I'm trying to add the angular-flot library to a yeoman scaffolded angular project.
I added it using
bower i --save angular-flot
which pulled it into my bower_components directory but didn't add it to the index.html file.
I added it manually (as well as a reference to the flot CDN) and it works fine using
grunt serve
however, when I do
grunt build
and load the index.html file from the /dist directory, I get an error that the angular-flot is not included. So I think it's not making it through minification.
This is how the relevant section of my index.html look. I manually added the three lines between endbower and endbuild
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="bower_components/angular-flot/angular-flot.js"></script>
<!-- endbuild -->
Have you tried running grunt wiredep? This should add the dependency to index.html.
Also, you need to make sure your dependency is included in app.js:
angular.module('yourApp', [
'ngMessages',
'ngRoute',
'ngSanitize',
//...
'angular-flot'
])
I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.
I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.
Then I reference the file in index.html:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
<link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />
Then added dependency in App js file:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
However, I am getting injector error:
[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...
Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.
Any help is most appreciated.
Regards
Craig
If you are just using the modal.js, there is no module named ui.bootstrap.
Try changing:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
To:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);
Make sure to also download the template files for the modal (window.html and backdrop.html)
It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.
Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js
Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js
I'm trying to load a module called ChapterCtrl but am not being able to because of the Module Unavailable error. Other modules are being loaded as expected. When running the site it causes the links to crash. However, on removing ChapterCtrl from the list of dependencies in the app module I've found that the site is working fine.
Here is the code for the ChapterCtrl.js file:
angular.module('ChapterCtrl', []).controller('ChapterController', function($scope) {});
Here is the app.js file:
angular.module('soulFront', ['ngRoute', 'appRoutes', 'MainCtrl', 'PageCtrl', 'PageService', 'ChapterCtrl', 'ChapterService']);
Here is the Page.js file for comparison:
angular.module('PageCtrl', []).controller('PageController', function($scope) {});
I've tried going through the Error Reference page but was unable to find any fix/solution to the issue. Any suggestion is appreciated. Thanks
Edit
Here is a snippet of the index.html file:
<!--CSS-->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!--JS-->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.js"></script>
<!--ANGULAR CUSTOM-->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/PageCtrl.js"></script>
<srcipt src="js/controllers/ChapterCtrl.js"></srcipt>
<script src="js/services/PageService.js"></script>
<script src="js/services/ChapterService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
Currently I writing a Grunt Build file ; which uses "usemin" I have created 3 Blocks in HTML which would create 3 files assets.min.js , lib.min.js etc..
<!-- build:js js/assets.min.js -->
<script type="text/javascript" src="app/assets/js/lib/angular.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cache.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-touch.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.min.js"></script>
<!-- endbuild -->
This works fine. But There are 2 major problems I am facing with it...
Angular shows error "Uncaught error [$injector:modulerr]..
It seems Usemin is also miniifying the files again.
I also tried 2nd option, by just concatinating these files i.e bypassing minification step avoiding Usemin.. still the same error
Please guide
Angular uses something called dependency injection to resolve your arguments. Angular knows what each object is by its name.
"$scope" will be initialised as a scope object because it is named "$scope". After usemin, this variable will be called something else, like "a", to save bytes. Angular doesn't know what "a" is and throws an error.
You can solve this like so:
Read here about the minification of angular apps
http://docs.angularjs.org/tutorial/step_05
Either follow the guide manually or use ngmin process BEFORE you run uglify.
Hope this helps!
You can solve this by 2 ways.
1. use unminified files in usemin block
<!-- build:js js/assets.min.js -->
<script type="text/javascript" src="app/assets/js/lib/angular.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cache.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-route.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-animate.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-touch.js"></script>
<script type="text/javascript" src="app/assets/js/lib/angular-cookies.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jquery-1.10.1.js"></script>
<script type="text/javascript" src="app/assets/js/lib/jqueryui.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap.js"></script>
<script type="text/javascript" src="app/assets/js/lib/bootstrap-switch.js"></script>
<!-- endbuild -->
2. Copy scripts using grunt task
copy:{
scripts:{
files:[{
expand: true,
cwd:'<%= config.app %>',
dest: '<%= config.tmp %>', src: ['app/assets/js/lib/**/*.min.js']
}]
},
}