From d71bbc724fca854294ba7e5add53220113f4b082 Mon Sep 17 00:00:00 2001 From: Ricardo Lobo Date: Tue, 5 Jan 2016 11:06:57 +0000 Subject: [PATCH] re-structures project to match the project guidelines --- .dockerignore | 4 +- .gitignore | 5 +- README.md | 5 + app/{app.js => app.module.js} | 0 app/index.html | 50 ----- {app => content}/app.css | 2 +- .../{app.settings.js => settings.js} | 2 +- .../{app.settings.js => settings.js} | 2 +- gulpfile.js | 188 ++++++++++-------- index.html | 79 ++++++++ package.json | 2 + 11 files changed, 199 insertions(+), 140 deletions(-) rename app/{app.js => app.module.js} (100%) delete mode 100644 app/index.html rename {app => content}/app.css (99%) rename dist/angular/development/{app.settings.js => settings.js} (89%) rename dist/angular/production/{app.settings.js => settings.js} (88%) create mode 100644 index.html diff --git a/.dockerignore b/.dockerignore index 2fe4916..18eb2d1 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,5 +1,5 @@ # ignore linux temp files recursively **/*~ -# do not copy the settings file to image -app/app.settings.js +# do not copy the settings file to the final image +app/core/settings.js diff --git a/.gitignore b/.gitignore index 2dd9604..8c3ba93 100644 --- a/.gitignore +++ b/.gitignore @@ -14,7 +14,10 @@ node_modules/* bower_components/* # project settings -app/app.settings.js +app/core/settings.js + +# ignore templates.js they are auto-generated +app/core/templates.js # build folder build/ diff --git a/README.md b/README.md index d880e25..90f113c 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,11 @@ $ gulp check * If you think a jshint rule does not make sense in a specific case, you can hide a warning with a snippet of code * To that, add the following snippet to your file (/* jshint -W034 */), the -W034 part must match the rule code your trying to hide +#### Project Guidelines #### + +* We are currently migrating the project to match John Papa's angular-styleguide https://github.com/johnpapa/angular-styleguide +* Use these guidelines as a reference, if you find something in the code that does not match, correct it or open an issue + ### Who do I talk to? ### If you have something to say, feel free to contact: diff --git a/app/app.js b/app/app.module.js similarity index 100% rename from app/app.js rename to app/app.module.js diff --git a/app/index.html b/app/index.html deleted file mode 100644 index 622b3c3..0000000 --- a/app/index.html +++ /dev/null @@ -1,50 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - inbox - -

- Boxing Lab -

- -

{{authenticated.email}}, Logout

