Merge pull request #79 from alphagov/govuk-elements-npm

Install GOV.UK Elements and GOV.UK Frontend Toolkit with NPM

README.md

@@ -28,17 +28,17 @@ Node's package management tool.
     brew install node
 ```
 
-n is a tool for managing different versions of node. The following installs n and uses the latest version of node.
+n is a tool for managing different versions of node. The following installs n
-
+and uses the latest version of node.
+```shell
     npm install -g n
     n latest
     npm rebuild node-sass
+```
 
-Most of the frontend dependencies are managed using Git Submodules. Some are
+The frontend dependencies are managed using NPM and Bower. To install or update
-managed with NPM and Bower. To install or update *all the things*, run
+*all the things*, run
 ```shell
-    git submodule init
-    git submodule update
     npm install
     npm run build
 ```

app/assets/stylesheets/main.scss

@@ -1,33 +1,33 @@
 // Dependencies from GOV.UK Frontend Toolkit
 // https://github.com/alphagov/govuk_frontend_toolkit/
-@import '../govuk_frontend_toolkit/stylesheets/conditionals';
+@import 'conditionals';
-@import '../govuk_frontend_toolkit/stylesheets/shims';
+@import 'shims';
-@import '../govuk_frontend_toolkit/stylesheets/measurements';
+@import 'measurements';
-@import '../govuk_frontend_toolkit/stylesheets/css3';
+@import 'css3';
-@import '../govuk_frontend_toolkit/stylesheets/colours';
+@import 'colours';
-@import '../govuk_frontend_toolkit/stylesheets/typography';
+@import 'typography';
-@import '../govuk_frontend_toolkit/stylesheets/grid_layout';
+@import 'grid_layout';
-@import '../govuk_frontend_toolkit/stylesheets/helpers';
+@import 'helpers';
-@import '../govuk_frontend_toolkit/stylesheets/url-helpers';
+@import 'url-helpers';
-@import '../govuk_frontend_toolkit/stylesheets/design-patterns/buttons';
+@import 'design-patterns/buttons';
-@import '../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta';
+@import 'design-patterns/alpha-beta';
 
 // Dependencies from GOV.UK Elements
 // https://github.com/alphagov/govuk_elements
-@import '../govuk_elements/public/sass/elements/helpers';
+@import 'elements/helpers';
-@import '../govuk_elements/public/sass/elements/reset';
+@import 'elements/reset';
-@import '../govuk_elements/public/sass/elements/buttons';
+@import 'elements/buttons';
-@import '../govuk_elements/public/sass/elements/details';
+@import 'elements/details';
-@import '../govuk_elements/public/sass/elements/elements-typography';
+@import 'elements/elements-typography';
-@import '../govuk_elements/public/sass/elements/forms';
+@import 'elements/forms';
-@import '../govuk_elements/public/sass/elements/forms/form-validation';
+@import 'elements/forms/form-validation';
-@import '../govuk_elements/public/sass/elements/forms/form-block-labels';
+@import 'elements/forms/form-block-labels';
-@import '../govuk_elements/public/sass/elements/forms/form-validation';
+@import 'elements/forms/form-validation';
-@import '../govuk_elements/public/sass/elements/icons';
+@import 'elements/icons';
-@import '../govuk_elements/public/sass/elements/layout';
+@import 'elements/layout';
-@import '../govuk_elements/public/sass/elements/lists';
+@import 'elements/lists';
-@import '../govuk_elements/public/sass/elements/panels';
+@import 'elements/panels';
-@import '../govuk_elements/public/sass/elements/tables';
+@import 'elements/tables';
 
 
 // Specific to this application

gulpfile.babel.js

@@ -13,7 +13,8 @@ var gulp = require('gulp'),
     paths = {
         src: 'app/assets/',
         dist: 'app/static/',
-        templates: 'app/templates/'
+        templates: 'app/templates/',
+        npm: 'node_modules/'
     };
 
 // 3. TASKS
@@ -31,8 +32,8 @@ gulp.task('copy:govuk_template:assets', () => gulp.src('bower_components/govuk_t
 
 gulp.task('javascripts', () => gulp
   .src([
-    paths.src + 'govuk_frontend_toolkit/javascripts/govuk/modules.js',
+    paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/modules.js',
-    paths.src + 'govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js',
+    paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js',
     paths.src + 'javascripts/highlightTags.js',
     paths.src + 'javascripts/dropdown.js',
     paths.src + 'javascripts/main.js'
@@ -50,7 +51,13 @@ gulp.task('javascripts', () => gulp
 
 gulp.task('sass', () => gulp
   .src(paths.src + '/stylesheets/main*.scss')
-  .pipe(plugins.sass({outputStyle: 'compressed'}))
+  .pipe(plugins.sass({
+    outputStyle: 'compressed',
+    includePaths: [
+      paths.npm + 'govuk-elements-sass/public/sass/',
+      paths.npm + 'govuk_frontend_toolkit/stylesheets/'
+    ]
+  }))
   .pipe(gulp.dest(paths.dist + '/stylesheets'))
 );
 
@@ -58,7 +65,10 @@ gulp.task('sass', () => gulp
 // Copy images
 
 gulp.task('images', () => gulp
-  .src(paths.src + 'images/**/*')
+  .src([
+    paths.src + 'images/**/*',
+    paths.npm + 'govuk_frontend_toolkit/images/**/*'
+  ])
   .pipe(gulp.dest(paths.dist + '/images'))
 );
 

package.json

@@ -22,6 +22,8 @@
     "babel-core": "6.3.26",
     "babel-preset-es2015": "6.3.13",
     "bower": "1.7.1",
+    "govuk-elements-sass": "github:alphagov/govuk_elements#v1.1.1",
+    "govuk_frontend_toolkit": "4.6.0",
     "gulp": "3.9.0",
     "gulp-add-src": "0.2.0",
     "gulp-babel": "6.1.1",