Merge pull request #284 from alphagov/htmlandbacon-gulpy

Use Gulp instead of Grunt

.travis.yml

@@ -1,12 +1,10 @@
 language: node_js
 node_js:
 - 4.0
-before_install:
-- npm install -g grunt-cli
 install:
 - npm install
 script:
-- "./node_modules/grunt-cli/bin/grunt test"
+- gulp test
 - npm test
 after_success:
 - "./create-release-tag.sh"

Procfile

@@ -1 +1 @@
-web: node ./node_modules/grunt-cli/bin/grunt --gruntfile Gruntfile.js generate-assets && node server.js
+web: node ./node_modules/gulp/bin/gulp generate-assets && node server.js

docs/documentation/install/install-the-kit.md

@@ -69,7 +69,7 @@ To check you’re in the right folder, you can run `ls` (list items):
 ```
 ls
 ```
-You should see a list of files inside the prototype, starting with `CHANGELOG.md, CONTRIBUTING.md, Gruntfile.js etc`
+You should see a list of files inside the prototype, starting with `CHANGELOG.md, CONTRIBUTING.md, gulpfile.js etc`
 
 > If you don’t see these files, check that you installed the kit into the right location and named it correctly.
 
@@ -87,4 +87,5 @@ npm install
 ```
 The install may take up to a minute. Whilst installing it may `WARN` about some items - this is ok. As long as there are no `ERROR`s you can continue.
 
-<a href="run-the-kit.md" class="button">Next (run the kit)</a>
+
+<a href="run-the-kit.md" class="button">Next (run the kit)</a>

docs/documentation_routes.js

@@ -19,6 +19,11 @@ router.get('/install', function (req, res) {
 
 // Pages in install folder are markdown
 router.get('/install/:page', function (req, res) {
+  // If the link already has .md on the end (for GitHub docs)
+  // remove this when we render the page
+  if (req.params.page.slice(-3).toLowerCase() === '.md') {
+    req.params.page = req.params.page.slice(0, -3)
+  }
   redirectMarkdown(req.params.page, res)
   var doc = fs.readFileSync(path.join(__dirname, '/documentation/install/', req.params.page + '.md'), 'utf8')
   var html = marked(doc)

gulp/clean.js

@@ -0,0 +1,18 @@
+/*
+  clean.js
+  ===========
+  removes folders:
+    - public
+    - govuk_modules
+*/
+var config = require('./config.json')
+
+var gulp = require('gulp')
+var clean = require('gulp-clean')
+
+gulp.task('clean', function () {
+  return gulp.src([config.paths.public + '/*',
+                    config.paths.govukModules + '/*',
+                  '.port.tmp'], {read: false})
+  .pipe(clean())
+})

gulp/config.json

@@ -0,0 +1,10 @@
+{
+  "paths": {
+    "public": "public/",
+    "assets" : "app/assets/",
+    "docsAssets" : "docs/assets/",
+    "govukModules": "govuk_modules/",
+    "nodeModules": "node_modules/",
+    "lib": "lib/"
+  }
+}

gulp/copy-assets.js

@@ -0,0 +1,20 @@
+/*
+  copy.js
+  ===========
+  copies images and javascript folders to public
+*/
+
+var gulp = require('gulp')
+var config = require('./config.json')
+
+gulp.task('copy-assets', function () {
+  return gulp.src(['!' + config.paths.assets + 'sass{,/**/*}',
+    config.paths.assets + '/**'])
+  .pipe(gulp.dest(config.paths.public))
+})
+
+gulp.task('copy-documentation-assets', function () {
+  return gulp.src(['!' + config.paths.docsAssets + 'sass{,/**/*}',
+    config.paths.docsAssets + '/**'])
+  .pipe(gulp.dest(config.paths.public))
+})

gulp/copy-modules.js

@@ -0,0 +1,29 @@
+/*
+  copy-gov-modules.js
+  ===========
+  copies files for node_modules into govuk_modules
+*/
+
+var gulp = require('gulp')
+var config = require('./config.json')
+
+gulp.task('copy-toolkit', function () {
+  return gulp.src(['node_modules/govuk_frontend_toolkit/**'])
+  .pipe(gulp.dest(config.paths.govukModules + '/govuk_frontend_toolkit/'))
+})
+
+gulp.task('copy-template', function () {
+  return gulp.src(['node_modules/govuk_template_jinja/views/layouts/**'])
+  .pipe(gulp.dest(config.paths.govukModules + '/govuk_template/layouts/'))
+  .pipe(gulp.dest(config.paths.lib))
+})
+
+gulp.task('copy-template-assets', function () {
+  return gulp.src(['node_modules/govuk_template_jinja/assets/**'])
+  .pipe(gulp.dest(config.paths.govukModules + '/govuk_template/assets/'))
+})
+
+gulp.task('copy-elements-sass', function () {
+  return gulp.src(['node_modules/govuk-elements-sass/public/sass/**'])
+  .pipe(gulp.dest(config.paths.govukModules + '/govuk-elements-sass/'))
+})

gulp/nodemon.js

@@ -0,0 +1,28 @@
+/*
+  nodemon.js
+  ===========
+  uses nodemon to run a server, watches for javascript and json changes
+*/
+
+var fs = require('fs')
+var path = require('path')
+var gulp = require('gulp')
+var nodemon = require('gulp-nodemon')
+var config = require('./config.json')
+
+gulp.task('server', function () {
+  nodemon({
+    script: 'server.js',
+    ext: 'js, json',
+    ignore: [config.paths.public + '*',
+             config.paths.assets + '*',
+             config.paths.nodeModules + '*']
+  }).on('quit', function () {
+    // remove .port.tmp if it exists
+    try {
+      fs.unlinkSync(path.join(__dirname, '/../.port.tmp'))
+    } catch (e) {}
+
+    process.exit(0)
+  })
+})

gulp/sass.js

@@ -0,0 +1,34 @@
+/*
+  sass.js
+  ===========
+  compiles sass from assets folder with the govuk_modules
+  also includes sourcemaps
+*/
+
+var gulp = require('gulp')
+var sass = require('gulp-sass')
+var sourcemaps = require('gulp-sourcemaps')
+
+var config = require('./config.json')
+
+gulp.task('sass', function () {
+  return gulp.src(config.paths.assets + '/sass/*.scss')
+  .pipe(sass({outputStyle: 'expanded',
+              includePaths: ['govuk_modules/govuk_frontend_toolkit/stylesheets',
+                              'govuk_modules/govuk_template/assets/stylesheets',
+                              'govuk_modules/govuk-elements-sass/']}).on('error', sass.logError))
+  .pipe(sourcemaps.init())
+  .pipe(sourcemaps.write())
+  .pipe(gulp.dest(config.paths.public + '/stylesheets/'))
+})
+
+gulp.task('sass-documentation', function () {
+  return gulp.src(config.paths.docsAssets + '/sass/*.scss')
+  .pipe(sass({outputStyle: 'expanded',
+              includePaths: ['govuk_modules/govuk_frontend_toolkit/stylesheets',
+                              'govuk_modules/govuk_template/assets/stylesheets',
+                              'govuk_modules/govuk-elements-sass/']}).on('error', sass.logError))
+  .pipe(sourcemaps.init())
+  .pipe(sourcemaps.write())
+  .pipe(gulp.dest(config.paths.public + '/stylesheets/'))
+})

gulp/tasks.js

@@ -0,0 +1,41 @@
+/*
+  tasks.js
+  ===========
+  defaults wraps generate-assets, watch and server
+*/
+
+var gulp = require('gulp')
+var gutil = require('gulp-util')
+var runSequence = require('run-sequence')
+
+gulp.task('default', function (done) {
+  runSequence('generate-assets',
+                'watch',
+                'server', done)
+})
+
+gulp.task('generate-assets', function (done) {
+  runSequence('clean',
+                'copy-govuk-modules',
+                'sass',
+                'sass-documentation',
+                'copy-assets',
+                'copy-documentation-assets', done)
+})
+
+gulp.task('copy-govuk-modules', [
+  'copy-toolkit',
+  'copy-template-assets',
+  'copy-elements-sass',
+  'copy-template'
+])
+
+gulp.task('watch', function (done) {
+  runSequence('watch-sass',
+               'watch-assets', done)
+})
+
+gulp.task('test', function (done) {
+  gutil.log('Test that the app runs')
+  done()
+})

gulp/watch.js

@@ -0,0 +1,17 @@
+/*
+  watch.js
+  ===========
+  watches sass/js/images
+*/
+
+var gulp = require('gulp')
+var config = require('./config.json')
+
+gulp.task('watch-sass', function () {
+  return gulp.watch(config.paths.assets + 'sass/**', {cwd: './'}, ['sass'])
+})
+
+gulp.task('watch-assets', function () {
+  return gulp.watch([config.paths.assets + 'images/**',
+                      config.paths.assets + 'javascripts/**'], {cwd: './'}, ['copy-assets'])
+})