-
- - - -
- - - - - - - - - - - - - - - diff --git a/app/app.css b/content/app.css similarity index 99% rename from app/app.css rename to content/app.css index c438136..b606c57 100644 --- a/app/app.css +++ b/content/app.css @@ -36,4 +36,4 @@ body{ transform: translateY(-50%); left: 15px; font-size: 30px; -} \ No newline at end of file +} diff --git a/dist/angular/development/app.settings.js b/dist/angular/development/settings.js similarity index 89% rename from dist/angular/development/app.settings.js rename to dist/angular/development/settings.js index 69a2b22..765e556 100644 --- a/dist/angular/development/app.settings.js +++ b/dist/angular/development/settings.js @@ -2,7 +2,7 @@ 'use strict'; angular - .module('app') + .module('app.core') .constant('AppSettings', { appName: 'Boxing Lab', appVersion: 0.1, diff --git a/dist/angular/production/app.settings.js b/dist/angular/production/settings.js similarity index 88% rename from dist/angular/production/app.settings.js rename to dist/angular/production/settings.js index c5d69e2..2cda3bf 100644 --- a/dist/angular/production/app.settings.js +++ b/dist/angular/production/settings.js @@ -2,7 +2,7 @@ 'use strict'; angular - .module('app') + .module('app.core') .constant('AppSettings', { appName: 'Boxing Lab', appVersion: 0.1, diff --git a/gulpfile.js b/gulpfile.js index 06da8a7..085d502 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,7 +1,7 @@ var gulp = require('gulp'); -var webserver = require('gulp-webserver'); -var inject = require('gulp-inject'); -var util = require('gulp-util'); +var webserver = require('gulp-webserver'); // https://www.npmjs.com/package/gulp-webserver +var inject = require('gulp-inject'); // https://www.npmjs.com/package/gulp-inject +var util = require('gulp-util'); // https://www.npmjs.com/package/gulp-util var debug = require('gulp-debug'); // https://www.npmjs.com/package/gulp-debug var jshint = require('gulp-jshint'); // https://github.com/spalger/gulp-jshint var jscs = require('gulp-jscs'); // https://github.com/jscs-dev/gulp-jscs @@ -14,111 +14,111 @@ var useref = require('gulp-useref'); // https://www.npmjs.com/package/gulp-usere var minify = require('gulp-minify-css'); // https://www.npmjs.com/package/gulp-minify-css var imagemin = require('gulp-imagemin'); // https://github.com/sindresorhus/gulp-imagemin var listing = require('gulp-task-listing'); // https://www.npmjs.com/package/gulp-task-listing +var templatecache = require('gulp-angular-templatecache'); // https://www.npmjs.com/package/gulp-angular-templatecache +var htmlmin = require('gulp-htmlmin'); // https://github.com/jonschlinkert/gulp-htmlmin -// global configuration object -// to centralize the configs in -// one place +/** + * global configuration object + * to centralize the configuration in one place + */ var config = { - index: 'app/index.html', + index: 'index.html', root: './', - app: 'app/', + core: 'app/core/', build: 'build/app/', libs: 'bower_components/', - images: 'app/images/*.*', + images: 'content/images/*.*', jsfiles: [ 'app/**/*.module.js', 'app/**/*.js' ], cssfiles: [ - 'app/*.css' + 'content/*.css' + ], + htmlfiles: [ + 'app/**/*.html' ], - bowerjson: './bower.json', - bowerfiles: 'bower_components/**/*' + bowerjson: './bower.json' }; - -/* - * Launch a webserver to serve the development build +/** + * Prepares everything to serve the development build */ - -gulp.task('serve', ['bower-html-inject', 'webserver', 'watchers'], function(){ +gulp.task('serve', ['bower-html-inject', 'webserver', 'watchers'], function() { util.log(util.colors.bgBlue('Serving Development')); }); -// https://github.com/schickling/gulp-webserver -// http://stephenradford.me/gulp-angularjs-and-html5mode/ +/** + * Starts a webserver to launch the development build + */ gulp.task('webserver', ['dev-settings'], function() { gulp.src(config.root) .pipe(webserver({ + // https://github.com/schickling/gulp-webserver + // http://stephenradford.me/gulp-angularjs-and-html5mode/ fallback: config.index, livereload: true, open: true })); }); -/* +/** * Launch a webserver to serve the production build */ - gulp.task('serve-production', ['build'], function() { util.log(util.colors.bgBlue('Serving Production Build')); gulp.src(config.build) .pipe(webserver({ - fallback: 'index.html', + // https://github.com/schickling/gulp-webserver + // http://stephenradford.me/gulp-angularjs-and-html5mode/ + fallback: config.index, livereload: true, open: true })); }); -/* - * watcher setup +/** + * Watcher setup, watch for changes in js, css and html files + * ignore changes to the templates.js file since it is auto-generated + * + * @bug when adding folders gulp might crash, at least in linux + * the problem seems to be with gaze, and has no easy solution */ - gulp.task('watchers', function(){ util.log(util.colors.bgBlue('Setting Up Watchers')); - gulp.watch(config.jsfiles.concat(config.cssfiles), ['html-inject']); + gulp.watch([config.jsfiles, config.cssfiles, config.htmlfiles, '!/app/core/templates.js'], ['html-inject']); // we could set up here a watcher for the bower files, but that means the task - // will run twice on install, and also none on uninstall since there appears + // will run twice on install, and none on uninstall since there appears // to be some issues with the watch task and also with the gaze dependency // so we decided to go back and use bower hooks, unfortunately bower does not // have a postuninstall hook, so we are f... well, i've discover that it supports preuninstall // so we are going that route, see the .bowerrc file - // gulp.watch(config.bowerfiles, ['bower-inject']); }); -/* - * Read the js and css files from the filesystem - * as defined in the config.files array and inject - * them in the index.html file using gulp inject - * - * @bug when adding folders gulp might crash, at least in linux - * the problem seems to be with gaze, and has no easy solution +/** + * Read the index.html file and inject css and js files using gulp-inject */ - -gulp.task('html-inject', function() { +gulp.task('html-inject', ['templatecache'], function() { // gulp util uses chalk, see reference // https://github.com/chalk/chalk util.log(util.colors.bgBlue('Custom Code HTML Inject')); return gulp - .src(config.index) + .src(config.index) // gulp src options: https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpsrcglobs-options // we do not need to read the file content, all we need here are the paths // gulp inject options: https://github.com/klei/gulp-inject#optionsrelative - // we want the inject to be relative to the target (index.html) and not - // the current working dir as is the default - .pipe(inject(gulp.src(config.jsfiles.concat(config.cssfiles), {read: false}), {relative: false})) - .pipe(gulp.dest(config.app)); + .pipe(inject(gulp.src(config.jsfiles.concat(config.cssfiles), {read: false}), {relative: false})) + .pipe(gulp.dest(config.root)); }); -/* +/** * Uses Wiredep to read dependencies from bower.json file * and inject them in the index.html file - * this task is called by the hooks defined in .bowerrc - * we have setup a task dependency on html-inject because + * this task is also called by the hooks defined in .bowerrc + * we have a task dependency on html-inject because * on launch if we have two tasks in parallel injecting in the html * on of them will override the changes made by the other */ - gulp.task('bower-html-inject', ['html-inject'], function() { util.log(util.colors.bgBlue('Bower Dependencies HTML Inject')); var wiredep = require('wiredep').stream; @@ -129,86 +129,104 @@ gulp.task('bower-html-inject', ['html-inject'], function() { }; return gulp - .src(config.index) - .pipe(wiredep(options)) - .pipe(gulp.dest(config.app)); + .src(config.index) + .pipe(wiredep(options)) + .pipe(gulp.dest(config.root)); }); -/* +/** * Lints JavaScript code and enforces coding style. Rules are * defined in .jshintrc and .jscsrc respectively * @todo implement a run sequence to avoid this ugly hack */ - gulp.task('check', ['check-jscs']); -// stylish reporter https://github.com/sindresorhus/jshint-stylish +/** + * Code linting using jshint + */ gulp.task('check-jshint', function() { return gulp - .src(config.jsfiles) - .pipe(jshint()) - .pipe(jshint.reporter('jshint-stylish'), {verbose: true}); + .src(config.jsfiles) + .pipe(jshint()) + .pipe(jshint.reporter('jshint-stylish'), {verbose: true}); // stylish reporter https://github.com/sindresorhus/jshint-stylish }); +/** + * Check code style using jscs + */ gulp.task('check-jscs', ['check-jshint'], function() { util.log(util.colors.bgBlue('Code check using JSHint and JSCS')); return gulp - .src(config.jsfiles) - .pipe(jscs()) - .pipe(jscs.reporter()); + .src(config.jsfiles) + .pipe(jscs()) + .pipe(jscs.reporter()); }); -/* - * Create a build to prepare the app for production +/** + * Creates a build to prepare the app for production + * reads the index.html and picks the required css and js + * files using useref */ - -gulp.task('build', ['bower-html-inject', 'html-inject', 'images', 'production-settings'], function(){ +gulp.task('build', ['bower-html-inject', 'html-inject', 'images', 'production-settings'], function() { util.log(util.colors.bgBlue('Building App for Production')); return gulp - .src('app/**/*.html') - .pipe(useref()) - .pipe(gulpif('*.js', annotate())) - .pipe(gulpif('*.js', uglify())) - .pipe(gulpif('*.css', minify())) - .pipe(gulp.dest(config.build)); + .src(config.index) + .pipe(useref()) + .pipe(gulpif('*.js', annotate())) + .pipe(gulpif('*.js', uglify())) + .pipe(gulpif('*.css', minify())) + .pipe(gulp.dest(config.build)); }); -/* +/** * Compresses images and copies them to the build folder */ - -gulp.task('images',function(){ +gulp.task('images', function() { util.log(util.colors.bgBlue('Compressing and Copying Images to Build Folder')); return gulp - .src(config.images) - .pipe(imagemin()) - .pipe(gulp.dest(config.build + 'images')); + .src(config.images) + .pipe(imagemin()) + .pipe(gulp.dest(config.build + 'images')); }); -/* +/** * Copies development settings file to app folder */ - gulp.task('dev-settings',function(){ util.log(util.colors.bgBlue('Copying Development Settings File')); return gulp - .src('dist/angular/development/app.settings.js') - .pipe(gulp.dest(config.app)); + .src('dist/angular/development/settings.js') + .pipe(gulp.dest(config.core)); }); -/* +/** * Copies production settings file to app folder */ - gulp.task('production-settings',function(){ util.log(util.colors.bgBlue('Copying Production Settings File')); return gulp - .src('dist/angular/production/app.settings.js') - .pipe(gulp.dest(config.app)); + .src('dist/angular/production/settings.js') + .pipe(gulp.dest(config.core)); }); +/** + * Creates $templateCache from the html templates + */ +gulp.task('templatecache', function() { + util.log(util.colors.bgBlue('Create an Angular Template Cache')); + return gulp + .src(config.htmlfiles) + // http://perfectionkills.com/experimenting-with-html-minifier/#collapse_whitespace + .pipe(htmlmin({collapseWhitespace: true})) + .pipe(templatecache('templates.js', { + module: 'app.core', + standalone: false, + root: 'app/' + })) + .pipe(gulp.dest(config.core)); +}); -/* +/** * Lists all available tasks * @todo customize list by overring filters * By default, is is defined as the regular expression /[-_:]/ @@ -216,5 +234,7 @@ gulp.task('production-settings',function(){ */ gulp.task('help', listing); -// setting up the default task, this just calls the help task +/** + * Sets up the default task, this just calls the help task + */ gulp.task('default', ['help']); diff --git a/index.html b/index.html new file mode 100644 index 0000000..1ae5954 --- /dev/null +++ b/index.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+ + inbox + +

+ Boxing Lab +

+ +

{{authenticated.email}}, Logout

+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index 3da3432..03b2a75 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,10 @@ "description": "BoxSyncApp", "devDependencies": { "gulp": "^3.8.11", + "gulp-angular-templatecache": "^1.8.0", "gulp-debug": "^2.1.2", "gulp-filter": "^3.0.1", + "gulp-htmlmin": "^1.3.0", "gulp-if": "^2.0.0", "gulp-imagemin": "^2.4.0", "gulp-inject": "^3.0.0",