migrate js build system to gulp

.travis.yml

@@ -61,18 +61,19 @@ before_script:
     - cd apps/news/js
     # install test deps
     - npm install --deps # npm install needs to run before sudo npm install because otherwise it fails because a tmp file exists in the home dir
-    - sudo npm -g install grunt-cli protractor
+    - sudo npm -g install gulp-cli protractor
+    - cd ..
     - wget https://scrutinizer-ci.com/ocular.phar
 
 script:
     # unit tests
-    - grunt php-unit
+    - phpunit
     - php ocular.phar code-coverage:upload --format=php-clover ../coverage.clover
-    - grunt js-unit
-    # integration tests
-    - grunt php-integration
+    - phpunit -c phpunit.integration.xml
+    - cd js
+    - gulp karma
     # acceptance tests
-    - webdriver-manager update
+    # - webdriver-manager update
     - sudo chown -R www-data:www-data ../../../data
     - sudo chmod -R a+rwx ../../../data
     #- grunt acceptance --verbose

db/newsmapper.php

@@ -69,4 +69,4 @@ abstract class NewsMapper extends Mapper {
         return $this->findEntities($sql, $search, $limit, $offset);
     }
 
-}
+}

js/.jshintignore

@@ -0,0 +1,3 @@
+build/
+node_modules/
+vendor/

js/.jshintrc

@@ -47,6 +47,7 @@
         "News": true,
         "t": true,
         "url": true,
-        "navigator": true
+        "navigator": true,
+        "oc_requesttoken": true
     }
 }

js/Gruntfile.js

