10 years later #1
8 changed files with 0 additions and 411 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -5,9 +5,7 @@ reports/**
|
||||||
source/art/*.*
|
source/art/*.*
|
||||||
source/art/images/**
|
source/art/images/**
|
||||||
source/art/sprites/**
|
source/art/sprites/**
|
||||||
source/style/hippie-style/mixins/_sprite.scss
|
|
||||||
!source/art/**/demo/
|
!source/art/**/demo/
|
||||||
source/templates/data.json
|
|
||||||
source/data/**
|
source/data/**
|
||||||
!source/data/**/demo.json
|
!source/data/**/demo.json
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
const src = 'source/';
|
|
||||||
const dev = 'build/';
|
|
||||||
const dpl = 'deploy/';
|
|
||||||
const rep = 'reports/';
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
src: src,
|
|
||||||
dev: dev,
|
|
||||||
dpl: dpl,
|
|
||||||
rep: rep,
|
|
||||||
|
|
||||||
demo: true,
|
|
||||||
//these are not used while demo: true is set
|
|
||||||
index: 'index.html',
|
|
||||||
templateData: src + 'templates/data.json',
|
|
||||||
frontendData: src + 'data/**/*.json',
|
|
||||||
|
|
||||||
hippie: {
|
|
||||||
brand: 'hippie',
|
|
||||||
titlePostfix: ' - HIPPIE',
|
|
||||||
pageBase: './'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
module.exports = config;
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
const plumber = require('gulp-plumber');
|
|
||||||
// const notify = require('gulp-notify');
|
|
||||||
|
|
||||||
// function catchErrors(errTitle) {
|
|
||||||
// return plumber({
|
|
||||||
// errorHandler: notify.onError({
|
|
||||||
// // Customizing error title
|
|
||||||
// title: errTitle || "GULP GENERAL PROBLEM",
|
|
||||||
// message: "<%= error.message %>"
|
|
||||||
// })
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
|
|
||||||
function catchErrors() {
|
|
||||||
return plumber({
|
|
||||||
errorHandler: function (err) {
|
|
||||||
// Logs error in console
|
|
||||||
console.log(err.message);
|
|
||||||
// Ends the current pipe, so Gulp watch doesn't break
|
|
||||||
this.emit('end');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = catchErrors;
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
const config = require('../config');
|
|
||||||
const del = require('del');
|
|
||||||
|
|
||||||
// Clean output folders
|
|
||||||
function clean() {
|
|
||||||
return del([config.dev + '**', config.rep + '**', config.dpl + '**']);
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = clean;
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
function hello (cb) {
|
|
||||||
console.log('He Stephan', cb);
|
|
||||||
cb();
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = hello;
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
const config = require('../config');
|
|
||||||
// const browserSync = require('browser-sync'), server = browserSync.create();
|
|
||||||
const server = require('browser-sync').create();
|
|
||||||
|
|
||||||
// Automagically reload browsers
|
|
||||||
function reload(done) {
|
|
||||||
server.reload;
|
|
||||||
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Serve files to the browser
|
|
||||||
function serve(done) {
|
|
||||||
server.init({
|
|
||||||
index: config.index,
|
|
||||||
open: false,
|
|
||||||
server: config.dev
|
|
||||||
});
|
|
||||||
|
|
||||||
done();
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
serve: serve,
|
|
||||||
reload: reload
|
|
||||||
};
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
const { src } = require('gulp');
|
|
||||||
const config = require('../config');
|
|
||||||
const plumber = require('../modules/plumber');
|
|
||||||
const htmlValidator = require('gulp-w3c-html-validator');
|
|
||||||
|
|
||||||
function validate() {
|
|
||||||
return src(config.dev + '**/*.html')
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(htmlValidator())
|
|
||||||
.pipe(htmlValidator.reporter());
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = validate;
|
|
||||||
305
gulpfile.js
305
gulpfile.js
|
|
@ -1,305 +0,0 @@
|
||||||
// Use hippie
|
|
||||||
// const hippie = require('hippie/hippie');
|
|
||||||
|
|
||||||
// Setup project
|
|
||||||
const config = require('./gulp/config');
|
|
||||||
|
|
||||||
const hello = require('./gulp/tasks/hello');
|
|
||||||
const plumber = require('./gulp/modules/plumber');
|
|
||||||
const { serve, reload } = require('./gulp/tasks/sync');
|
|
||||||
const clean = require('./gulp/tasks/clean');
|
|
||||||
// const validate = require("./gulp/tasks/validate");
|
|
||||||
|
|
||||||
// Gulp requirements
|
|
||||||
const { watch, series, parallel } = require('gulp');
|
|
||||||
const { src, dest } = require('gulp');
|
|
||||||
|
|
||||||
const fs = require('fs');
|
|
||||||
|
|
||||||
const nunjucksRender = require('gulp-nunjucks-render');
|
|
||||||
// const nunjucks = require('gulp-nunjucks');
|
|
||||||
const data = require('gulp-data');
|
|
||||||
const jsonConcat = require('gulp-json-concat');
|
|
||||||
const sass = require('gulp-sass')(require('sass'));
|
|
||||||
const autoprefixer = require('gulp-autoprefixer');
|
|
||||||
const sassLint = require('gulp-sass-lint');
|
|
||||||
const rename = require('gulp-rename');
|
|
||||||
const cleanCss = require('gulp-clean-css');
|
|
||||||
const pump = require('pump');
|
|
||||||
const cached = require('gulp-cached');
|
|
||||||
// const remember = require('gulp-remember');
|
|
||||||
// const concat = require('gulp-concat');
|
|
||||||
const uglify = require('gulp-uglify');
|
|
||||||
const jshint = require('gulp-jshint');
|
|
||||||
const gulpIf = require('gulp-if');
|
|
||||||
const changed = require('gulp-changed');
|
|
||||||
const merge = require('merge-stream');
|
|
||||||
const spritesmith = require('gulp.spritesmith');
|
|
||||||
// const babel = require('gulp-babel');
|
|
||||||
// const buffer = require('vinyl-buffer');
|
|
||||||
// const imagemin = require('gulp-imagemin');
|
|
||||||
const useref = require('gulp-useref');
|
|
||||||
|
|
||||||
// Data variables
|
|
||||||
const input = {
|
|
||||||
screens: config.src + 'screens/**/*.+(njk|html)',
|
|
||||||
templates: config.src + 'templates/',
|
|
||||||
data: config.src + 'data/**/*.json',
|
|
||||||
style: config.src + 'style/**/*.s+(a|c)ss',
|
|
||||||
code: [
|
|
||||||
// config.src + 'code/hippie/config.js',
|
|
||||||
// config.src + 'code/hippie/main.js',
|
|
||||||
config.src + 'code/hippie/variables.js',
|
|
||||||
config.src + 'code/hippie/functions.js',
|
|
||||||
config.src + 'code/hippie/global.js',
|
|
||||||
// config.src + 'code/**/*.js',
|
|
||||||
'!' + config.src + 'vendor/**/*'
|
|
||||||
],
|
|
||||||
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
|
|
||||||
art: {
|
|
||||||
favicons: config.src + 'art/favicons/**/*.+(ico|png)',
|
|
||||||
sprites: config.src + 'art/sprites/**/*.png',
|
|
||||||
images: config.src + 'art/images/**/*.+(png|gif|jpg|svg|webp)'
|
|
||||||
},
|
|
||||||
vendor: 'vendor/**/*'
|
|
||||||
};
|
|
||||||
|
|
||||||
const output = {
|
|
||||||
data: config.dev + 'json',
|
|
||||||
style: config.dev + 'css',
|
|
||||||
code: config.dev + 'js',
|
|
||||||
fonts: config.dev + 'fonts',
|
|
||||||
art: config.dev + 'art',
|
|
||||||
vendor: config.dev + 'vendor'
|
|
||||||
};
|
|
||||||
|
|
||||||
// Show demo content if configured
|
|
||||||
if (config.demo === true) {
|
|
||||||
config.index = 'demo.html';
|
|
||||||
config.templateData = config.src + 'templates/demo/data.json';
|
|
||||||
} else {
|
|
||||||
config.frontendData = [config.src + 'data/**/*.json', '!' + config.src + 'data/demo.json'];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create tasks
|
|
||||||
|
|
||||||
// Concatenate JSON files
|
|
||||||
function json() {
|
|
||||||
return src(config.frontendData)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(jsonConcat('db.json', function (data) {
|
|
||||||
return new Buffer.from(JSON.stringify(data));
|
|
||||||
}))
|
|
||||||
.pipe(dest(output.data));
|
|
||||||
}
|
|
||||||
|
|
||||||
function manageEnvironment(environment) {
|
|
||||||
environment.addFilter('slug', function (str) {
|
|
||||||
return str && str.replace(/\s/g, '-', str).toLowerCase();
|
|
||||||
});
|
|
||||||
|
|
||||||
environment.addGlobal('hippie', config.hippie);
|
|
||||||
}
|
|
||||||
|
|
||||||
// function getDataForTemplates (file) {
|
|
||||||
// const template = JSON.parse(fs.readFileSync(config.templateData));
|
|
||||||
// const hippie = config.hippie;
|
|
||||||
// // console.log(file.relative);
|
|
||||||
// return { hippie, template };
|
|
||||||
// }
|
|
||||||
function getDataForTemplates() {
|
|
||||||
const data = JSON.parse(fs.readFileSync(config.templateData));
|
|
||||||
return { data };
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transpile HTML
|
|
||||||
function nunjucks() {
|
|
||||||
return src(input.screens)
|
|
||||||
.pipe(plumber())
|
|
||||||
// TODO only add data to pipe for necessary files
|
|
||||||
.pipe(data(getDataForTemplates))
|
|
||||||
.pipe(nunjucksRender({
|
|
||||||
path: input.templates,
|
|
||||||
envOptions: {
|
|
||||||
trimBlocks: true
|
|
||||||
},
|
|
||||||
manageEnv: manageEnvironment
|
|
||||||
}))
|
|
||||||
.pipe(dest(config.dev));
|
|
||||||
}
|
|
||||||
|
|
||||||
// This is for the looks
|
|
||||||
function style() {
|
|
||||||
return src(input.style)
|
|
||||||
.pipe(plumber())
|
|
||||||
// .pipe(sass.sync({
|
|
||||||
.pipe(sass({
|
|
||||||
includePaths: [input.vendor + '/**/*.s+(a|c)ss']
|
|
||||||
}).on('error', sass.logError))
|
|
||||||
.pipe(autoprefixer(['>= 4%', 'last 2 version']))
|
|
||||||
.pipe(dest(output.style))
|
|
||||||
.pipe(cleanCss())
|
|
||||||
.pipe(rename({
|
|
||||||
suffix: '.min'
|
|
||||||
}))
|
|
||||||
.pipe(dest(output.style));
|
|
||||||
}
|
|
||||||
// Linting
|
|
||||||
function styleLint() {
|
|
||||||
const dir = config.rep;
|
|
||||||
if (!fs.existsSync(dir)) {
|
|
||||||
fs.mkdirSync(dir);
|
|
||||||
}
|
|
||||||
let file = fs.createWriteStream(config.rep + 'sass-lint.html');
|
|
||||||
let stream = src(input.style)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(sassLint({
|
|
||||||
configFile: '.sasslintrc',
|
|
||||||
files: {
|
|
||||||
ignore: input.vendor + '/**/*.s+(a|c)ss'
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
.pipe(sassLint.format(file));
|
|
||||||
|
|
||||||
stream.on('finish', function () {
|
|
||||||
file.end();
|
|
||||||
});
|
|
||||||
|
|
||||||
return stream;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Javascript for the win
|
|
||||||
function code(cb) {
|
|
||||||
pump([
|
|
||||||
src(input.code, {
|
|
||||||
sourcemaps: true,
|
|
||||||
allowEmpty: true
|
|
||||||
}),
|
|
||||||
plumber(),
|
|
||||||
// cache('code'),
|
|
||||||
// babel({ presets: ['@babel/env'] }),
|
|
||||||
// concat(config.hippie.jsFile + 'main.js'),
|
|
||||||
dest(output.code),
|
|
||||||
uglify(),
|
|
||||||
// remember('code'),
|
|
||||||
rename({
|
|
||||||
suffix: '.min'
|
|
||||||
}),
|
|
||||||
dest(output.code, { sourcemaps: '.' })
|
|
||||||
], cb);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Linting
|
|
||||||
function codeLint() {
|
|
||||||
return src(input.code, { allowEmpty: true })
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(jshint())
|
|
||||||
.pipe(jshint.reporter('jshint-stylish'))
|
|
||||||
.pipe(jshint.reporter('fail', {
|
|
||||||
ignoreWarning: true,
|
|
||||||
ignoreInfo: true
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fonts
|
|
||||||
function fonts() {
|
|
||||||
return src(input.fonts)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(dest(output.fonts));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add art
|
|
||||||
function art() {
|
|
||||||
// Move favicons to the root folder
|
|
||||||
let favicons = src(input.art.favicons)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(changed(output.art))
|
|
||||||
.pipe(dest(config.dev));
|
|
||||||
|
|
||||||
// Move images to the root folder
|
|
||||||
let images = src(input.art.images)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(changed(output.art))
|
|
||||||
.pipe(dest(output.art));
|
|
||||||
|
|
||||||
return merge(favicons, images);
|
|
||||||
}
|
|
||||||
// function art() {
|
|
||||||
// // Move favicons and images to the root folder
|
|
||||||
// return src(input.art.favicons)
|
|
||||||
// .pipe(plumber())
|
|
||||||
// .pipe(changed(config.dev))
|
|
||||||
// .pipe(dest(config.dev))
|
|
||||||
// .pipe(src(input.art.images))
|
|
||||||
// .pipe(changed(output.art))
|
|
||||||
// .pipe(dest(output.art));
|
|
||||||
// }
|
|
||||||
|
|
||||||
|
|
||||||
function sprites() {
|
|
||||||
// Assemble sprites
|
|
||||||
let sprites = src(input.art.sprites)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(changed(output.art))
|
|
||||||
.pipe(spritesmith({
|
|
||||||
imgName: 'sprite.png',
|
|
||||||
imgPath: '../art/sprite.png',
|
|
||||||
cssName: '_sprite.scss'
|
|
||||||
}));
|
|
||||||
|
|
||||||
const imgStream = sprites.img
|
|
||||||
// DEV: We must buffer our stream into a Buffer for `imagemin`
|
|
||||||
// .pipe(buffer())
|
|
||||||
// .pipe(imagemin())
|
|
||||||
.pipe(dest(output.art));
|
|
||||||
|
|
||||||
const cssStream = sprites.css
|
|
||||||
.pipe(dest(config.src + 'style/hippie-style/mixins/'));
|
|
||||||
|
|
||||||
return merge(imgStream, cssStream);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Gather dependencies for tools
|
|
||||||
function vendor() {
|
|
||||||
return src(input.vendor)
|
|
||||||
.pipe(plumber())
|
|
||||||
.pipe(dest(output.vendor));
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO for distribution
|
|
||||||
function code2() {
|
|
||||||
return src(config.dev + '**/*.html')
|
|
||||||
.pipe(useref())
|
|
||||||
.pipe(cached('useref'))
|
|
||||||
.pipe(gulpIf('*.js', uglify()))
|
|
||||||
.pipe(dest('dist'));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function overview() {
|
|
||||||
watch([input.templates, input.screens, config.frontendData + 'data/**/*.json'], series(nunjucks, reload));
|
|
||||||
// watch(input.style, series(styleLint, style, reload));
|
|
||||||
watch(input.style, series(style, reload));
|
|
||||||
// watch(input.code, series(codeLint, code, reload));
|
|
||||||
watch(input.code, series(code, reload));
|
|
||||||
watch(input.fonts, series(fonts, reload));
|
|
||||||
watch(input.art.sprites, series(sprites, style, reload));
|
|
||||||
watch([input.art.favicons, input.art.images], series(art, reload));
|
|
||||||
watch(config.frontendData, series(json, reload));
|
|
||||||
}
|
|
||||||
|
|
||||||
const assets = parallel(fonts, art, sprites, json, vendor);
|
|
||||||
const build = series(clean, assets, parallel(nunjucks, style, code));
|
|
||||||
// const dev = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
|
|
||||||
const dev = series(clean, assets, parallel(nunjucks, style, code));
|
|
||||||
|
|
||||||
exports.lint = parallel(series(style, styleLint), series(code, codeLint));
|
|
||||||
// exports.validate = series(nunjucks, validate);
|
|
||||||
exports.assets = assets;
|
|
||||||
exports.build = build;
|
|
||||||
exports.dev = dev;
|
|
||||||
exports.dist = series(clean, assets, parallel(nunjucks, style), code2);
|
|
||||||
exports.default = series(dev, serve, overview);
|
|
||||||
|
|
||||||
exports.hello = hello;
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue