Merge branch 'AD-432-put-onion-online'

Conflicts: gulpfile.js package.json
2024-12-22 17:33:14 +01:00 · 2015-06-08 18:00:17 +02:00 · 2015-06-08 18:00:17 +02:00 · f732cec523
commit f732cec523
parent b49f3fe9f2 38a476f7e8
8 changed files with 104 additions and 46 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -18,6 +18,11 @@ var concat = require('gulp-concat');
 var _ = require('lodash');
 var eslint = require('gulp-eslint');
 var jest = require('jest-cli');
+var argv = require('yargs').argv;
+var server = require('./server.js').app;
+var minifyCss = require('gulp-minify-css');
+var uglify = require('gulp-uglify');
+

 var config = {
    bootstrapDir: './node_modules/bootstrap-sass',
@ -41,11 +46,14 @@ var config = {
    }
 };

-gulp.task('build', function() {
+gulp.task('build', ['js:build', 'sass:build', 'copy'], function() {
+});
+
+gulp.task('js:build', function() {
    bundle(false);
 });

-gulp.task('serve', ['browser-sync', 'lint:watch', 'sass', 'sass:watch', 'copy'], function() {
+gulp.task('serve', ['browser-sync', 'run-server', 'lint:watch', 'sass:build', 'sass:watch', 'copy'], function() {
    bundle(true);
 });

@ -59,27 +67,30 @@ gulp.task('jest:watch', function(done) {
    gulp.watch([ config.jestOptions.rootDir + "/**/*.js" ], [ 'jest' ]);
 });

+gulp.task('run-server', function() {
+    server.listen(4000);
+});
+
 gulp.task('browser-sync', function() {
    browserSync({
-        server: {
-            baseDir: '.'
-        },
-        port: process.env.PORT || 3000
+        files: ['build/css/*.css', 'build/js/*.js'],
+        proxy: 'http://localhost:4000',
+        port: 3000
    });
 });

-gulp.task('sass', function () {
+gulp.task('sass:build', function () {
    gulp.src('./sass/**/main.scss')
-        .pipe(sourcemaps.init())
+        .pipe(gulpif(!argv.production, sourcemaps.init()))
        .pipe(sass({
            includePaths: [
                config.bootstrapDir + '/assets/stylesheets'
            ]
-        })
-        .on('error', sass.logError))
-        .pipe(sourcemaps.write('./maps'))
+        }).on('error', sass.logError))
+        .pipe(gulpif(!argv.production, sourcemaps.write('./maps')))
+        .pipe(gulpif(argv.production, minifyCss()))
        .pipe(gulp.dest('./build/css'))
-        .pipe(browserSync.stream());;
+        .pipe(browserSync.stream());
 });

 gulp.task('sass:watch', function () {
@ -87,13 +98,13 @@ gulp.task('sass:watch', function () {
 });

 gulp.task('copy', function () {
-    var files = [
+    var staticAssets = [
        './fonts/**/*',
        './img/**/*'
    ];

-    gulp.src(files, {base: './'})
-        .pipe(gulp.dest('build'));
+    gulp.src(staticAssets, {base: './'})
+        .pipe(gulp.dest('./build'));

    gulp.src(config.bootstrapDir + '/assets/fonts/**/*')
        .pipe(gulp.dest('./build/fonts'));
@ -117,6 +128,7 @@ gulp.task('lint:watch', function () {

 function bundle(watch) {
    var bro;
+
    if (watch) {
        bro = watchify(browserify('./js/app.js',
            // Assigning debug to have sourcemaps
@ -141,11 +153,12 @@ function bundle(watch) {
            .on('error', notify.onError('Error: <%= error.message %>'))
            .pipe(source('app.js'))
            .pipe(buffer())
-            .pipe(sourcemaps.init({
+            .pipe(gulpif(!argv.production, sourcemaps.init({
                loadMaps: true
-            })) // loads map from browserify file
-            .pipe(sourcemaps.write()) // writes .map file
-            .pipe(gulp.dest('./build'))
+            }))) // loads map from browserify file
+            .pipe(gulpif(!argv.production, sourcemaps.write())) // writes .map file
+            .pipe(gulpif(argv.production, uglify({mangle: false})))
+            .pipe(gulp.dest('./build/js'))
            .pipe(browserSync.stream());
    }

--- a/index.html
+++ b/index.html
@ -6,11 +6,11 @@
        <title>ascribe</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
-        <link rel="stylesheet" href="build/css/main.css">
+        <link rel="stylesheet" href="/static/css/main.css">
    </head>
    <body>
        <div id="main" class="container"></div>
        <div id="modal" class="container"></div>
-        <script src="build/app.js"></script>
+        <script src="/static/js/app.js"></script>
    </body>
 </html>
--- a/js/app.js
+++ b/js/app.js
@ -26,7 +26,7 @@ fetch.defaults({
    }
 });

-Router.run(routes, Router.HashLocation, (AscribeApp) => {
+Router.run(routes, Router.HistoryLocation, (AscribeApp) => {
    React.render(
        <AscribeApp />,
        document.getElementById('main')
--- a/js/components/ascribe_media/media_player.js
+++ b/js/components/ascribe_media/media_player.js
@ -46,8 +46,8 @@ let Image = React.createClass({
        this.inject('http://code.jquery.com/jquery-2.1.4.min.js')
            .then(() =>
                Promise.all([
-                    this.inject('node_modules/shmui/shmui.css'),
-                    this.inject('node_modules/shmui/jquery.shmui.js')
+                    this.inject('/static/thirdparty/shmui/shmui.css'),
+                    this.inject('/static/thirdparty/shmui/jquery.shmui.js')
                ]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
    },

--- a/js/components/header.js
+++ b/js/components/header.js
@ -38,7 +38,7 @@ let Header = React.createClass({
        return (
            <Navbar>
                <Nav>
-                    <a className="navbar-brand" href="#">
+                    <a className="navbar-brand" href="/">
                        <span>ascribe </span>
                        <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
                    </a>
--- a/package.json
+++ b/package.json
@ -3,47 +3,71 @@
  "version": "0.0.1",
  "description": "Das neue web client for Ascribe",
  "main": "js/app.js",
+  "engines": {
+    "node": "0.10.x"
+  },
+  "scripts": {
+    "lint": "eslint ./js",
+    "postinstall": "npm run build",
+    "build": "gulp build --production",
+    "start": "node server.js"
+  },
  "author": "Ascribe",
  "license": "Copyright",
  "private": true,
  "devDependencies": {
    "babel-eslint": "^3.1.11",
    "babel-jest": "^5.2.0",
+    "jest-cli": "^0.4.0"
+  },
+  "dependencies": {
+    "alt": "^0.16.5",
    "babelify": "^6.1.2",
    "bootstrap-sass": "^3.3.4",
-    "browser-sync": "^2.7.5",
    "browserify": "^9.0.8",
+    "browser-sync": "^2.7.5",
+    "classnames": "^1.2.2",
+    "compression": "^1.4.4",
    "envify": "^3.4.0",
+    "es6-promise": "^2.1.1",
    "eslint": "^0.22.1",
    "eslint-plugin-react": "^2.5.0",
+    "express": "^4.12.4",
    "gulp": "^3.8.11",
    "gulp-concat": "^2.5.2",
    "gulp-eslint": "^0.13.2",
    "gulp-if": "^1.2.5",
+    "gulp-minify-css": "^1.1.6",
    "gulp-notify": "^2.2.0",
    "gulp-sass": "^2.0.1",
    "gulp-sourcemaps": "^1.5.2",
+    "gulp-uglify": "^1.2.0",
    "gulp-util": "^3.0.4",
    "harmonize": "^1.4.2",
+    "isomorphic-fetch": "^2.0.2",
    "jest-cli": "^0.4.0",
    "lodash": "^3.9.3",
-    "react-textarea-autosize": "^2.2.3",
-    "reactify": "^1.1.0",
-    "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.1.2"
-  },
-  "dependencies": {
-    "alt": "^0.16.5",
-    "classnames": "^1.2.2",
-    "es6-promise": "^2.1.1",
-    "isomorphic-fetch": "^2.0.2",
    "object-assign": "^2.0.0",
    "react": "^0.13.2",
    "react-bootstrap": "~0.22.6",
    "react-datepicker": "~0.8.0",
+    "reactify": "^1.1.0",
    "react-router": "^0.13.3",
+    "react-textarea-autosize": "^2.2.3",
    "shmui": "^0.1.0",
-    "uglifyjs": "^2.4.10"
+    "uglifyjs": "^2.4.10",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.1.2",
+    "yargs": "^3.10.0"
+  },
+  "jest": {
+    "scriptPreprocessor": "node_modules/babel-jest",
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/react",
+      "<rootDir>/node_modules/alt",
+      "<rootDir>/js/alt.js"
+    ]
  }
 }
+
--- a/sass/ascribe-fonts/ascribe-fonts.scss
+++ b/sass/ascribe-fonts/ascribe-fonts.scss
@ -1,10 +1,10 @@
    @font-face {
        font-family: 'ascribe';
-        src:url('../../fonts/ascribe.eot?-oi6ttk');
-        src:url('../../fonts/ascribe.eot?#iefix-oi6ttk') format('embedded-opentype'),
-            url('../../fonts/ascribe.woff?-oi6ttk') format('woff'),
-            url('../../fonts/ascribe.ttf?-oi6ttk') format('truetype'),
-            url('../../fonts/ascribe.svg?-oi6ttk#ascribe') format('svg');
+        src:url('/static/fonts/ascribe.eot?-oi6ttk');
+        src:url('/static/fonts/ascribe.eot?#iefix-oi6ttk') format('embedded-opentype'),
+            url('/static/fonts/ascribe.woff?-oi6ttk') format('woff'),
+            url('/static/fonts/ascribe.ttf?-oi6ttk') format('truetype'),
+            url('/static/fonts/ascribe.svg?-oi6ttk#ascribe') format('svg');
        font-weight: normal;
        font-style: normal;
    }
--- a/server.js
+++ b/server.js
@ -0,0 +1,21 @@
+var express = require('express');
+var compression = require('compression')
+
+var app = express();
+
+app.use(compression());
+
+app.use('/static/js', express.static(__dirname + '/build/js'));
+app.use('/static/css', express.static(__dirname + '/build/css'));
+app.use('/static/fonts', express.static(__dirname + '/build/fonts'));
+app.use('/static/thirdparty/', express.static(__dirname + '/node_modules'));
+
+app.get(/.*/, function(req, res) {
+    res.sendFile(__dirname + '/index.html');
+});
+
+if (require.main === module) {
+    app.listen(process.env.PORT || 4000);
+}
+
+module.exports.app = app;