@@ -1,241 +0,0 @@
-/**
- * ownCloud - News
- *
- * This file is licensed under the Affero General Public License version 3 or
- * later. See the COPYING file.
- *
- * @author Bernhard Posselt <dev@bernhard-posselt.com>
- * @copyright Bernhard Posselt 2012, 2014
- */
-module.exports = function (grunt) {
-    'use strict';
-
-    // load needed modules
-    grunt.loadNpmTasks('grunt-php');
-    grunt.loadNpmTasks('grunt-contrib-concat');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-contrib-connect');
-    grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-contrib-cssmin');
-    grunt.loadNpmTasks('grunt-phpunit');
-    grunt.loadNpmTasks('grunt-wrap');
-    grunt.loadNpmTasks('grunt-karma');
-    grunt.loadNpmTasks('grunt-ng-annotate');
-    grunt.loadNpmTasks('grunt-protractor-runner');
-    grunt.loadNpmTasks('grunt-protractor-webdriver');
-
-    grunt.initConfig({
-        meta: {
-            pkg: grunt.file.readJSON('package.json'),
-            version: '<%= meta.pkg.version %>',
-            production: 'build/'
-        },
-        concat: {
-            options: {
-                // remove license headers
-                stripBanners: true
-            },
-            dist: {
-                src: [
-                    'app/App.js',
-                    'app/Config.js',
-                    'app/Run.js',
-                    'controller/**/*.js',
-                    'filter/**/*.js',
-                    'service/**/*.js',
-                    'gui/**/*.js',
-                    'plugin/**/*.js',
-                    'utility/**/*.js',
-                    'directive/**/*.js'
-                ],
-                dest: '<%= meta.production %>app.js'
-            }
-        },
-        ngAnnotate: {
-            app: {
-                src: ['<%= meta.production %>app.js'],
-                dest: '<%= meta.production %>app.js'
-            }
-        },
-        uglify: {
-            app: {
-                files: {
-                    '<%= meta.production %>app.min.js': [
-                        '<%= meta.production %>app.js'
-                    ]
-                }
-            },
-            options: {
-                sourceMap: true
-            }
-        },
-        cssmin: {
-            options: {
-                sourceMap: true
-            },
-            news: {
-                files: {
-                    '../css/news.min.css': [
-                        '../css/app.css',
-                        '../css/content.css',
-                        '../css/custom.css',
-                        '../css/shortcuts.css',
-                        '../css/mobile.css',
-                        '../css/navigation.css',
-                        '../css/settings.css',
-                        '../css/explore.css'
-                    ]
-                }
-            }
-        },
-        wrap: {
-            basic: {
-                src: ['<%= meta.production %>app.js'],
-                dest: '<%= meta.production %>app.js',
-                options: {
-                    wrapper: [
-                        '(function(navigator, window, document, angular, $, ' +
-                        'OC, csrfToken, url, undefined){' +
-                        '\n\n\'use strict\';\n\n',
-
-                        '\n})(navigator, window, document, angular, jQuery, ' +
-                        ' OC, oc_requesttoken, url);'
-                    ]
-                }
-            }
-        },
-        jshint: {
-            app: {
-                src: [
-                    'Gruntfile.js',
-                    'app/App.js',
-                    'app/Config.js',
-                    'app/Run.js',
-                    'filter/**/*.js',
-                    'service/**/*.js',
-                    'controller/**/*.js',
-                    'directive/**/*.js',
-                    'tests/**/*.js',
-                    'gui/**/*.js',
-                    'plugin/**/*.js',
-                    'admin/**/*.js'
-                ]
-            },
-            options: {
-                jshintrc: true
-            }
-        },
-        watch: {
-            concat: {
-                files: [
-                    '../css/*.css',
-                    '!../css/*.min.css',
-                    'admin/**/*.js',
-                    'tests/**/*.js',
-                    'app/**/*.js',
-                    'controller/**/*.js',
-                    'utility/**/*.js',
-                    'directive/**/*.js',
-                    'filter/**/*.js',
-                    'service/**/*.js',
-                    'gui/**/*.js',
-                    'plugin/**/*.js',
-                    '../templates/**/*.php'
-                ],
-                tasks: ['default'],
-                options: {
-                    livereload: true
-                }
-            },
-            phpunit: {
-                files: [
-                    '../**/*.php'
-                ],
-                tasks: ['phpunit:unit']
-            },
-            phpintegration: {
-                files: [
-                    '../**/*.php'
-                ],
-                tasks: ['phpunit:integration']
-            }
-        },
-        karma: {
-            unit: {
-                configFile: 'karma.conf.js',
-                autoWatch: true
-            },
-            continuous: {
-                configFile: 'karma.conf.js',
-                browsers: ['Firefox'],
-                singleRun: true,
-            }
-        },
-        phpunit: {
-            unit: {
-                options: {
-                    colors: true,
-                    configuration: '../phpunit.xml'
-                }
-            },
-            coverage: {
-                options: {
-                    colors: true,
-                    configuration: '../phpunit.xml',
-                    coverageClover: '../coverage.clover'
-                }
-            },
-            integration: {
-                options: {
-                    colors: true,
-                    configuration: '../phpunit.integration.xml'
-                }
-            },
-        },
-        /* jshint camelcase: false */
-        protractor_webdriver: {
-            app: {}
-        },
-        protractor: {
-            firefox: {
-                options: {
-                    configFile: 'protractor.conf.js'
-                }
-            },
-        },
-        connect: {
-            server: {
-                options: {
-                    base: 'tests/static/'
-                }
-            }
-        },
-        php: {
-            dist: {
-                options: {
-                    port: 8080,
-                    keepalive: true,
-                    open: true,
-                    base: '../../../'
-                }
-            }
-        }
-    });
-
-    // make tasks available under simpler commands
-    grunt.registerTask('default', ['jshint', 'concat',  'wrap', 'ngAnnotate',
-                                   'uglify', 'cssmin']);
-    grunt.registerTask('dev', ['watch:concat']);
-    grunt.registerTask('dev-js-unit', ['karma:unit']);
-    grunt.registerTask('dev-php-unit', ['watch:phpunit']);
-    grunt.registerTask('dev-php-integration', ['watch:phpintegration']);
-
-    grunt.registerTask('js-unit', ['karma:continuous']);
-    grunt.registerTask('php-unit', ['phpunit:coverage']);
-    grunt.registerTask('php-integration', ['phpunit:integration']);
-
-    grunt.registerTask('acceptance', ['protractor_webdriver', 'connect',
-                                      'protractor']);
-
-};

js/README.md

