Skip to content

Commit a98b02f

Browse files
committed
Adds initial gulp workflow, page content, stylesheet & markdown docs
1 parent 2f840af commit a98b02f

File tree

12 files changed

+587
-8
lines changed

12 files changed

+587
-8
lines changed

.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,7 @@ jspm_packages
3535

3636
# Optional REPL history
3737
.node_repl_history
38+
39+
# Idea
40+
.idea
41+
*.iml

README.md

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,35 @@
11
# d13.github.io
2-
my website
2+
3+
My personal website and general dumping ground to try out my ideas.
4+
5+
## Local Setup
6+
7+
You will need node.js installed to run this locally and build the files.
8+
9+
To get started:
10+
- From the terminal, browse to the project's root folder
11+
- Run `npm install`
12+
13+
14+
## Development gulp task
15+
16+
Run `gulp dev`
17+
18+
This will:
19+
- Builds the JS, CSS and HTML files
20+
- Run a local web-server to see you changes
21+
- Live-reloads the browser as changes are made
22+
23+
## Individual gulp tasks
24+
25+
**Browsing locally:** run `gulp serve`
26+
27+
**Wipe-out built files:** run `gulp clean`
28+
29+
**Building all files:** run `gulp build`
30+
31+
**Building HTML:** run `gulp build-templates`
32+
33+
**Building JS:** run `gulp build-scripts`
34+
35+
**Building CSS:** run `gulp build-styles`

assets/styles.css

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

build/gulp-context.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
env: ''
3+
};

build/paths.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var appRoot = 'src/';
2+
var outputRoot = 'assets/';
3+
4+
module.exports = {
5+
root: appRoot,
6+
scripts: appRoot + 'scripts/**/*.js',
7+
templates: appRoot + 'templates/**/*.html',
8+
styles: appRoot + 'styles/**/*.scss',
9+
output: outputRoot
10+
};

build/tasks/build.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
var paths = require('../paths');
2+
var context = require('../gulp-context');
3+
4+
var runSequence = require('run-sequence');
5+
6+
var gulp = require('gulp');
7+
var changed = require('gulp-changed');
8+
var plumber = require('gulp-plumber');
9+
var notify = require('gulp-notify');
10+
var sourcemaps = require('gulp-sourcemaps');
11+
var autoprefixer = require('gulp-autoprefixer');
12+
var sass = require('gulp-sass');
13+
14+
gulp.task('build-scripts', function () {
15+
// TODO: add script build
16+
});
17+
18+
gulp.task('build-templates', function () {
19+
// TODO: add template build
20+
});
21+
22+
var reportError = function (error) {
23+
notify({
24+
title: 'Gulp Task Error',
25+
message: 'Check the console.'
26+
}).write(error);
27+
28+
console.log(error.toString());
29+
30+
// Explicitely exit the stream, which gracefully kicks out of the task, letting watch survive
31+
this.emit('end');
32+
if (context.env !== 'watch') {
33+
return process.exit(2);
34+
}
35+
};
36+
37+
gulp.task('build-styles', function () {
38+
return gulp.src(paths.styles)
39+
.pipe(plumber({errorHandler: reportError}))
40+
.pipe(changed(paths.output, {extension: '.css'}))
41+
.pipe(sourcemaps.init())
42+
.pipe(sass())
43+
.pipe(sourcemaps.write())
44+
.pipe(autoprefixer({
45+
browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
46+
}))
47+
.pipe(gulp.dest(paths.output));
48+
});
49+
50+
gulp.task('build', function (callback) {
51+
return runSequence(
52+
'clean',
53+
['build-scripts', 'build-templates', 'build-styles'],
54+
function (err) {
55+
if (err) {
56+
var exitCode = 2;
57+
console.log('[ERROR] gulp build task failed', err);
58+
console.log('[FAIL] gulp build task failed - exiting with code ' + exitCode);
59+
return process.exit(exitCode);
60+
} else {
61+
return callback();
62+
}
63+
}
64+
);
65+
});

build/tasks/clean.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var gulp = require('gulp');
2+
var paths = require('../paths');
3+
var del = require('del');
4+
var vinylPaths = require('vinyl-paths');
5+
6+
// deletes all files in the output path
7+
gulp.task('clean', function () {
8+
return gulp.src([paths.output])
9+
.pipe(vinylPaths(del));
10+
});

build/tasks/serve.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var paths = require('../paths');
2+
3+
var gulp = require('gulp');
4+
var browserSync = require('browser-sync').create();
5+
6+
// this task utilizes the browsersync plugin
7+
// to create a dev server instance
8+
// at http://localhost:9000
9+
gulp.task('serve', ['build'], function (done) {
10+
browserSync.init({
11+
online: false,
12+
open: false,
13+
port: 9000,
14+
server: {
15+
baseDir: ['.'],
16+
middleware: function (req, res, next) {
17+
res.setHeader('Access-Control-Allow-Origin', '*');
18+
next();
19+
}
20+
}
21+
}, done);
22+
});
23+
24+
gulp.task('dev', ['serve'], function () {
25+
gulp.watch(paths.scripts, ['build-scripts']).on('change', browserSync.reload);
26+
gulp.watch(paths.styles, ['build-styles']).on('change', browserSync.reload);
27+
gulp.watch(paths.templates, ['build-templates']).on('change', browserSync.reload);
28+
});

gulpfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('require-dir')('build/tasks');

0 commit comments

Comments
 (0)