Merge pull request #70 from MindongLab/radium/ci

Setup CI builds

.travis.yml

@@ -0,0 +1,21 @@
+dist: trusty
+sudo: false
+language: node_js
+node_js: node
+before_script:
+ - npm install -g gulp-cli bower
+ - cd ./www
+ - yarn install
+ - bower install
+script:
+ - gulp build:prod
+deploy:
+ provider: pages
+ skip-cleanup: true
+ local-dir: build
+ repo: MindongLab/foochow-idioms-web
+ github-token: $GITHUB_TOKEN # Set in travis-ci.org dashboard, marked secure
+ keep-history: true
+ target-branch: master
+ on:
+ branch: radium/ci

www/CNAME

@@ -0,0 +1 @@
+idioms.mindong.asia

www/README.md

@@ -1,10 +1,10 @@
 # Web UI for Foochow Idioms
 
-## Build steps
+## Local development
 ```
-npm install
+yarn install
 bower install
-gulp serve::dev
+gulp serve:dev
 ```
 
 ## Coding Style

www/app/app.ts

@@ -1,8 +1,9 @@
 "use strict";
 angular.module('app', ['ui.router'])
-.constant("SERVER_API_URL","http://fiapi.radiumz.org:2052/api")
-.constant("SERVER_AUDIO_URL","/assets/audio/")
-
+.constant("SERVER_API_URL",/** inject:SERVER_API_URL **/"http://fiapi.radiumz.org:2052/api"/** endinject **/)
+.constant("SERVER_AUDIO_URL",/** inject:SERVER_AUDIO_URL **/"/assets/audio/"/** endinject **/)
+.constant("CI_BUILD_NUMBER",/** inject:CI_BUILD_NUMBER **/"dev"/** endinject **/)
+.constant("CI_COMMIT_HASH",/** inject:CI_COMMIT_HASH **/"dev"/** endinject **/)
 .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state({

www/app/components/apps-page.component.html

@@ -15,15 +15,14 @@ <h2 class="ms-font-xl ms-fontColor-themePrimary">福州话熟语大全 Android 
  <span class="ms-Button-label">豌豆荚下载</span>
  </button>
  </a>
- <a href="http://idioms.mindong.asia/assets/android.apk" target="_blank">
+ <a href="http://www.wandoujia.com/apps/org.mindonglab.foochowidioms/download?pos=detail-ndownload-org.mindonglab.foochowidioms" target="_blank">
  <button class="ms-Button ms-Button--primary">
  <span class="ms-Button-icon">
  <i class="ms-Icon ms-Icon--plus"></i>
  </span>
  <span class="ms-Button-label">下载Apk</span>
  </button>
  </a>
-
  <div>
  <a href='https://play.google.com/store/apps/details?id=org.mindonglab.foochowidioms&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'>
  <img alt='下载应用，请到 Google Play' style="max-height: 60px" src='assets/img/google-play-badge.png' />

www/app/components/apps-page.component.ts

@@ -1,11 +1,9 @@
 'use strict';
 
-function AppsPageController($scope) {
+function AppsPageController() {
 
 };
 
-AppsPageController.$inject = ['$scope'];
-
 var AppsPage = {
  template: require('./apps-page.component.html'),
  controller: AppsPageController

www/app/components/fi-mainview.component.ts

@@ -1,10 +1,10 @@
 'use strict';
 
-function FiMainviewController($scope) {
+function FiMainviewController() {
 
 };
 
-FiMainviewController.$inject = ['$scope'];
+FiMainviewController.$inject = [];
 
 var FiMainview = {
  template: require('./fi-mainview.component.html'),

www/app/components/help-page.component.html

@@ -21,5 +21,9 @@ <h2 class="ms-font-xl ms-fontColor-themePrimary">关于此应用</h2>
  <p class="ms-font-l">此应用受到萌典 (moedict.tw) 的启发而开发。</p>
  <h2 class="ms-font-xl ms-fontColor-themePrimary">关于开发者</h2>
  <p class="ms-font-l">
- <a href="http://lab.mindong.asia" target="_blank" class="ms-Link">闽东语实验室 (lab.mindong.asia)</a> 是一个致力于用技术力量保护闽东语的开源社群。</p>
+ <a href="http://lab.mindong.asia" target="_blank" class="ms-Link">闽东语实验室 (lab.mindong.asia)</a> 是一个致力于用技术力量保护闽东语的开源社群。
+ </p>
+ <p class="ms-font-xs">
+ Build {{::$ctrl.CI_BUILD_NUMBER}} @ {{::$ctrl.CI_COMMIT_HASH}}
+ </p>
 </div>

www/app/components/help-page.component.ts

@@ -1,10 +1,12 @@
 'use strict';
 
-function HelpPageController($scope) {
-
+function HelpPageController($scope, CI_BUILD_NUMBER, CI_COMMIT_HASH) {
+ this.CI_BUILD_NUMBER = CI_BUILD_NUMBER;
+ this.CI_COMMIT_HASH = CI_COMMIT_HASH;
+
 };
 
-HelpPageController.$inject = ['$scope'];
+HelpPageController.$inject = ['$scope', 'CI_BUILD_NUMBER', 'CI_COMMIT_HASH'];
 
 var HelpPage = {
  template: require('./help-page.component.html'),

www/app/components/landing-page.component.ts

@@ -14,11 +14,11 @@ function LandingPageController($scope, $rootScope, $location, kageService) {
  break;
  case 2:
  $location.path('/tags');
- $rootScope.$emit("toggleSidebar", {'state':false});
+ $rootScope.$emit("toggleSidebar", {'state': false});
  break;
  case 3:
  $location.path('/help');
- $rootScope.$emit("toggleSidebar", {'state':false});
+ $rootScope.$emit("toggleSidebar", {'state': false});
  break;
  }
  };

www/app/components/share-panel.component.ts

@@ -1,15 +1,13 @@
 'use strict';
 
 $ = require('jquery');
-function SharePanelController($scope) {
- 
- this.$onInit = function (){
+function SharePanelController() {
+
+ this.$onInit = function () {
  $(".ms-Panel").Panel();
  }
 };
 
-SharePanelController.$inject = ['$scope'];
-
 var SharePanel = {
  template: require('./share-panel.component.html'),
  controller: SharePanelController

www/gulpfile.js

@@ -7,8 +7,13 @@ var sourcemaps = require('gulp-sourcemaps');
 var stripDebug = require('gulp-strip-debug');
 var cssmin = require('gulp-cssmin');
 var inject = require('gulp-inject');
-var runSequence = require('run-sequence');
 var webpack = require('webpack-stream');
+var console = require('console');
+var bs = require('browser-sync');
+var source = require('vinyl-source-stream');
+var replace = require('gulp-replace');
+var ghPages = require('gulp-gh-pages');
+var git = require('git-rev-sync');
 
 var paths = {
  js: [
@@ -24,96 +29,160 @@ var paths = {
  './bower_components/office-ui-fabric/dist/css/fabric.components.min.css',
  './assets/css/*.css'
  ],
- assets: [
+ assets_dev: [
  './assets/**/*.png',
  './assets/**/*.mp3'
  ],
- templates: ['./**/*.tpl.html'],
+ assets_prod: [
+ './assets/**/*.png',
+ ],
+ publish_root_files: [
+ 'CNAME',
+ 'favicon.ico',
+ 'privacy.html'
+ ],
  buildjs: ['./build/**/*.js'],
  buildcss: ['./build/**/*.css']
 };
 
+var appConfig = {
+ dev: {
+
+ },
+ prod: {
+ "SERVER_API_URL": "http://fiapi.radiumz.org:2052/api",
+ "SERVER_AUDIO_URL": "http://idioms.mindong.asia/assets/audio/",
+ "CI_BUILD_NUMBER": process.env.TRAVIS_BUILD_NUMBER,
+ "CI_COMMIT_HASH": git.short(),
+ "CI_CURRENT_BRANCH": git.branch()
+ }
+};
+
+
 gulp.task('clean', function () {
- return del(['app/**/*.js', 'app/**/*.js.map','./build']);
+ return del(['app/**/*.js', 'app/**/*.js.map', './build']);
 });
 
-gulp.task('carrier', function () {
- return gulp.src(paths.assets)
+gulp.task('assets:dev', function () {
+ return gulp.src(paths.assets_dev)
  .pipe(gulp.dest('./build/assets'))
 });
 
-gulp.task('templateCache', function () {
- return gulp.src(paths.templates)
- .pipe(templateCache({module: 'app'}))
- .pipe(gulp.dest('./build'))
-});
+gulp.task('assets:prod', gulp.parallel(
+ () => gulp.src(paths.assets_prod)
+ .pipe(gulp.dest('./build/assets')),
+ () => gulp.src(paths.publish_root_files)
+ .pipe(gulp.dest('./build'))
+)
+);
+
 
-gulp.task('deployCSS', function() {
- return gulp.src(paths.css)
- .pipe(cssmin())
- .pipe(concat('bundle.css'))
- .pipe(gulp.dest('./build'));
+gulp.task('style:bundle', function () {
+  return gulp.src(paths.css)
+  .pipe(cssmin())
+  .pipe(concat('bundle.css'))
+  .pipe(gulp.dest('./build'));
 });
 
-gulp.task('js', function () {
+gulp.task('js:vendor', function () {
  return gulp.src(paths.js)
- .pipe(sourcemaps.init())
- .pipe(stripDebug())
- .pipe(uglify())
- .pipe(concat('all.min.js'))
- .pipe(sourcemaps.write())
- .pipe(gulp.dest('./build'));
+  .pipe(sourcemaps.init())
+  .pipe(stripDebug())
+  .pipe(uglify())
+  .pipe(concat('all.min.js'))
+  .pipe(sourcemaps.write())
+  .pipe(gulp.dest('./build'));
 });
 
 // Build Angular App files via Webpack
-gulp.task('js::webpack', function () {
- return gulp.src('app/app.js')
+gulp.task('js:webpack', function () {
+ return gulp.src('app/app.ts')
  .pipe(webpack(require('./webpack.config.js')))
  .pipe(gulp.dest('./build'));
 });
 
+gulp.task('js:webpack:prod', function () {
+ return gulp.src('app/app.ts')
+ .pipe(webpack(require('./webpack.config.js')))
+ .pipe(replace(
+ /\/\*\* inject:(\w+) \*\*\/(.*)\/\*\* endinject \*\*\//g,
+ function (match, configKey, p2, offset, string) { {
+ console.log(configKey,p2,offset);
+ return '"'+appConfig.prod[configKey]+'"';
+ }
+ }))
+ // .pipe(uglify())
+ .pipe(gulp.dest('./build'));
+});
+
+
 gulp.task('inject', function () {
- return gulp.src('./index.html')
- .pipe(inject(gulp.src(paths.buildjs, {read: false}), {relative: true, ignorePath: 'build'}))
- .pipe(inject(gulp.src(paths.buildcss, {read: false}), {relative: true, ignorePath: 'build'}))
- .pipe(gulp.dest('./build'));
+  return gulp.src('./index.html')
+  .pipe(inject(gulp.src(paths.buildjs, { read: false }), { relative: true, ignorePath: 'build' }))
+  .pipe(inject(gulp.src(paths.buildcss, { read: false }), { relative: true, ignorePath: 'build' }))
+  .pipe(gulp.dest('./build'));
 });
 
-gulp.task('build::dev', function (callback) {
- runSequence(
+gulp.task('build:dev',
+ gulp.series(
  'clean',
- 'templateCache',
- 'js',
- 'js::webpack',
- 'deployCSS',
- 'carrier',
- 'inject',
- callback
- );
+ gulp.parallel('js:vendor', 'js:webpack', 'style:bundle', 'assets:dev'),
+ 'inject'
+ )
+);
+
+gulp.task('build:prod',
+ gulp.series(
+ 'clean',
+ gulp.parallel('js:vendor', 'js:webpack:prod', 'style:bundle', 'assets:prod'),
+ 'inject'
+ )
+);
+
+gulp.task('deploy', function() {
+ return gulp.src('./build/**/*')
+ .pipe(ghPages({
+ branch: 'master',
+ remoteUrl: 'https://github.com/MindongLab/foochow-idioms-web.git'
+ }));
 });
 
-gulp.task('serve::prod', function (){
- var bs = require('browser-sync').create();
+gulp.task('build:partial',
+ gulp.series(
+ gulp.parallel('js:webpack', 'style:bundle'),
+ 'inject'
+ )
+);
+
+gulp.task('serve:prod', gulp.series('build:prod', function () {
+ bs.create();
  bs.init({
  startPath: '/',
  server: {
- baseDir: './'
+ baseDir: './build'
  }
  });
-})
-
+}));
 
-gulp.task('serve::dev', ['build::dev'], function (){
- var bs = require('browser-sync').create();
+gulp.task('serve:dev', gulp.series('build:dev', function () {
+ bs.create();
+ gulp.watch(["app/**/*.ts",
+ "app/**/*.html"],
+ gulp.series('build:partial',
+ function (done) {
+ bs.reload();
+ done();
+ })
+ );
  bs.init({
  startPath: '/',
  server: {
  baseDir: './build',
  routes: {
  '/assets': './assets', // dev only: serve audio files locally
-  // we need this route because `assets` is not copied to the `build` folder
- '/favicon.ico': './favicon.ico' 
+ // we need this route because `assets` is not copied to the `build` folder
+ '/favicon.ico': './favicon.ico'
  }
  }
  });
-})
+}));