Fix #1623 #1637: Fix gulp tasks and npm installation issue (#1645)

README.md

@@ -117,19 +117,12 @@ You can also use Docker Compose to run all the components of EvalAI together. Th
     ```
 
 
-8. Open a new terminal window with node(6.9.2) and ruby(gem) installed on your machine and type
-
+8. Please make sure that node(`>=7.x.x`), npm(`>=5.x.x`) and bower(`>=1.8.x`) are installed globally on your machine.
+    Install npm and bower dependencies by running
     ```
     npm install
-    ``` 
-    Install bower(1.8.0) globally by running:
-    ```
-    npm install -g bower
-    ```
-    Now install the bower dependencies by running:
-    ```
     bower install
-    ```
+    ``` 
     If you running npm install behind a proxy server, use
     ```
     npm config set proxy http://proxy:port

docs/source/setup.md

@@ -96,7 +96,7 @@ psql -U postgres -c "ALTER USER postgres PASSWORD 'postgres';"
 python manage.py migrate
 ```
 
-* For setting up frontend, run
+* For setting up frontend, please make sure that node(`>=7.x.x`), npm(`>=5.x.x`) and bower(`>=1.8.x`) are installed globally on your machine. Install npm and bower dependencies by running
 
 ```shell
 npm install
@@ -208,12 +208,11 @@ psql -U postgres -c "ALTER USER postgres PASSWORD 'postgres';"
 python manage.py migrate
 ```
 
-* For setting up frontend, run
+* For setting up frontend, please make sure that node(`>=7.x.x`), npm(`>=5.x.x`) and bower(`>=1.8.x`) are installed globally on your machine. Install npm and bower dependencies by running
 
 ```shell
-curl -sL https://rpm.nodesource.com/setup_6.x | sudo -E bash -
-sudo yum install nodejs
-npm install -g bower
+npm install
+bower install
 ```
 
 ### Step 4: Start the development environment
@@ -325,7 +324,7 @@ Follow this guide to setup your development machine.
     ```
 
 
-* Open a new cmd window with node(6.9.2) and ruby(gem) installed on your machine and type
+* Open a new cmd window with node>=(7.0.0) installed on your machine and type
 
     ```
     npm install

gulpfile.js

@@ -5,9 +5,11 @@ var gulp = require('gulp'),
     runSequence = require('run-sequence'),
     debug = require('gulp-debug'),
     merge = require('merge-stream'),
-    sass = require('gulp-ruby-sass'),
-    autoprefixer = require('gulp-autoprefixer'),
-    cssnano = require('gulp-cssnano'),
+    sass = require('gulp-sass'),
+    postcss = require('gulp-postcss'),
+    sourcemaps = require('gulp-sourcemaps'),
+    autoprefixer = require('autoprefixer'),
+    cleanCSS = require('gulp-clean-css'),
     eslint = require('gulp-eslint'),
     angularPlugin = require('eslint-plugin-angular'),
     gulp_if = require('gulp-if'),
