Initial commit, v0.1.0

Author: mariuszm

.bowerrc

@@ -0,0 +1,4 @@
+{
+  "directory": "vendor",
+  "json": "bower.json"
+}

.gitignore

@@ -0,0 +1,5 @@
+._.DS_Store
+.sass-cache/
+dist/
+node_modules/
+vendor/

.jshintrc

@@ -0,0 +1,28 @@
+{
+    // ECMAScript 5
+    "es5"          : false,     // Allow ECMAScript 5 syntax.
+    "strict"       : true,     // Require `use strict` pragma in every file.
+    "globalstrict" : true,     // Allow global "use strict" (also enables 'strict').
+
+    "immed"        : true,
+    "sub"          : true,
+    "devel"        : true,
+    "forin"        : true,
+    "curly"        : true,
+    "browser"      : true,
+    "loopfunc"     : true,
+    "trailing"     : true,
+    "eqeqeq"       : true,
+    "indent"       : 4,
+    "newcap"       : true,
+    "noarg"        : true,
+    "node"         : true,
+    "noempty"      : true,
+    "undef"        : true,
+    "white"        : false,
+    "predef": [
+        "google",
+        "angular",
+        "_"
+    ]
+}

README.md

@@ -0,0 +1,67 @@
+Why ng-devstack?
+================
+This project has been inspired by another great concept <a href="http://joshdmiller.github.io/ng-boilerplate/">ngBoilerplate</a>, allowing to create modern web applications in AngularJS. It follows all the best practices introduced in ngBoilerplate such as component/feature-oriented directory structure, intelligent build system, etc. However, I decided to improve it a little bit and create my own boilerplate since I missed some basic features like applying changes in real-time on adding new files to project, images optimization, remove redundant code on compiling output HTML, plus ngBoilerplate hasn't been updated for months. Now this all has been made possible. Please welcome ng-devstack!
+
+Features
+========
+* integration with gulp
+* dependency management with Bower
+* feature-oriented directory structure
+* Livereload fully handled server-side with NodeJS/Express (without installing additional extensions for browsers)
+* real-time applying changes to website on adding new files (no need to relaunch Watch task)
+* caching AngularJS templates to avoid additional server requests
+* pre-minifying AngularJS files
+* support for SASS (including Twitter Bootstrap official port to SASS)
+* support for JSHint
+* minify JS/CSS/HTML
+* remove logging (console.log(), etc.) from compiled JS code
+* images optimization on build (see Additional Info for details)
+* html5Mode support (see Additional Info for details)
+* integration with AngularUI Router & AngularUI Bootstrap
+
+Requirements
+============
+* Ruby
+* NodeJS
+
+Installation
+============
+1. Install SASS:
+
+    gem install sass
+
+2. Install gulp globally, which is giving access to gulp's CLI:
+
+    npm install gulp -g
+
+3. Install gulp locally to the project with other required plugins:
+
+    npm install
+
+4. Install dependencies:
+
+    bower install
+
+Usage
+=====
+To build the application simply type:
+
+    gulp build
+
+For development purposes, run watch task to build and start localhost with liverload:
+
+    gulp watch
+
+Deploy the production version by running 'gulp compile', or more simple:
+
+    gulp
+
+TODO
+=====
+- add authorization service
+- add E2E testing (Karma/Protractor)
+- add source maps support for SASS & JS
+- improve images/SVG optimization
+- update gulp configuration
+- add more comments to gulpfile
+- improve README.md

bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "ng-devstack",
+  "version": "0.1.0",
+  "devDependencies": {
+    "angular": "~1.2.12",
+    "angular-bootstrap": "~0.10.0",
+    "angular-mocks": "~1.2.12",
+    "angular-ui-router": "0.2.7",
+    "angular-ui-utils": "~0.1.1",
+    "bootstrap-sass-official": "latest"
+  },
+  "dependencies": {}
+}

gulpfile.js

@@ -0,0 +1,254 @@
+/* jshint strict: false */
+
+var gulp    = require('gulp'),
+    plugins = require('gulp-load-plugins')(),
+    server  = require('tiny-lr')();
+
+var config = {
+    app   : 'src',
+    build : 'build',
+    dist  : 'dist'
+};
+
+var paths = {
+    scripts   : ['src/app/**', 'src/common/**', '!src/app/**/*.html', '!src/common/**/*.html', '!src/app/**/*.scss', '!src/common/**/*.scss'],
+    templates : ['src/app/**', 'src/common/**', '!src/app/**/*.js', '!src/common/**/*.js', '!src/app/**/*.scss', '!src/common/**/*.scss'],
+    sass      : ['src/app/**', 'src/common/**', 'src/sass/**', '!src/app/**/*.js', '!src/common/**/*.js', '!src/app/**/*.html', '!src/common/**/*.html'],
+    assets    : 'src/assets/**',
+    html      : 'src/index.html'
+};
+
+var vendor_files = {
+    js: [
+        'vendor/angular/angular.js',
+        'vendor/angular-ui-router/release/angular-ui-router.js',
+        'vendor/angular-bootstrap/ui-bootstrap-tpls.js'
+    ],
+    css: [],
+    assets: [
+        'vendor/bootstrap-sass-official/vendor/assets/fonts/**/*'
+    ]
+};
+
+var inject = {
+    css : (vendor_files.css).concat(config.build + '/assets/*.css'),
+    js  : (vendor_files.js).concat([config.build + '/app/**/*.js', config.build + '/common/**/*.js'])
+};
+
+
+/*
+ Subtasks: Watch
+ */
+gulp.task('watch', ['sass', 'lint', 'html2js', 'vendor_js', 'img', 'vendor_assets', 'inject'], function () {
+    require('./server.js')(server);
+
+    gulp.watch(paths.sass, function (event) {
+        var files = [config.app + '/sass/main.scss', config.app + '/common/**/*.scss', config.app + '/app/**/*.scss'];
+        return fnSass(files).pipe(plugins.livereload(server));
+    });
+
+    gulp.watch(paths.templates, function (event) {
+        return fnHtml2Js(paths.templates).pipe(plugins.livereload(server));
+    });
+
+    gulp.watch(paths.scripts, function (event) {
+        return fnLint(event.path).pipe(plugins.livereload(server));
+    });
+
+    gulp.watch(paths.assets, function (event) {
+        return fnImg(event.path).pipe(plugins.livereload(server));
+    });
+
+    gulp.watch(paths.html, function (event) {
+        return fnInject(event.path).pipe(plugins.livereload(server));
+    });
+});
+
+
+/*
+ Subtasks: Clean up
+ */
+gulp.task('clean', function () {
+    return gulp.src([config.build, config.dist], { read: false })
+        .pipe(plugins.rimraf());
+});
+
+
+/*
+ Subtasks: Compile SASS, Autoprefix and minify
+ */
+var fnSass = function (path) {
+    return gulp.src(path)
+        .pipe(plugins.plumber())
+        .pipe(plugins.filesize())    // .pipe(plugins.size({ showFiles: true }))
+        .pipe(plugins.concat('main.scss'))
+        .pipe(plugins.rubySass({ style: 'expanded' }))
+        .pipe(plugins.autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
+        .pipe(plugins.filesize())    // .pipe(plugins.size({ showFiles: true }))
+        .pipe(gulp.dest(config.build + '/assets'));
+};
+gulp.task('sass', function () {
+    var files = [config.app + '/sass/main.scss', config.app + '/common/**/*.scss', config.app + '/app/**/*.scss'];
+    return fnSass(files);
+});
+
+gulp.task('styles', ['sass'], function () {
+    return gulp.src(config.build + '/assets/*.css')
+        .pipe(plugins.bytediff.start())
+        .pipe(plugins.minifyCss({ keepSpecialComments: 0 }))
+        .pipe(plugins.rename({ suffix: '.min' }))
+        .pipe(plugins.bytediff.stop())
+        .pipe(gulp.dest(config.dist + '/assets'));
+});
+
+
+/*
+ Subtasks: JSHint, concat, and minify JavaScript
+ */
+var fnLint = function (path) {
+    return gulp.src(path, { base: 'src' })
+        .pipe(plugins.plumber())
+        .pipe(plugins.jshint('.jshintrc'))
+        .pipe(plugins.jshint.reporter('default'))
+        .pipe(gulp.dest(config.build));
+};
+gulp.task('lint', function () {
+    return fnLint(paths.scripts);
+});
+
+
+/*
+ Subtask Cache AngularJS templates
+*/
+var fnHtml2Js = function (path) {
+    return gulp.src(path)
+        .pipe(plugins.minifyHtml({
+            empty: true,
+            spare: true,
+            quotes: true
+        }))
+        .pipe(plugins.ngHtml2js({
+            moduleName: 'templates'
+        }))
+        .pipe(plugins.concat('app-templates.js'))
+        .pipe(gulp.dest(config.build + '/app'));
+};
+gulp.task('html2js', function () {
+    return fnHtml2Js(paths.templates);
+});
+
+
+/*
+ Subtask: Copy vendor JS files to /build/
+*/
+gulp.task('vendor_js', function () {
+    if (!vendor_files.js.length) {
+        return;
+    }
+    return gulp.src(vendor_files.js, { base: '.' })
+        .pipe(gulp.dest(config.build));
+});
+
+gulp.task('scripts', ['lint', 'html2js', 'vendor_js'], function () {
+    var arr = vendor_files.js.concat(paths.scripts);
+    return gulp.src(arr)
+        .pipe(plugins.concat('main.js'))
+        .pipe(plugins.bytediff.start())
+        .pipe(plugins.ngmin())
+        .pipe(plugins.uglify())
+        .pipe(plugins.removelogs())
+        .pipe(plugins.rename({ suffix: '.min' }))
+        .pipe(plugins.bytediff.stop())
+        .pipe(gulp.dest(config.dist + '/assets'));
+});
+
+
+/*
+ Subtask: Copy vendor assets to /build/
+*/
+gulp.task('vendor_assets', function () {
+    if (!vendor_files.assets.length) {
+        return;
+    }
+    return gulp.src(vendor_files.assets)
+        .pipe(gulp.dest(config.build + '/assets'));
+});
+
+
+/*
+ Subtasks: Compress Images & copy assets
+ */
+var fnImg = function (path) {
+    return gulp.src(path)
+        .pipe(gulp.dest(config.build + '/assets'));
+};
+gulp.task('img', function () {
+    return fnImg(paths.assets);
+});
+
+gulp.task('assets', ['img', 'vendor_assets'], function () {
+    return gulp.src(paths.assets)
+        .pipe(plugins.plumber())
+        // .pipe(plugins.bytediff.start())
+        .pipe(plugins.newer(config.dist + '/assets'))
+        // .pipe(plugins.imagemin({ optimizationLevel: 5, progressive: true, interlaced: true }))
+        // .pipe(plugins.bytediff.stop())
+        .pipe(gulp.dest(config.dist + '/assets'));
+});
+
+
+/*
+ Subtask: Inject CSS & JS to index.html source
+ */
+var fnInject = function (path) {
+    return gulp.src(inject.css.concat(inject.js), { read: false })
+        .pipe(plugins.inject(path, {
+            addRootSlash: false,
+            ignorePath: ['/', 'build/']
+        }))
+        .pipe(gulp.dest(config.build));
+};
+gulp.task('inject', ['sass', 'lint', 'html2js'], function () {
+    return fnInject(config.app + '/index.html');
+});
+
+
+/*
+ Subtask: Replace non-optimized HTML blocks
+ */
+gulp.task('html-replace', ['inject'], function () {
+    return gulp.src(config.build + '/index.html')
+        .pipe(plugins.htmlReplace({
+            css: 'assets/main.min.css',
+            js: 'assets/main.min.js'
+        }))
+        .pipe(gulp.dest(config.dist));
+});
+
+/*
+ Subtasks: Compile and minify HTML
+ */
+gulp.task('html', ['html-replace'], function () {
+    return gulp.src(config.dist + '/index.html')
+        .pipe(plugins.plumber())
+        .pipe(plugins.minifyHtml({ quotes: true }))
+        .pipe(gulp.dest(config.dist));
+});
+
+
+
+
+/*
+ The default task
+ */
+gulp.task('build', ['clean'], function () {
+    gulp.start('sass', 'lint', 'html2js', 'vendor_js', 'img', 'vendor_assets', 'inject');
+});
+
+gulp.task('compile', ['build'], function () {
+    gulp.start('styles', 'scripts', 'assets', 'html-replace', 'html');
+});
+
+gulp.task('default', function () {
+    gulp.start('compile');
+});