├── .bowerrc ├── .gitignore ├── LICENSE ├── README.md ├── app ├── css │ └── main.css ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── js │ ├── main.config.js │ ├── main.controllers.js │ ├── main.directives.js │ ├── main.filters.js │ ├── main.js │ └── main.services.js └── views │ ├── sample1.html │ └── sample2.html ├── bower.json ├── gulpfile.js └── package.json /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "app/bower_components" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ 3 | app/bower_components/ 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Mohit Virli 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-gulp-seed 2 | 3 | This is a basic starter project to initialize your project using [AngularJS](http://angularjs.org/) and [Gulp](http://gulpjs.com/). It follows MVC architecture and uses the perfect app structure to enhance productivity. 4 | 5 | This seed contains a sample AngularJS application with useable Gulp tasks which comes in handy for the build process. This app also uses [Bower](https://bower.io/) as the client-side package manager. 6 | 7 | In this seed app, `UI-router` is used for routing using states. This seed has sample states, controllers and much more. 8 | 9 | ### Prerequisites 10 | 11 | You must have [Git](http://git-scm.com/) and node.js and its package manager [npm](http://nodejs.org/) installed. 12 | 13 | ### Getting Started 14 | 15 | To get you started you can simply clone the angular-seed repository and install the dependencies: 16 | 17 | Clone the angular-seed repository using the command and change the directory to the root folder. 18 | 19 | ``` 20 | git clone https://github.com/mohitvirli/angular-gulp-seed.git 21 | cd angular-gulp-seed 22 | ``` 23 | 24 | For installing dependencies in this project which would install the core packages using node and the angular packages using bower 25 | 26 | I have set pre-install script which installs bower too. Run this command to install the dependencies. 27 | 28 | ``` 29 | npm install 30 | ``` 31 | After completing this command, run the following command to install the bower components which would install them in `app/bower_components`. This folder is predefined in `.bowerrc` file in the root folder. 32 | 33 | ``` 34 | bower install 35 | ``` 36 | 37 | ### Using Gulp 38 | 39 | I have written some useful tasks in gulp to manage the build and for development web server. 40 | 41 | For serving the app locally, Use 42 | 43 | ``` 44 | gulp serve 45 | ``` 46 | 47 | The above task uses [BrowserSync](https://www.browsersync.io/) which enables hosting and also implements live-reloading (Which basically means, the hosted app reloads everytime you save any changes in code). You would be redirected to the app at `http://localhost:3000`. 48 | 49 | For Building the production version which would make your app ready for deployment use the following command. 50 | 51 | ``` 52 | gulp build 53 | ``` 54 | 55 | The above command minifies the js and css files and concatenates them too. The vendor and user js and css files are seperated into different files. All the production file can be found in `dist/` folder. 56 | 57 | 58 | ### Directory Layout 59 | 60 | ``` 61 | app/ --> all of the source files for the application 62 | bower_components/ --> all the angular components and the custom dependencies would be found here 63 | js/ --> all the app specific javascript files 64 | main.js --> Main JavaScript file 65 | main.config.js --> Angular configuration file 66 | main.controllers.js --> All the app controllers are written in this file 67 | main.directives.js --> Custom directives are implemented in this file 68 | main.filters.js --> custom filters are implemented in this file 69 | main.services.js --> All the app services are written in this file 70 | css/ --> The user defined Stylesheets are in here 71 | main.css --> The main CSS file 72 | views/ --> the partial views or templates 73 | sample1.html --> the partial template 74 | sample2.html --> the other partial template 75 | index.html --> app layout file (the main html template file of the app) 76 | dist/ --> The build would be found here which could be pushed to production 77 | ``` 78 | 79 | ### Contribute 80 | 81 | As this my first open source project please have a look at this and suggest feedbacks, better contribute. -------------------------------------------------------------------------------- /app/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Helvetica'; 3 | background-color: #F6F9F9; 4 | } 5 | -------------------------------------------------------------------------------- /app/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohitvirli/angular-gulp-seed/39397a0ab1965aaea2f9ab58938cec97e4dd5bb7/app/favicon-16x16.png -------------------------------------------------------------------------------- /app/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohitvirli/angular-gulp-seed/39397a0ab1965aaea2f9ab58938cec97e4dd5bb7/app/favicon-32x32.png -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohitvirli/angular-gulp-seed/39397a0ab1965aaea2f9ab58938cec97e4dd5bb7/app/favicon.ico -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Angular-Gulp-Seed 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |

Hi, This is an Angular-gulp-seed project.

31 | Sample View 1   32 | Sample View 2 33 |
34 |
35 | 36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /app/js/main.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | app.config(['$stateProvider','$locationProvider', '$httpProvider','$urlRouterProvider', 4 | function($stateProvider, $locationProvider, $httpProvider, $urlRouterProvider) { 5 | $stateProvider 6 | .state('sample1',{ 7 | url:'/sample1', 8 | templateUrl:'../views/sample1.html', 9 | controller: 'SampleControllerOne', 10 | }) 11 | .state('sample2',{ 12 | url:'/sample2', 13 | templateUrl:'../views/sample2.html', 14 | controller: 'SampleControllerTwo', 15 | }); 16 | 17 | $urlRouterProvider 18 | .otherwise('/'); 19 | 20 | //For hiding '#' from URLs use the below 21 | // $locationProvider.html5Mode(true); 22 | } 23 | ]); 24 | 25 | -------------------------------------------------------------------------------- /app/js/main.controllers.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | app.controller('SampleControllerOne', ['$scope', function($scope) { 4 | 5 | //Controller code here. 6 | $scope.text = "This text is from SampleControllerOne"; 7 | 8 | }]); 9 | 10 | app.controller('SampleControllerTwo', ['$scope', function($scope) { 11 | 12 | //Controller code here. 13 | $scope.text = "This text is from SampleControllerTwo"; 14 | }]); -------------------------------------------------------------------------------- /app/js/main.directives.js: -------------------------------------------------------------------------------- 1 | app.directive('sampleDirective', function() { 2 | return { 3 | restrict: 'AE', 4 | scope: { 5 | file: '@' 6 | }, 7 | link: function(scope, el, attrs) { 8 | //Directive code 9 | } 10 | }; 11 | }); 12 | 13 | -------------------------------------------------------------------------------- /app/js/main.filters.js: -------------------------------------------------------------------------------- 1 | app.filter('myFormat', function() { 2 | return function() { 3 | //Filter code goes here 4 | }; 5 | }); -------------------------------------------------------------------------------- /app/js/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | window.app = angular.module('app', ['ui.router']); -------------------------------------------------------------------------------- /app/js/main.services.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | //sample service 4 | app.service('sampleService', function() { 5 | var self = this; 6 | 7 | self.task = function(data) { 8 | //Sample Function 9 | }; 10 | }); 11 | 12 | -------------------------------------------------------------------------------- /app/views/sample1.html: -------------------------------------------------------------------------------- 1 |

{{text}}

-------------------------------------------------------------------------------- /app/views/sample2.html: -------------------------------------------------------------------------------- 1 |

{{text}}

-------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xprep-tutor-web", 3 | "description": "", 4 | "version": "1.0.0", 5 | "homepage": "", 6 | "license": "MIT", 7 | "dependencies": { 8 | "angular": "*", 9 | "angular-ui-router": "*", 10 | "angular-messages": "^1.5.7" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | //Use the required plugins 2 | var gulp = require('gulp'); 3 | var browserSync = require('browser-sync'); 4 | var useref = require('gulp-useref'); 5 | var uglify = require('gulp-uglify'); 6 | var gulpIf = require('gulp-if'); 7 | var cssnano = require('gulp-cssnano'); 8 | var del = require('del'); 9 | var runSequence = require('run-sequence'); 10 | var ngAnnotate = require('gulp-ng-annotate'); 11 | 12 | //sample task 13 | gulp.task('sample',function(){ 14 | //Write the task here and run using "gulp sample" 15 | console.log("Sample task"); 16 | }) 17 | 18 | //For server hosting use BrowserSync 19 | gulp.task('browserSync', function() { 20 | browserSync.init({ 21 | notify: false, 22 | server: { 23 | baseDir: 'app', 24 | } 25 | }); 26 | }); 27 | 28 | /**************************************** 29 | 30 | Use this command "gulp serve" to host the app on local server. 31 | In this task, gulp watches the specified files for changes and reloads the browser on every change made. 32 | 33 | ****************************************/ 34 | 35 | gulp.task('serve', ['browserSync'], function() { 36 | // Reloads the browser whenever HTML or JS or CSS files change and Uses browserSync.reload to reload the browser 37 | gulp.watch('app/css/*.css', browserSync.reload); 38 | gulp.watch('app/**/*.html', browserSync.reload); 39 | gulp.watch('app/js/**/*.js', browserSync.reload); 40 | 41 | }); 42 | 43 | 44 | /**************************************** 45 | 46 | The tasks given below are for distribution. 47 | These tasks are used to create a dist folder for distribution purpose in which files are minified and could be pushed for publishing. 48 | The command for this is "gulp build". 49 | 50 | ****************************************/ 51 | 52 | //This is a sub-task for minifying js files 53 | //In index.html it changes all the script tags within "" into one single JavaScript file that points to `js/main.min.js`(the file name specified). 54 | //Check index.html for sample 55 | //Have a look at the documentation of useref for more information 56 | 57 | gulp.task('useref', function(){ 58 | return gulp.src('app/*.html') 59 | .pipe(useref()) 60 | //Uses annotation for possible injection errors 61 | .pipe(gulpIf('*.js', ngAnnotate())) 62 | // Minifies only if it's a JavaScript file 63 | .pipe(gulpIf('*.js', uglify())) 64 | .pipe(gulpIf('*.css', cssnano())) 65 | .pipe(gulp.dest('dist')) 66 | }); 67 | 68 | 69 | //This sub-task cleans the distribution folder everytime before "gulp build is used" 70 | gulp.task('clean:dist', function() { 71 | return del.sync('dist/*'); 72 | }); 73 | 74 | //This sub-task pipes the images to dist folder 75 | gulp.task('images', function() { 76 | return gulp.src('app/images/**/*') 77 | .pipe(gulp.dest('dist/images')); 78 | }); 79 | 80 | //This sub-task pipes all the views to the dist folder 81 | gulp.task('views', function() { 82 | return gulp.src('app/views/*') 83 | .pipe(gulp.dest('dist/views')); 84 | }); 85 | 86 | //This sub-task pipes all fonts to the dist folder 87 | gulp.task('fonts', function() { 88 | return gulp.src('app/fonts/**/*') 89 | .pipe(gulp.dest('dist/fonts')) 90 | }) 91 | 92 | //This sub-task pipes the index.html and the icons to the dist folder 93 | gulp.task('index', function() { 94 | return gulp.src('app/*.png') 95 | .pipe(gulp.dest('dist/')); 96 | }); 97 | 98 | 99 | /**************************************** 100 | 101 | This is the main task, which should be used as "gulp build" to push the app to distribution 102 | It uses runSequence to run all the gulp sub-tasks in sequence. 103 | 104 | ****************************************/ 105 | 106 | gulp.task('build', function(callback) { 107 | runSequence('clean:dist', ['useref', 'images', 'views', 'index'], 108 | callback 109 | ); 110 | }); 111 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-gulp-seed", 3 | "version": "1.0.0", 4 | "description": "This is a basic starter project to initialize your project using Angular and gulp. It follows MVC architecture and uses the perfect app structure to enhance productivity", 5 | "main": "index.js", 6 | "scripts" : { 7 | "preinstall" : "npm install gulp -g && npm install bower -g" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/mohitvirli/angular-gulp-seed.git" 12 | }, 13 | "keywords": [ 14 | "angular", 15 | "gulp", 16 | "bower", 17 | "starter", 18 | "seed", 19 | "browserSync" 20 | ], 21 | "dependencies": { 22 | "bower": "^1.7.9", 23 | "browser-sync": "^2.7.12", 24 | "del": "^2.0.2", 25 | "gulp": "^3.9.0", 26 | "gulp-cssnano": "^2.1.0", 27 | "gulp-if": "^2.0.0", 28 | "gulp-ng-annotate": "^2.0.0", 29 | "gulp-uglify": "^1.2.0", 30 | "gulp-useref": "^3.0.4", 31 | "run-sequence": "^1.2.1" 32 | }, 33 | "author": "Mohit Virli", 34 | "license": "MIT", 35 | "bugs": { 36 | "url": "https://github.com/mohitvirli/angular-gulp-seed/issues" 37 | }, 38 | "homepage": "https://github.com/mohitvirli/angular-gulp-seed#readme" 39 | } 40 | --------------------------------------------------------------------------------