@@ -1,40 +1,17 @@
-# JavaScript && CSS Development
-Before starting, install nodejs and grunt-cli:
+# JavaScript
+Before starting, install nodejs and gulp-cli:
 
-	sudo npm -g install grunt-cli
+	sudo npm -g install gulp-cli
 
 then run:
 
 	npm install
 
+## Tasks
+The following tasks are available:
 
-## Building
-This sets up a watcher on file change and compiles CSS and JS:
-
-	grunt dev
-
-If you don't want a watcher, just run:
-
-	grunt
-
-## Testing
-Watch mode:
-
-	grunt php
-	grunt test
-
-Single run mode:
-
-	grunt phpunit
-	grunt ci-unit
-
-### Running e2e tests
-Install protractor and set up selenium:
-
-	sudo npm install -g protractor
-	sudo webdriver-manager update
-
-then the tests can be started with:
-
-	grunt e2e
-
+* **Build the JavaScript**: gulp
+* **Watch for changes and build JavaScript**: gulp watch
+* **Run JavaScript unit tests**: gulp karma
+* **Watch for changes and run JavaScript unit tests**: gulp watch-karma
+* **Watch for changes and run PHP unit tests**: gulp watch-phpuni

js/app/App.js

@@ -9,4 +9,4 @@
  */
 
 /* jshint unused: false */
-var app = angular.module('News', ['ngRoute', 'ngSanitize', 'ngAnimate']);
+var app = angular.module('News', ['ngRoute', 'ngSanitize', 'ngAnimate']);

js/app/Config.js

@@ -37,7 +37,8 @@ app.config(function ($routeProvider, $provide, $httpProvider) {
                     $window.location.href.split($window.location.pathname)[0];
                 if (config.url.indexOf(BASE_URL) === 0 ||
                     config.url.indexOf(domain) === 0) {
-                    config.headers.requesttoken = csrfToken;
+                    /*jshint camelcase: false */
+                    config.headers.requesttoken = oc_requesttoken;
                 }
 
                 return config || $q.when(config);

js/controller/AppController.js

@@ -20,4 +20,4 @@ function (Loading, FeedResource, FolderResource) {
     this.play = function (item) {
         this.playingItem = item;
     };
-});
+});

js/gui/ExternSubscription.js

