Feat/node upgrade (#445)

* Added nvmrc and stop ignoring package lock

* Updating gulpfile to gulp 4 style

* Problem with webpack.

* fix: webpack config issue broken due to upgrade and some breaking changes

* fix: issue with nodejs version

* fix: don't install npm

* fix: install essential deps to build canvas

* fix: exclude gulpfile.js for now, since we need to a full overhaul to port everything to modern

* fix: issues with failing tests

* fix: change the gulp command name in Dockerfile

Co-authored-by: Mark Walker <[email protected]>

Author: vinitkumar

.gitignore

@@ -23,7 +23,6 @@ env/
 .sass-cache
 *.css.map
 npm-debug.log
-package-lock.json
 
 local.sqlite
 testdb.sqlite*

.nvmrc

@@ -0,0 +1 @@
+16

Dockerfile

@@ -4,12 +4,12 @@ FROM python:3.8.12
 RUN apt-get update \
     && apt-get -y install libtiff5-dev libjpeg62-turbo-dev zlib1g-dev \
     libfreetype6-dev liblcms2-dev libwebp-dev tcl8.6-dev tk8.6-dev \
-    build-essential
+    build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
 
 # Node setup
-RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash -
-RUN apt-get install -y nodejs npm
-RUN npm install -g gulp@3
+RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
+RUN apt install -y nodejs
+RUN npm install -g gulp@4
 
 # Preparing files
 WORKDIR /app
@@ -20,6 +20,6 @@ COPY ./tests/requirements /app/tests/requirements
 
 RUN npm install
 
-CMD pip install -e . && gulp lint && gulp tests:integration
+CMD pip install -e . && gulp lint && gulp tests
 
 ENV TZ="Europe/Zurich"

Makefile

@@ -26,4 +26,4 @@ local:
 	make cleanup
 	pip install -r tests/requirements/django-$(VERSION).txt
 	pip install -e .
-	export SCREENSHOT_REFERENCES="./tests/screenshots/reference-$(VERSION)"; gulp lint && gulp tests:integration
+	export SCREENSHOT_REFERENCES="./tests/screenshots/reference-$(VERSION)"; gulp lint && gulp tests

djangocms_admin_style/static/djangocms_admin_style/fonts/django-admin-iconfont.eot

@@ -3,42 +3,44 @@
  * @copyright: http://www.divio.ch
  */
 /* eslint-disable no-console */
-
+/*jshint esversion: 6 */
 'use strict';
 
 // #############################################################################
 // #IMPORTS#
-var gulp = require('gulp');
-var autoprefixer = require('autoprefixer');
-var postcss = require('gulp-postcss');
-var gulpif = require('gulp-if');
-var sass = require('gulp-sass');
-var iconfont = require('gulp-iconfont');
-var iconfontCss = require('gulp-iconfont-css');
-var sourcemaps = require('gulp-sourcemaps');
-var minifyCss = require('gulp-minify-css');
-var eslint = require('gulp-eslint');
-var integrationTests = require('djangocms-casper-helpers/gulp');
-var webpack = require('webpack');
-var PluginError = require('plugin-error');
-
-var argv = require('minimist')(process.argv.slice(2));
+const gulp = require('gulp');
+const gutil = require('gulp-util');
+const autoprefixer = require('autoprefixer');
+const postcss = require('gulp-postcss');
+const browserSync = require('browser-sync').create();
+const gulpif = require('gulp-if');
+const iconfont = require('gulp-iconfont');
+const iconfontCss = require('gulp-iconfont-css');
+const log = require('fancy-log');
+const sass = require('gulp-sass')(require('sass'));
+const sourcemaps = require('gulp-sourcemaps');
+const minifyCss = require('gulp-clean-css');
+const eslint = require('gulp-eslint');
+const webpack = require('webpack');
+const integrationTests = require('djangocms-casper-helpers/gulp');
+
+const argv = require('minimist')(process.argv.slice(2)); // eslint-disable-line
 
 // #############################################################################
 // #SETTINGS#
-var options = {
+const options = {
     debug: argv.debug
 };
-var PROJECT_ROOT = __dirname;
-var PROJECT_PATH = {
+const PROJECT_ROOT = __dirname;
+const PROJECT_PATH = {
     sass: PROJECT_ROOT + '/djangocms_admin_style/sass',
     css: PROJECT_ROOT + '/djangocms_admin_style/static/djangocms_admin_style/css',
     js: PROJECT_ROOT + '/djangocms_admin_style/static/djangocms_admin_style/js',
     tests: PROJECT_ROOT + '/tests/frontend',
     icons: PROJECT_ROOT + '/djangocms_admin_style/static/djangocms_admin_style/fonts'
 };
 
-var PROJECT_PATTERNS = {
+const PROJECT_PATTERNS = {
     sass: [PROJECT_PATH.sass + '/**/*.{scss,sass}'],
     icons: [PROJECT_PATH.icons + '/src/*.svg'],
     js: [
@@ -47,11 +49,10 @@ var PROJECT_PATTERNS = {
         '!' + PROJECT_PATH.js + '/**/jquery.*.js',
         '!' + PROJECT_PATH.js + '/libs/**/*.js',
         '!' + PROJECT_PATH.js + '/dist/**/*.js',
-        'gulpfile.js'
     ]
 };
 
-var INTEGRATION_TESTS = [
+const INTEGRATION_TESTS = [
     [
         'loginAdmin',
         'dashboard',
@@ -62,12 +63,13 @@ var INTEGRATION_TESTS = [
 
 // #############################################################################
 // #TASKS#
-gulp.task('sass', function () {
-    gulp.src(PROJECT_PATTERNS.sass)
+const css = () => {
+    return (
+        gulp.src(PROJECT_PATTERNS.sass)
         .pipe(gulpif(options.debug, sourcemaps.init()))
         .pipe(sass())
         .on('error', function (error) {
-            console.log('Error (' + error.plugin + '): ' + error.messageFormatted);
+            log.error('Error (' + error.plugin + '): ' + error.messageFormatted);
         })
         .pipe(
             postcss([
@@ -82,11 +84,13 @@ gulp.task('sass', function () {
             })
         )
         .pipe(gulpif(options.debug, sourcemaps.write()))
-        .pipe(gulp.dest(PROJECT_PATH.css));
-});
+        .pipe(gulp.dest(PROJECT_PATH.css))
+    );
+};
 
-gulp.task('icons', function () {
-    gulp.src(PROJECT_PATTERNS.icons)
+const icons = () => {
+    return (
+        gulp.src(PROJECT_PATTERNS.icons)
         .pipe(
             iconfontCss({
                 fontName: 'django-admin-iconfont',
@@ -102,64 +106,72 @@ gulp.task('icons', function () {
             })
         )
         .on('glyphs', function (glyphs, opts) {
-            console.log(glyphs, opts);
+            log(glyphs, opts);
         })
-        .pipe(gulp.dest(PROJECT_PATH.icons));
-});
+        .pipe(gulp.dest(PROJECT_PATH.icons))
+    )
+};
+
+const lint = () => {
+    return (
+        gulp
+            .src(PROJECT_PATTERNS.js)
+            .pipe(eslint())
+            .pipe(eslint.format())
+            .pipe(eslint.failAfterError())
+    )
+};
 
-gulp.task('lint', ['lint:javascript']);
-gulp.task('lint:javascript', function () {
-    // DOCS: http://eslint.org
-    return gulp.src(PROJECT_PATTERNS.js).pipe(eslint()).pipe(eslint.format()).pipe(eslint.failAfterError());
-});
 
-var webpackBundle = function (opts) {
-    var webpackOptions = opts || {};
+const webpackBundle = function (opts) {
+    const webpackOptions = opts || {};
 
     webpackOptions.PROJECT_PATH = PROJECT_PATH;
     webpackOptions.debug = options.debug;
 
     return function (done) {
-        var config = require('./webpack.config')(webpackOptions);
+        const config = require('./webpack.config')(webpackOptions);
 
         webpack(config, function (err, stats) {
             if (err) {
                 throw new PluginError('webpack', err);
             }
-            console.log('[webpack]', stats.toString({ colors: true }));
+            log('[webpack]', stats.toString({ colors: true }));
             if (typeof done !== 'undefined' && (!opts || !opts.watch)) {
                 done();
             }
         });
     };
 };
 
-gulp.task('bundle:watch', webpackBundle({ watch: true }));
-gulp.task('bundle', webpackBundle());
-
 // #######################################
 // #TESTS#
-gulp.task('tests', ['tests:integration']);
 
-// gulp tests:integration [--clean] [--screenshots] [--tests=loginAdmin,toolbar]
-gulp.task(
-    'tests:integration',
+const testsIntegration = (done) => {
     integrationTests({
         tests: INTEGRATION_TESTS,
         pathToTests: PROJECT_PATH.tests,
         argv: argv,
         dbPath: 'testdb.sqlite',
         serverCommand: 'tests/settings-docker.py',
-        logger: console.log.bind(console)
-    })
-);
+        logger: gutil.log.bind(gutil),
+        waitForMigrations: 5 // seconds
+    });
+    done();
+};
+
 
 // #############################################################################
 // #COMMANDS#
-gulp.task('watch', function () {
-    gulp.start('bundle:watch');
-    gulp.watch(PROJECT_PATTERNS.sass, ['sass']);
-    gulp.watch(PROJECT_PATTERNS.js, ['lint']);
-});
+const watchFiles = () => {
+    browserSync.init();
+    gulp.watch(PROJECT_PATTERNS.sass, css);
+    gulp.watch(PROJECT_PATTERNS.js, lint);
+};
 
-gulp.task('default', ['sass', 'lint', 'watch']);
+gulp.task("sass", css);
+gulp.task("icons", icons);
+gulp.task("lint", lint);
+gulp.task('watch', gulp.parallel(watchFiles));
+gulp.task('tests', testsIntegration);
+gulp.task('bundle', webpackBundle());