darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-09 14:45:00 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
4338bc9aaf1f8bd8b71c2349a3a5cb542c9129de
notifications-admin/gulpfile.babel.js

95 lines
2.6 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')(),
// 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/',
npm: 'node_modules/'
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
gulp.task('copy:govuk_template:template', () => gulp.src('bower_components/govuk_template/views/layouts/govuk_template.html')
.pipe(gulp.dest(paths.templates))
);
gulp.task('copy:govuk_template:assets', () => gulp.src('bower_components/govuk_template/assets/**/*')
.pipe(gulp.dest(paths.dist))
);
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([
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
paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/modules.js',
paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/selection-buttons.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',
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',
paths.npm + 'query-command-supported/dist/queryCommandSupported.min.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
.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/',
paths.npm + 'govuk_frontend_toolkit/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
.pipe(gulp.dest(paths.dist + '/stylesheets'))
);
// 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/**/*',
paths.npm + 'govuk_frontend_toolkit/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
.pipe(gulp.dest(paths.dist + '/images'))
);
// 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']);
});
// Default: compile everything
gulp.task('default',
['copy:govuk_template:template', 'copy:govuk_template:assets', 'javascripts', 'sass', 'images']
);
// Optional: recompile on changes
gulp.task('watch',
['default', 'watchForChanges']
);
Reference in New Issue Copy Permalink