@@ -33,7 +33,7 @@
         };
 
         if (navigator.registerContentHandler && !isRegistered(mime, url)) {
-            navigator.registerContentHandler(mime, subscribeUrl, title);
+            navigator.registerContentHandler(mime, url, title);
             if (!registered) {
                 storage.setItem('registeredHandler', url);
             }

js/gulpfile.js

@@ -0,0 +1,93 @@
+/**
+ * ownCloud - News
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ *
+ * @author Bernhard Posselt <dev@bernhard-posselt.com>
+ * @copyright Bernhard Posselt 2012, 2014
+ */
+
+'use strict';
+
+let gulp = require('gulp'),
+    ngAnnotate = require('gulp-ng-annotate'),
+    uglify = require('gulp-uglify'),
+    jshint = require('gulp-jshint'),
+    KarmaServer = require('karma').Server,
+    phpunit = require('gulp-phpunit'),
+    concat = require('gulp-concat'),
+    sourcemaps = require('gulp-sourcemaps');
+
+/**
+ * Configuration
+ */
+let phpunitConfig = __dirname + '/../phpunit.xml';
+let karmaConfig = __dirname + '/karma.conf.js';
+let destinationFolder = __dirname + '/build/';
+let sources = [
+    'app/App.js', 'app/Config.js', 'app/Run.js',
+    'controller/**/*.js',
+    'filter/**/*.js',
+    'service/**/*.js',
+    'gui/**/*.js',
+    'plugin/**/*.js',
+    'utility/**/*.js',
+    'directive/**/*.js'
+];
+
+let testSources = [
+    'tests/**/*.js'
+];
+
+let phpSources = [
+    '../*/**.php',
+    '!../js/*/**',
+    '!../vendor/*/**'
+];
+
+gulp.task('default', ['lint'], () => {
+    return gulp.src(sources)
+        .pipe(ngAnnotate())
+        .pipe(sourcemaps.init())
+        .pipe(concat('app.min.js'))
+        .pipe(uglify())
+        .pipe(sourcemaps.write())
+        .pipe(gulp.dest(destinationFolder));
+});
+
+gulp.task('lint', () => {
+    return gulp.src('*/**.js')
+        .pipe(jshint())
+        .pipe(jshint.reporter('jshint-stylish'))
+        .pipe(jshint.reporter('fail'));
+});
+
+gulp.task('watch', () => {
+    gulp.watch(sources.concat(testSources).concat('*.js'), ['default']);
+});
+
+gulp.task('karma', (done) => {
+    new KarmaServer({
+        configFile: karmaConfig,
+        singleRun: true
+    }, done).start();
+})
+
+gulp.task('watch-karma', (done) => {
+    new KarmaServer({
+        configFile: karmaConfig,
+        autoWatch: true
+    }, done).start();
+})
+
+gulp.task('phpunit', () => {
+    gulp.src(phpSources)
+        .pipe(phpunit('phpunit', {
+            configurationFile: phpunitConfig
+        }));
+});
+
+gulp.task('watch-phpunit', () => {
+    gulp.watch(phpSources, ['phpunit']);
+});

js/karma.conf.js

@@ -10,15 +10,10 @@ module.exports = function (config) {
         // (eg. files, exclude)
         basePath: '',
 
-
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
         frameworks: ['jasmine'],
 
-        preprocessors: {
-            'build/app.js': ['coverage']
-        },
-
         // list of files / patterns to load in the browser
         files: [
             'vendor/js-url/url.min.js',

js/package.json

@@ -24,21 +24,15 @@
   },
   "homepage": "https://github.com/owncloud/news",
   "devDependencies": {
-    "grunt": "^0.4.5",
-    "grunt-cachebuster": "^0.1.5",
-    "grunt-contrib-concat": "^0.5.1",
-    "grunt-contrib-connect": "^0.11.2",
-    "grunt-contrib-cssmin": "^0.14.0",
-    "grunt-contrib-jshint": "^0.12.0",
-    "grunt-contrib-uglify": "^0.11.0",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-karma": "^0.12.1",
-    "grunt-ng-annotate": "^1.0.1",
-    "grunt-php": "^1.5.1",
-    "grunt-phpunit": "^0.3.6",
-    "grunt-protractor-runner": "^3.0.0",
-    "grunt-protractor-webdriver": "^0.2.5",
-    "grunt-wrap": "^0.3.0",
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.0",
+    "gulp-jshint": "^2.0.0",
+    "gulp-ng-annotate": "^1.1.0",
+    "gulp-phpunit": "^0.12.1",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.2",
+    "jshint": "^2.9.1",
+    "jshint-stylish": "^2.1.0",
     "karma": "^0.13.19",
     "karma-chrome-launcher": "^0.2.2",
     "karma-coverage": "^0.5.3",

js/tests/unit/controller/AppControllerSpec.js

@@ -53,4 +53,4 @@ describe('AppController', function () {
         expect(location.path).not.toHaveBeenCalled();
     }));
 
-});
+});

phpunit.integration.xml

@@ -1,4 +1,4 @@
-<phpunit bootstrap="tests/bootstrap.php">
+<phpunit bootstrap="tests/bootstrap.php" colors="true">
 <testsuites>
     <testsuite name="integration">
         <directory>./tests/integration</directory>

phpunit.xml

@@ -1,4 +1,4 @@
-<phpunit bootstrap="tests/bootstrap.php">
+<phpunit bootstrap="tests/bootstrap.php" colors="true">
 <testsuites>
     <testsuite name="unit">
         <directory>./tests/unit</directory>

templates/index.php

@@ -13,7 +13,16 @@ script('news', [
     'build/app.min',
 ]);
 
-style('news', 'news.min');
+style('news', [
+    'app',
+    'content',
+    'custom',
+    'explore',
+    'mobile',
+    'navigation',
+    'settings',
+    'shortcuts'
+]);
 
 // load plugin scripts and styles
 foreach (Plugin::getStyles() as $appName => $fileName) {