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.
Related
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.
Here i am declaring a module.
angular.module('users', []);
Here i am bootstrapping.
var mainApplicationModuleName = 'mean';
var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute', 'users']);
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
angular.element(document).ready(function() {
angular.bootstrap(document, [mainApplicationModuleName]);
});
i have declared all the scripts in the html file, but it still having trouble loading.
Ensure that your script files are refered in correct order as below
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="/application.js"></script>
<script type="text/javascript" src="/users/users.client.module.js"></script>
<script type="text/javascript" src="/core/core.client.module.js"></script>
<script type="text/javascript" src="/core/controllers/core.client.controller.js"></script>
<script type="text/javascript" src="/core/config/core.client.routes.js"></script>
<script type="text/javascript" src="/users/services/authentication.client.service.js"></script>
<script type="text/javascript" src="/articles/articles.client.module.js"></script>
<script type="text/javascript" src="/articles/controllers/articles.client.controller.js"></script>
<script type="text/javascript" src="/articles/services/articles.client.service.js"></script>
<script type="text/javascript" src="/articles/config/articles.client.routes.js"></script>
Second in your users.server.controller.js file modify the method.
User.findById({
id: id /// modified here
}, function(err, user) {
if (err) {
next(err);
} else {
req.user = user;
next();
}
});
I used yeoman to start an angular projects.
I used bower to install some angular components.
In my index.html I have this peace of code
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<!--should be the last to override-->
<link rel="stylesheet" href="styles/custom2.css">
<link rel="stylesheet" href="styles/diverse.css">
</head>
<!-- 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/angular-route/angular-route.js"></script>
<script src="bower_components/hello/dist/hello.all.min.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-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
after I run
grunt serve:dist
the index.html get compiled and here is the result.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>indexPage</title>
<meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!--to auto host later-->
<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css"> <!--should be the last to override-->
<link rel="stylesheet" href="styles/custom2.css">
<link rel="stylesheet" href="styles/diverse.css"> </head>
<script src="scripts/vendor.3bff2419.js"></script> <script src="scripts/scripts.c4d1c5ee.js"></script> <body ng-app="frontApp" ng-class="body_style"> <!--<div ng-show="mainNavBar_show" ng-include src="mainNavBar"></div>--> <div ng-view></div> </body> </html>
All the files that are shown as link rel="..."
are throwing 404 error. ( not the case for the files that are succeffully compiled)
here is screenshot from the error code.
How can i make grunt add this files.
I used the defaukt grunt.js shipped with yeoman.
Seems like your HTML has been rewritten to point the DIST folder which is something that "makes sense", a solution could be to make a copy of your bower components to your DIST folder or change the rewriting html rules in your grunt tasks.
I use a copy grunt task like this one
copy: {
main: {
files: [
{ src: ['**/**.min.css'], dest: 'dist/' },
{ src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/' },
{ src: ['bower_components/Chart.js/Chart.min.**'], dest: 'dist/' },
{ src: ['bower_components/jquery/jquery.min.**'], dest: 'dist/' },
{ src: ['bower_components/angular/angular.min.**'], dest: 'dist/' },
{ src: ['bower_components/angular-i18n/angular-locale_es-419.min.**'], dest: 'dist/' },
//... and so on...
]
}
}
Hi I've been having some problems refactoring my controllers into their own snippets
I want the controllers to inherit the dependencies from my initial app declaration.
"use strict";
angular.module('clockOn', ['angular-contextual-date','logon','milli','mobile','ClockOnController','Auth','ngStorage'])
I need these dependencies to flow through my controllers.
angular.module('clockOn').controller('LogonController', ['$rootScope','$scope','$location','$localStorage','Auth',
function($rootScope, $scope, $location, $localStorage,Auth){
creates unknown provider errors --I'm assuming the dependencies aren't flowing down--
angular.module('clockOn',[]).controller()
creates undefined function 'controllerName' errors -In this scenario I'm assuming I'm redefining the app and hence loosing the other controllers-
Here's two of the controllers
(function (){
angular.module('clockOn',['Auth','angular-contextual-date'])
.controller('ClockOnController', ['$http','Auth','contextualDateService' ,function ($http,Auth,contextualDateService){
this.user = Auth.getTokenClaims().user; //authorised is a property of the controller
contextualDateService.config.fullDateFormats.thisMonth = "MMM d 'at' h:mm a ";
this.shifts = getShifts(this);
function getShifts(clockOnCtrl){
var date = new Date();
var curr_date = Date.now();
var week_from_now = Date.now()+"7";
$http({
method: 'GET',
url: '/shifts',
params: {"user_id":clockOnCtrl.user._id,
"start_at":curr_date,
"finish_at":week_from_now}
}).
then(function(res){
if (typeof res !== 'undefined'){
console.log(res.data);
clockOnCtrl.shifts = res.data;
}},
function(error){
console.log(error)
});
}
}]);
})();
My index file
<!DOCTYPE html>
<html class="container" ng-app="clockOn"> <!-- ng-app tells the html page which app/module it belongs too runs the store module on load-->
<head>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" type="text/css" href="../resources/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../resources/custom.css"/>
</head>
<body>
<script type="text/javascript" src="../resources/jquery.min.js"></script>
<script type="text/javascript" src="../resources/angular.min.js"></script>
<script type="text/javascript" src="../resources/bower_components/angular-contextual-date/dist/angular-contextual-date.js"></script>
<script type="text/javascript" src="../modules/app.js"></script>
<script type="text/javascript" src="../modules/logon.js"></script>
<script type="text/javascript" src="../modules/tasks.js"></script>
<script type="text/javascript" src="../services/milli.js"></script>
<script type="text/javascript" src="../services/auth.js"></script>
<script type="text/javascript" src="../modules/mobile.js"></script>
<script type="text/javascript" src="../modules/shifts.js"></script>
<script type="text/javascript" src="../modules/layout-components.js"></script>
<script type="text/javascript" src="../resources/bower_components/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="../controllers/controller-clockOn.js"></script>
<script type="text/javascript" src="../controllers/controller-logon.js"></script>
<script type="text/javascript" src="../controllers/controller-tasks.js"></script>
<div class="container" ng-controller="ClockOnController as clockOnCtrl">
<div class= "" ng-controller="LogonController as logonCtrl">
<logon-form></logon-form>
<top-menu></top-menu>
<div class="page-header" ng-show="token">
<h2 class="">Welcome {{clockOnCtrl.user.name | uppercase}}
<small>You currently have {{clockOnCtrl.shifts.length}} shifts</small>
<h2>
</div>
<shifts-list></shifts-list>
<custom-footer></custom-footer>
</div>
</div>
</body>
</html>
The error Argument 'ClockOnController' is not a function, got undefined
Here is my test file for testing the IndexController
//modules/application/tests/spec/controllers/IndexController.js
'use strict';
(function() {
describe('Application IndexController', function() {
beforeEach(function() {
module('HtEwa');
module('HtEwa.Application');
});
var scope, IndexController;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
IndexController = $controller('IndexController', {
$scope: scope
});
}));
it('should expose global scope', function() {
expect(scope.global).toBeTruthy();
});
});
})();
I have seen other answers but it is not working for me. And I have the files included in my karma.conf.js is:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/*/*.js',
'modules/*/*/*.js',
'modules/*/tests/spec/*/*.js'
]);
I have HtEwa and HtEwa.Application module. Under the HtEwa.Application there is IndexController.
//modules/application/controllers/IndexController.js
'use strict';
angular.module('HtEwa.Application').controller('IndexController', ['$scope', 'Global',
function($scope, Global) {
$scope.global = Global;
}
]);
I guess that my IndexController file is not included, but I have included modules/*/*/*.js in my karma.conf.js and that's where the IndexController is.Or Am I missing anything?
Edit:
And the karma --log-level debug shows that all files that are needed is served.
Here are the included files that i watched from chrome
<!-- Dynamically replaced with <script> tags -->
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/jasmine.js"></script>
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/adapter.js"></script>
<script type="text/javascript" src="/base/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/base/modules/application/application.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/FooterController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/HeaderController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/application/init.js"></script>
<script type="text/javascript" src="/base/modules/application/routes/ApplicationRoutes.js"></script>
<script type="text/javascript" src="/base/modules/application/services/Global.js"></script>
<script type="text/javascript" src="/base/modules/application/services/HTTPInterceptor.js"></script>
<script type="text/javascript" src="/base/modules/application/tests/spec/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/users/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/routes/Auth.js"></script>
<script type="text/javascript" src="/base/modules/users/services/UserService.js"></script>
<script type="text/javascript" src="/base/modules/users/tests/spec/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/users.js"></script>
<script type="text/javascript">
window.__karma__.loaded();
</script>
Try doing this instead:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/**/*.js'
]);
Notice the use of two *. Read the File Pattern example in the karma configuration documentation.
Wherein the examples are:
**/*.js: All files with a "js" extension in all subdirectories
**/!(jquery).js: Same as previous, but excludes "jquery.js"
**/(foo|bar).js: In all subdirectories, all "foo.js" or "bar.js" files