diff --git a/.babelrc b/.babelrc deleted file mode 100644 index c13c5f627..000000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["es2015"] -} diff --git a/README.md b/README.md index 74ce65197..c9eeb68ae 100644 --- a/README.md +++ b/README.md @@ -22,19 +22,19 @@ Brew is a package manager for OSX. The following command installs brew: Languages needed - Python 3.4 -- [Node](https://nodejs.org/) 5.0.0 or greater -- [npm](https://www.npmjs.com/) 3.0.0 or greater +- [Node](https://nodejs.org/) 10.15.3 or greater +- [npm](https://www.npmjs.com/) 6.4.1 or greater ```shell brew install node ``` [NPM](npmjs.org) is Node's package management tool. `n` is a tool for managing -different versions of Node. The following installs `n` and uses the latest +different versions of Node. The following installs `n` and uses the long term support (LTS) version of Node. ```shell npm install -g n - n latest + n lts npm rebuild node-sass ``` diff --git a/app/assets/javascripts/updateContent.js b/app/assets/javascripts/updateContent.js index 516bd913f..eb94f33eb 100644 --- a/app/assets/javascripts/updateContent.js +++ b/app/assets/javascripts/updateContent.js @@ -2,7 +2,7 @@ "use strict"; var queues = {}; - var dd = new diffDOM(); + var dd = new diffDOM.DiffDOM(); var getRenderer = $component => response => dd.apply( $component.get(0), diff --git a/app/assets/stylesheets/_url-helpers.scss b/app/assets/stylesheets/_url-helpers.scss new file mode 100644 index 000000000..9643d295a --- /dev/null +++ b/app/assets/stylesheets/_url-helpers.scss @@ -0,0 +1,14 @@ +// Copy of _url-helpers.scss in govuk_frontend_toolkit +// to allow us to use gulp-base64-inline on all our images +// gulp-base64-inline requires you to specify which of your +// images you want encoded by using the `inline()` function +// see https://github.com/goschevski/gulp-base64-inline +@function file-url($file) { + $url: ''; + @if $path { + $url: inline($path + $file); + } @else { + $url: image-url($file); + } + @return $url; +} diff --git a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss index 5f8f9f4d9..0e060f12c 100644 --- a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss +++ b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss @@ -4,8 +4,6 @@ https://github.com/alphagov/static/blob/3d93a762b9d7af54615c77ae3e479131c03b8175 and https://github.com/alphagov/static/blob/da8aeeaa749093eab30286d7fc9f965533b66f47/app/assets/stylesheets/styleguide/_conditionals2.scss */ -@import "_colours.scss"; -@import "_typography.scss"; // Media query helpers. These make producing IE layouts // super easy. diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index a12340dca..8799cbf73 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -11,9 +11,11 @@ $path: '/static/images/'; @import 'typography'; @import 'grid_layout'; @import 'helpers'; -@import 'url-helpers'; @import 'design-patterns/buttons'; +// Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application +@import 'url-helpers'; + // Dependencies from GOV.UK Elements // https://github.com/alphagov/govuk_elements @import 'elements/helpers'; diff --git a/docker/Dockerfile b/docker/Dockerfile index 4c41b9185..c9464a30b 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -6,7 +6,7 @@ ARG NO_PROXY ENV PYTHONUNBUFFERED=1 \ DEBIAN_FRONTEND=noninteractive \ - NODEJS_VERSION=6.3.1-1nodesource1~jessie1 \ + NODEJS_VERSION=10.x \ GOSU_VERSION=1.10 RUN \ @@ -42,8 +42,8 @@ RUN \ && echo "Install nodejs" \ && cd /tmp \ - && curl -x "$HTTP_PROXY" -sSLO https://deb.nodesource.com/node_6.x/pool/main/n/nodejs/nodejs_${NODEJS_VERSION}_amd64.deb \ - && dpkg -i /tmp/nodejs_${NODEJS_VERSION}_amd64.deb \ + && curl -x "$HTTP_PROXY" -sL https://deb.nodesource.com/setup_${NODEJS_VERSION} | bash - \ + && apt-get install -y --no-install-recommends nodejs \ && echo "Clean up" \ && rm -rf /var/lib/apt/lists/* /tmp/* diff --git a/gulpfile.babel.js b/gulpfile.babel.js deleted file mode 100644 index 1e68636df..000000000 --- a/gulpfile.babel.js +++ /dev/null @@ -1,182 +0,0 @@ -// GULPFILE -// - - - - - - - - - - - - - - - -// This file processes all of the assets in the "src" folder -// and outputs the finished files in the "dist" folder. - -// 1. LIBRARIES -// - - - - - - - - - - - - - - - -import gulp from 'gulp'; -import loadPlugins from 'gulp-load-plugins'; -import stylish from 'jshint-stylish'; -import runSequence from 'run-sequence'; - -const plugins = loadPlugins(), - -// 2. CONFIGURATION -// - - - - - - - - - - - - - - - - paths = { - src: 'app/assets/', - dist: 'app/static/', - templates: 'app/templates/', - npm: 'node_modules/', - template: 'node_modules/govuk_template_jinja/', - toolkit: 'node_modules/govuk_frontend_toolkit/' - }; - -// 3. TASKS -// - - - - - - - - - - - - - - - - -// Move GOV.UK template resources - -gulp.task('copy:govuk_template:template', () => gulp.src(paths.template + 'views/layouts/govuk_template.html') - .pipe(gulp.dest(paths.templates)) -); - -gulp.task('copy:govuk_template:css', () => gulp.src(paths.template + 'assets/stylesheets/**/*.css') - .pipe(plugins.sass({ - outputStyle: 'compressed' - })) - .on('error', plugins.sass.logError) - .pipe(plugins.cssUrlAdjuster({ - prependRelative: process.env.NOTIFY_ENVIRONMENT == 'development' ? '/static/' : '/', - })) - .pipe(gulp.dest(paths.dist + 'stylesheets/')) -); - -gulp.task('copy:govuk_template:js', () => gulp.src(paths.template + 'assets/javascripts/**/*.js') - .pipe(plugins.uglify()) - .pipe(gulp.dest(paths.dist + 'javascripts/')) -); - -gulp.task('copy:govuk_template:images', () => gulp.src(paths.template + 'assets/stylesheets/images/**/*') - .pipe(gulp.dest(paths.dist + 'images/')) -); - -gulp.task('copy:govuk_template:fonts', () => gulp.src(paths.template + 'assets/stylesheets/fonts/**/*') - .pipe(gulp.dest(paths.dist + 'fonts/')) -); - -gulp.task('javascripts', () => gulp - .src([ - paths.toolkit + 'javascripts/govuk/modules.js', - paths.toolkit + 'javascripts/govuk/show-hide-content.js', - paths.src + 'javascripts/stick-to-window-when-scrolling.js', - paths.src + 'javascripts/detailsPolyfill.js', - paths.src + 'javascripts/apiKey.js', - paths.src + 'javascripts/autofocus.js', - paths.src + 'javascripts/highlightTags.js', - paths.src + 'javascripts/fileUpload.js', - paths.src + 'javascripts/expandCollapse.js', - paths.src + 'javascripts/radioSelect.js', - paths.src + 'javascripts/updateContent.js', - paths.src + 'javascripts/listEntry.js', - paths.src + 'javascripts/liveSearch.js', - paths.src + 'javascripts/errorTracking.js', - paths.src + 'javascripts/preventDuplicateFormSubmissions.js', - paths.src + 'javascripts/fullscreenTable.js', - paths.src + 'javascripts/previewPane.js', - paths.src + 'javascripts/colourPreview.js', - paths.src + 'javascripts/templateFolderForm.js', - paths.src + 'javascripts/main.js' - ]) - .pipe(plugins.prettyerror()) - .pipe(plugins.babel({ - presets: ['es2015'] - })) - .pipe(plugins.addSrc.prepend([ - paths.npm + 'hogan.js/dist/hogan-3.0.2.js', - paths.npm + 'jquery/dist/jquery.min.js', - paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js', - paths.npm + 'diff-dom/diffDOM.js', - paths.npm + 'timeago/jquery.timeago.js', - paths.npm + 'textarea-caret/index.js' - ])) - .pipe(plugins.uglify()) - .pipe(plugins.concat('all.js')) - .pipe(gulp.dest(paths.dist + 'javascripts/')) -); - -gulp.task('sass', () => gulp - .src(paths.src + '/stylesheets/main*.scss') - .pipe(plugins.prettyerror()) - .pipe(plugins.sass({ - outputStyle: 'compressed', - includePaths: [ - paths.npm + 'govuk-elements-sass/public/sass/', - paths.toolkit + 'stylesheets/' - ] - })) - .pipe(plugins.base64({baseDir: 'app'})) - .pipe(gulp.dest(paths.dist + 'stylesheets/')) -); - - -// Copy images - -gulp.task('images', () => gulp - .src([ - paths.src + 'images/**/*', - paths.toolkit + 'images/**/*', - paths.template + 'assets/images/**/*' - ]) - .pipe(gulp.dest(paths.dist + 'images/')) -); - -gulp.task('copy:govuk_template:error_page', () => gulp.src(paths.src + 'error_pages/**/*') - .pipe(gulp.dest(paths.dist + 'error_pages/')) -); - - -// Watch for changes and re-run tasks -gulp.task('watchForChanges', function() { - gulp.watch(paths.src + 'javascripts/**/*', ['javascripts']); - gulp.watch(paths.src + 'stylesheets/**/*', ['sass']); - gulp.watch(paths.src + 'images/**/*', ['images']); - gulp.watch('gulpfile.babel.js', ['default']); -}); - -gulp.task('lint:sass', () => gulp - .src([ - paths.src + 'stylesheets/*.scss', - paths.src + 'stylesheets/components/*.scss', - paths.src + 'stylesheets/views/*.scss', - ]) - .pipe(plugins.sassLint()) - .pipe(plugins.sassLint.format(stylish)) - .pipe(plugins.sassLint.failOnError()) -); - -gulp.task('lint:js', () => gulp - .src(paths.src + 'javascripts/**/*.js') - .pipe(plugins.jshint()) - .pipe(plugins.jshint.reporter(stylish)) - .pipe(plugins.jshint.reporter('fail')) -); - -gulp.task('lint', - ['lint:sass', 'lint:js'] -); - -// Default: compile everything -gulp.task('default', function() { - runSequence( - [ - 'copy:govuk_template:template', - 'copy:govuk_template:images', - 'copy:govuk_template:fonts', - 'copy:govuk_template:css', - 'copy:govuk_template:js', - 'images', - ], - [ - 'copy:govuk_template:error_page', - 'javascripts', - 'sass' - ] - ); -}); - -// Optional: recompile on changes -gulp.task('watch', - ['default', 'watchForChanges'] -); diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 000000000..60533475f --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,196 @@ +// GULPFILE +// - - - - - - - - - - - - - - - +// This file processes all of the assets in the "src" folder +// and outputs the finished files in the "dist" folder. + +// 1. LIBRARIES +// - - - - - - - - - - - - - - - +const { src, pipe, dest, series, parallel } = require('gulp'); +const stylish = require('jshint-stylish'); + +const plugins = {}; +plugins.addSrc = require('gulp-add-src'); +plugins.babel = require('gulp-babel'); +plugins.base64 = require('gulp-base64-inline'); +plugins.concat = require('gulp-concat'); +plugins.cssUrlAdjuster = require('gulp-css-url-adjuster'); +plugins.jshint = require('gulp-jshint'); +plugins.prettyerror = require('gulp-prettyerror'); +plugins.sass = require('gulp-sass'); +plugins.sassLint = require('gulp-sass-lint'); +plugins.uglify = require('gulp-uglify'); + +// 2. CONFIGURATION +// - - - - - - - - - - - - - - - +const paths = { + src: 'app/assets/', + dist: 'app/static/', + templates: 'app/templates/', + npm: 'node_modules/', + template: 'node_modules/govuk_template_jinja/', + toolkit: 'node_modules/govuk_frontend_toolkit/' +}; + +// 3. TASKS +// - - - - - - - - - - - - - - - + +// Move GOV.UK template resources + +const copy = { + govuk_template: { + template: () => { + return src(paths.template + 'views/layouts/govuk_template.html') + .pipe(dest(paths.templates)); + }, + css: () => { + return src(paths.template + 'assets/stylesheets/**/*.css') + .pipe(plugins.sass({ + outputStyle: 'compressed' + })) + .on('error', plugins.sass.logError) + .pipe(plugins.cssUrlAdjuster({ + prependRelative: process.env.NOTIFY_ENVIRONMENT == 'development' ? '/static/' : '/', + })) + .pipe(dest(paths.dist + 'stylesheets/')); + }, + js: () => { + return src(paths.template + 'assets/javascripts/**/*.js') + .pipe(plugins.uglify()) + .pipe(dest(paths.dist + 'javascripts/')); + }, + images: () => { + return src(paths.template + 'assets/stylesheets/images/**/*') + .pipe(dest(paths.dist + 'images/')); + }, + fonts: () => { + return src(paths.template + 'assets/stylesheets/fonts/**/*') + .pipe(dest(paths.dist + 'fonts/')); + }, + error_page: () => { + return src(paths.src + 'error_pages/**/*') + .pipe(dest(paths.dist + 'error_pages/')) + } + } +}; + + +const javascripts = () => { + return src([ + paths.toolkit + 'javascripts/govuk/modules.js', + paths.toolkit + 'javascripts/govuk/show-hide-content.js', + paths.src + 'javascripts/stick-to-window-when-scrolling.js', + paths.src + 'javascripts/detailsPolyfill.js', + paths.src + 'javascripts/apiKey.js', + paths.src + 'javascripts/autofocus.js', + paths.src + 'javascripts/highlightTags.js', + paths.src + 'javascripts/fileUpload.js', + paths.src + 'javascripts/expandCollapse.js', + paths.src + 'javascripts/radioSelect.js', + paths.src + 'javascripts/updateContent.js', + paths.src + 'javascripts/listEntry.js', + paths.src + 'javascripts/liveSearch.js', + paths.src + 'javascripts/errorTracking.js', + paths.src + 'javascripts/preventDuplicateFormSubmissions.js', + paths.src + 'javascripts/fullscreenTable.js', + paths.src + 'javascripts/previewPane.js', + paths.src + 'javascripts/colourPreview.js', + paths.src + 'javascripts/templateFolderForm.js', + paths.src + 'javascripts/main.js' + ]) + .pipe(plugins.prettyerror()) + .pipe(plugins.babel({ + presets: ['@babel/preset-env'] + })) + .pipe(plugins.addSrc.prepend([ + paths.npm + 'hogan.js/dist/hogan-3.0.2.js', + paths.npm + 'jquery/dist/jquery.min.js', + paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js', + paths.npm + 'diff-dom/browser/diffDOM.js', + paths.npm + 'timeago/jquery.timeago.js', + paths.npm + 'textarea-caret/index.js' + ])) + .pipe(plugins.uglify()) + .pipe(plugins.concat('all.js')) + .pipe(dest(paths.dist + 'javascripts/')) +}; + + +const sass = () => { + return src(paths.src + '/stylesheets/main*.scss') + .pipe(plugins.prettyerror()) + .pipe(plugins.sass({ + outputStyle: 'compressed', + includePaths: [ + paths.npm + 'govuk-elements-sass/public/sass/', + paths.toolkit + 'stylesheets/' + ] + })) + .pipe(plugins.base64('../..')) + .pipe(dest(paths.dist + 'stylesheets/')) +}; + + +// Copy images + +const images = () => { + return src([ + paths.src + 'images/**/*', + paths.toolkit + 'images/**/*', + paths.template + 'assets/images/**/*' + ]) + .pipe(dest(paths.dist + 'images/')) +}; + + +// Watch for changes and re-run tasks +const watchForChanges = () => { + return watch(paths.src + 'javascripts/**/*', ['javascripts']) + .watch(paths.src + 'stylesheets/**/*', ['sass']) + .watch(paths.src + 'images/**/*', ['images']) + .watch('gulpfile.js', ['default']); +}; + +const lint = { + 'sass': () => { + return src([ + paths.src + 'stylesheets/*.scss', + paths.src + 'stylesheets/components/*.scss', + paths.src + 'stylesheets/views/*.scss', + ]) + .pipe(plugins.sassLint({ + 'options': { 'formatter': 'stylish' } + })) + .pipe(plugins.sassLint.format()) + .pipe(plugins.sassLint.failOnError()); + }, + 'js': (cb) => { + return src(paths.src + 'javascripts/**/*.js') + .pipe(plugins.jshint()) + .pipe(plugins.jshint.reporter(stylish)) + .pipe(plugins.jshint.reporter('fail')) + } +}; + +// Default: compile everything +const defaultTask = parallel( + series( + copy.govuk_template.template, + copy.govuk_template.images, + copy.govuk_template.fonts, + copy.govuk_template.css, + copy.govuk_template.js, + images + ), + series( + copy.govuk_template.error_page, + javascripts, + sass + ) +); + +exports.default = defaultTask; + +exports.lint = series(lint.sass, lint.js); + +// Optional: recompile on changes +exports.watch = series(defaultTask, watchForChanges); diff --git a/package.json b/package.json index 3e81dc120..3306a0f6b 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.0.1", "description": "Admin front end for GOV.UK Notify", "engines": { - "node": "5.0.0" + "node": "10.15.3" }, "scripts": { "test": "gulp lint", @@ -18,34 +18,35 @@ "license": "MIT", "homepage": "https://github.com/alphagov/notifications-admin#readme", "dependencies": { - "babel-core": "6.26.0", - "babel-preset-es2015": "6.24.1", - "diff-dom": "2.3.1", - "govuk-elements-sass": "3.1.2", - "govuk_frontend_toolkit": "7.2.0", - "govuk_template_jinja": "0.24.0", - "gulp": "3.9.1", + "@babel/core": "7.4.0", + "@babel/preset-env": "7.4.2", + "diff-dom": "https://github.com/fiduswriter/diffDOM/archive/v3.1.0.tar.gz", + "govuk-elements-sass": "3.1.3", + "govuk_frontend_toolkit": "8.1.0", + "govuk_template_jinja": "0.24.1", + "gulp": "4.0.0", "gulp-add-src": "1.0.0", - "gulp-babel": "7.0.0", - "gulp-base64": "0.1.3", + "gulp-babel": "8.0.0", + "gulp-base64-inline": "1.0.4", "gulp-concat": "2.6.1", "gulp-include": "2.3.1", - "gulp-load-plugins": "1.5.0", - "gulp-sass": "3.1.0", - "gulp-uglify": "3.0.0", + "gulp-sass": "4.0.2", + "gulp-uglify": "3.0.2", "hogan": "1.0.2", "jquery": "1.12.4", "query-command-supported": "1.0.0", - "textarea-caret": "^3.1.0", - "timeago": "1.6.1" + "textarea-caret": "3.1.0", + "timeago": "1.6.5" }, "devDependencies": { "gulp-css-url-adjuster": "0.2.3", "gulp-jshint": "2.1.0", "gulp-prettyerror": "1.2.1", - "gulp-sass-lint": "1.2.0", - "jshint": "2.9.5", - "jshint-stylish": "2.2.1", - "run-sequence": "2.2.1" + "gulp-sass-lint": "1.4.0", + "jshint": "2.10.2", + "jshint-stylish": "2.2.1" + }, + "peerDependencies": { + "rollup": "1.10.0" } }