darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-09 06:33:52 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
743a9d05d1b722a3c3f878cb68d6f5edf64f07d5
notifications-admin/gulpfile.babel.js

151 lines
4.1 KiB
JavaScript
Raw Normal View History

Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
// GULPFILE
// - - - - - - - - - - - - - - -
// This file processes all of the assets in the "src" folder
// and outputs the finished files in the "dist" folder.
// 1. LIBRARIES
// - - - - - - - - - - - - - - -
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')(),
Add linting for SASS and Javascript Similar to how PEP8 enforces Python style, there are tools for front end code: - jshint[1] for Javascript - sass-lint[2] for SASS This commit adds the Gulp plugins for both, and sets up some sensible rules (which can be iterated on). It also adds a command to `./scripts/run_tests.sh`, so that any errors in the front end code will fail the build before it has a chance to be deployed. 1. http://jshint.com/ 2. https://www.npmjs.com/package/sass-lint
2016-02-08 11:05:07 +00:00
stylish = require('jshint-stylish'),
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
// 2. CONFIGURATION
// - - - - - - - - - - - - - - -
paths = {
src: 'app/assets/',
dist: 'app/static/',
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
templates: 'app/templates/',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
npm: 'node_modules/',
template: 'node_modules/govuk_template_jinja/',
toolkit: 'node_modules/govuk_frontend_toolkit/'
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
};
// 3. TASKS
// - - - - - - - - - - - - - - -
// Move GOV.UK template resources
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
gulp.task('copy:govuk_template:template', () => gulp.src(paths.template + 'views/layouts/govuk_template.html')
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
.pipe(gulp.dest(paths.templates))
);
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
gulp.task('copy:govuk_template:css', () => gulp.src(paths.template + 'assets/stylesheets/**/*.css')
Make external link icons appear
2016-03-23 10:41:37 +00:00
.pipe(plugins.sass({
outputStyle: 'compressed'
}))
.on('error', plugins.sass.logError)
Fix GOV.UK template images
2016-02-23 10:56:48 +00:00
.pipe(plugins.cssUrlAdjuster({
Fix for images
2016-03-23 14:14:50 +00:00
prependRelative: '/static/',
Fix GOV.UK template images
2016-02-23 10:56:48 +00:00
}))
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
.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/'))
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
);
Fix GOV.UK template images
2016-02-23 10:56:48 +00:00
gulp.task('copy:govuk_template:images', () => gulp.src(paths.template + 'assets/stylesheets/images/**/*')
.pipe(gulp.dest(paths.dist + 'images/'))
);
Fix flakiness with Gulp + Travis Gulp was failing silently on Travis. I tracked this down to the task that builds a custom, slimmed-down version of jQuery from source. To fix this I’ve removed the task and replaced it with just `src`ing the minified version of jQuery from `node_modules`. Cons: - A few more kb of JS Pros: - Less random, afternoon-chewing complexity
2016-01-12 13:37:50 +00:00
gulp.task('javascripts', () => gulp
.src([
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
paths.toolkit + 'javascripts/govuk/modules.js',
paths.toolkit + 'javascripts/govuk/selection-buttons.js',
Add polyfill for HTML5 `<details>` element The details element is fairly new. It doesn’t work in all browsers, and isn’t keyboard/screenreader accessible even in some new browsers. This commit adds the Polyfill script from GOV.UK elements[1] which polyfills these features for browsers that don’t support them. 1. http://govuk-elements.herokuapp.com/typography/#typography-hidden-text
2016-05-17 14:46:34 +01:00
paths.src + 'javascripts/detailsPolyfill.js',
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
paths.src + 'javascripts/apiKey.js',
Make autofocus textbox module This commit adds a very small Javascript module to autofocus a textbox on page load. It should only be used once per page. It also adds a parameter to the textbox macro which adds the attribute to trigger autofocus.
2016-02-02 16:16:29 +00:00
paths.src + 'javascripts/autofocus.js',
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
paths.src + 'javascripts/highlightTags.js',
Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
2016-02-02 17:28:30 +00:00
paths.src + 'javascripts/fileUpload.js',
Make job page poll for updates This is a first go at having the job page update without refreshing. The approach I’ve taken is to do all the rendering of HTML on the server side, rather than use a Javascipt templating engine like mustache. This ensures that we don’t have to maintain two sets of templates. So the approach is to split the job page into partials. These partials can then: - be included in the job page to render the whole page - be rendered indivudually and then returned as a blob of HTML inside a JSON response Then I’ve added a Javascript module which looks for areas of the page that should be reloaded. For each area of the page it will poll a URL and re-render that section of the page when it gets new HTML. It implements some throttling so that API calls will never happen more frequently than 0.67 times/second.
2016-03-02 17:36:20 +00:00
paths.src + 'javascripts/updateContent.js',
Truncate previews of email messages to ~3 lines Emails can get very long. When you’re trying to do other things on the page this results in a lot of scrolling. This commit truncates email messages to about 3 lines, and adds a JS toggle which reveal the full contents of the email.
2016-04-11 15:16:41 +01:00
paths.src + 'javascripts/expandCollapse.js',
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
paths.src + 'javascripts/main.js'
])
.pipe(plugins.babel({
presets: ['es2015']
}))
Fix flakiness with Gulp + Travis Gulp was failing silently on Travis. I tracked this down to the task that builds a custom, slimmed-down version of jQuery from source. To fix this I’ve removed the task and replaced it with just `src`ing the minified version of jQuery from `node_modules`. Cons: - A few more kb of JS Pros: - Less random, afternoon-chewing complexity
2016-01-12 13:37:50 +00:00
.pipe(plugins.uglify())
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
.pipe(plugins.addSrc.prepend([
paths.npm + 'jquery/dist/jquery.min.js',
Patch update sections of the page on AJAX Currently, when we update a section of the page with AJAX we replace the entire HTML of the section with the new HTML. This causes problems: - if you’re trying to interact with that section of the page, eg by inpecting it, clicking or hovering an element - (probably) for screenreaders trying to navigate a page which is changing more than is necessary This commit replaces the call to `.html()` with a pretty clever library called diffDOM[1]. DiffDOM works by taking a diff of the old element and the new element, then doing a patch update, ie only modifying the parts that have changed. This is similar in concept to React’s virtual DOM, while still allowing us to render all markup from one set of templates on the server-side. 1. https://github.com/fiduswriter/diffDOM
2016-04-27 09:28:42 +01:00
paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
paths.npm + 'diff-dom/diffDOM.js'
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
]))
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
.pipe(plugins.concat('all.js'))
.pipe(gulp.dest(paths.dist + 'javascripts/'))
);
Fix flakiness with Gulp + Travis Gulp was failing silently on Travis. I tracked this down to the task that builds a custom, slimmed-down version of jQuery from source. To fix this I’ve removed the task and replaced it with just `src`ing the minified version of jQuery from `node_modules`. Cons: - A few more kb of JS Pros: - Less random, afternoon-chewing complexity
2016-01-12 13:37:50 +00:00
gulp.task('sass', () => gulp
.src(paths.src + '/stylesheets/main*.scss')
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: [
paths.npm + 'govuk-elements-sass/public/sass/',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
paths.toolkit + 'stylesheets/'
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
]
}))
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
.pipe(plugins.base64({baseDir: 'app'}))
.pipe(gulp.dest(paths.dist + 'stylesheets/'))
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
);
// Copy images
Fix flakiness with Gulp + Travis Gulp was failing silently on Travis. I tracked this down to the task that builds a custom, slimmed-down version of jQuery from source. To fix this I’ve removed the task and replaced it with just `src`ing the minified version of jQuery from `node_modules`. Cons: - A few more kb of JS Pros: - Less random, afternoon-chewing complexity
2016-01-12 13:37:50 +00:00
gulp.task('images', () => gulp
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
.src([
paths.src + 'images/**/*',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
paths.toolkit + 'images/**/*',
paths.template + 'assets/images/**/*'
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
])
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
.pipe(gulp.dest(paths.dist + 'images/'))
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
);
// 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']);
Add pages to invite, edit, and delete users This takes the original prototype version of this page, and, using the same fake data (ie nothing is wired up): - adds an invite users page - adds an edit (and delete) user page Both these pages allow the user to set another user’s permissions. This commit adds images for the ticks and crosses, so we have control over their appearance.
2016-02-19 15:02:13 +00:00
gulp.watch('gulpfile.babel.js', ['default']);
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
});
Add linting for SASS and Javascript Similar to how PEP8 enforces Python style, there are tools for front end code: - jshint[1] for Javascript - sass-lint[2] for SASS This commit adds the Gulp plugins for both, and sets up some sensible rules (which can be iterated on). It also adds a command to `./scripts/run_tests.sh`, so that any errors in the front end code will fail the build before it has a chance to be deployed. 1. http://jshint.com/ 2. https://www.npmjs.com/package/sass-lint
2016-02-08 11:05:07 +00:00
gulp.task('lint:sass', () => gulp
Don’t lint SCSS files that have come from outside We should (and do) keep exact copies of SCSS files that have come from elsewhere so that we can easily upgrade them. But sometimes they don’t always pass our linting rules, or throw a lot of warnings, which is noisy. This commit: - moves such files into their own subdirectory - tells SCSS Lint to ignore files in this directory
2016-04-13 12:50:13 +01:00
.src([
paths.src + 'stylesheets/*.scss',
paths.src + 'stylesheets/components/*.scss',
paths.src + 'stylesheets/views/*.scss',
])
Bring back SASS lint The problem with SASS lint that we found in https://github.com/alphagov/notifications-admin/pull/202 has been fixed (see https://github.com/sasstools/sass-lint/pull/550). This commit reverts #202, re-enabling linting of SASS files.
2016-02-26 13:19:46 +00:00
.pipe(plugins.sassLint())
.pipe(plugins.sassLint.format(stylish))
.pipe(plugins.sassLint.failOnError())
Add linting for SASS and Javascript Similar to how PEP8 enforces Python style, there are tools for front end code: - jshint[1] for Javascript - sass-lint[2] for SASS This commit adds the Gulp plugins for both, and sets up some sensible rules (which can be iterated on). It also adds a command to `./scripts/run_tests.sh`, so that any errors in the front end code will fail the build before it has a chance to be deployed. 1. http://jshint.com/ 2. https://www.npmjs.com/package/sass-lint
2016-02-08 11:05:07 +00:00
);
gulp.task('lint:js', () => gulp
.src(paths.src + 'javascripts/**/*.js')
.pipe(plugins.jshint({'esversion': 6, 'esnext': false}))
.pipe(plugins.jshint.reporter(stylish))
.pipe(plugins.jshint.reporter('fail'))
);
gulp.task('lint',
['lint:sass', 'lint:js']
);
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
// Default: compile everything
gulp.task('default',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
[
'copy:govuk_template:template',
Fix GOV.UK template images
2016-02-23 10:56:48 +00:00
'copy:govuk_template:images',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
'copy:govuk_template:css',
'copy:govuk_template:js',
'javascripts',
'sass',
'images'
]
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
);
// Optional: recompile on changes
gulp.task('watch',
['default', 'watchForChanges']
);
Reference in New Issue Copy Permalink