@@ -94,11 +96,14 @@ gulp.task('vendorcss', function() {
 
 // minify and compress CSS files
 gulp.task('css', function() {
-    return sass('frontend/src/css/main.scss', { style: 'expanded' })
+    return gulp.src('frontend/src/css/main.scss')
         .pipe(prettyError())
-        .pipe(autoprefixer('last 2 version'))
+        .pipe(sass().on('error', sass.logError))
+        .pipe(sourcemaps.init())
+        .pipe(postcss([autoprefixer()]))
+        .pipe(gulp_if(flags.production, cleanCSS()))
         .pipe(gulp_if(flags.production, rename({ suffix: '.min' })))
-        .pipe(gulp_if(flags.production, cssnano()))
+        .pipe(sourcemaps.write())
         .pipe(gulp.dest('frontend/dist/css'));
 })
 
@@ -131,7 +136,7 @@ gulp.task('js', function() {
         .pipe(concat('directives.js'))
         .pipe(gulp_if(flags.production, rename({ suffix: '.min' })))
         .pipe(gulp_if(flags.production, uglify({ mangle: false })))
-        .pipe(gulp.dest('frontend/dist/js'));
+        .pipe(gulp.dest('frontend/dist/js'))
 
     var filters = gulp.src('frontend/src/js/filters/*.js')
         .pipe(prettyError())
@@ -161,7 +166,17 @@ gulp.task('html', function() {
 // for image compression
 gulp.task('images', function() {
     return gulp.src('frontend/src/images/**/*')
-        .pipe(gulp_if(flags.production, imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
+        .pipe(imagemin([
+            imagemin.gifsicle({ interlaced: true }),
+            imagemin.jpegtran({ progressive: true }),
+            imagemin.optipng({ optimizationLevel: 5 }),
+            imagemin.svgo({
+                plugins: [
+                    { removeViewBox: true },
+                    { cleanupIDs: false }
+                ]
+            })
+        ]))
         .pipe(gulp.dest('frontend/dist/images'));
 });
 
@@ -246,7 +261,7 @@ gulp.task('lint', [], function() {
             var countWarning = results.warningCount;
             if (countError === 0) {
                 gulp.start('connect');
-                if(countWarning > 0) {
+                if (countWarning > 0) {
                     console.warn("Please remove lint warnings in production env.");
                 }
             } else {
@@ -346,20 +361,20 @@ gulp.task('watch', function() {
 /**
  * Run test once and exit
  */
-gulp.task('test', function (done) {
-  new Server({
-    configFile: __dirname + '/karma.conf.js',
-    singleRun: true
-  }, done).start();
+gulp.task('test', function(done) {
+    new Server({
+        configFile: __dirname + '/karma.conf.js',
+        singleRun: true
+    }, done).start();
 });
 
 /**
  * Watch for file changes and re-run tests on each change
  */
-gulp.task('test:watch', function (done) {
-  new Server({
-    configFile: __dirname + '/karma.conf.js'
-  }, done).start();
+gulp.task('test:watch', function(done) {
+    new Server({
+        configFile: __dirname + '/karma.conf.js'
+    }, done).start();
 });
 
 
@@ -406,4 +421,4 @@ gulp.task('prod', function(callback) {
 // Runserver for development
 gulp.task('dev:runserver', function(callback) {
     runSequence('dev', 'connect', 'watch', 'test:watch', callback);
-});
+});

package.json

@@ -9,12 +9,15 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "angular-mocks": "^1.6.1",
+    "autoprefixer": "^8.2.0",
+    "chai": "^4.1.2",
     "del": "^3.0.0",
     "eslint": "^4.19.1",
     "eslint-config-angular": "^0.5.0",
     "eslint-plugin-angular": "^3.3.0",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^5.0.0",
+    "gulp-clean-css": "^3.9.3",
     "gulp-concat": "^2.6.0",
     "gulp-connect": "^5.0.0",
     "gulp-cssnano": "^2.1.2",
@@ -23,18 +26,19 @@
     "gulp-html-minifier": "^0.1.8",
     "gulp-imagemin": "^4.1.0",
     "gulp-livereload": "^3.8.1",
+    "gulp-postcss": "^7.0.1",
     "gulp-prettyerror": "^1.1.1",
     "gulp-rename": "^1.2.2",
     "gulp-ruby-sass": "^3.0.0",
+    "gulp-sass": "^4.0.1",
+    "gulp-sourcemaps": "^2.6.4",
     "gulp-uglify": "^3.0.0",
     "karma": "^2.0.0",
-    "merge-stream": "^1.0.0",
-    "angular-mocks": "^1.6.1",
-    "chai": "^4.1.2",
     "karma-chai": "^0.1.0",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.2",
     "karma-phantomjs-launcher": "^1.0.4",
+    "merge-stream": "^1.0.0",
     "mocha": "^5.0.5"
   },
   "dependencies": {