diff --git a/.gitignore b/.gitignore index 598f5d3..82b17e2 100644 --- a/.gitignore +++ b/.gitignore @@ -5,9 +5,7 @@ reports/** source/art/*.* source/art/images/** source/art/sprites/** -source/style/hippie-style/mixins/_sprite.scss !source/art/**/demo/ -source/templates/data.json source/data/** !source/data/**/demo.json diff --git a/gulp/config.js b/gulp/config.js deleted file mode 100644 index 7a03f07..0000000 --- a/gulp/config.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/gulp/modules/plumber.js b/gulp/modules/plumber.js deleted file mode 100644 index cbb5dc9..0000000 --- a/gulp/modules/plumber.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/gulp/tasks/clean.js b/gulp/tasks/clean.js deleted file mode 100644 index 667f6a3..0000000 --- a/gulp/tasks/clean.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/gulp/tasks/hello.js b/gulp/tasks/hello.js deleted file mode 100644 index bf1ef7e..0000000 --- a/gulp/tasks/hello.js +++ /dev/null @@ -1,6 +0,0 @@ -function hello (cb) { - console.log('He Stephan', cb); - cb(); -} - -module.exports = hello; \ No newline at end of file diff --git a/gulp/tasks/sync.js b/gulp/tasks/sync.js deleted file mode 100644 index 5f65a4f..0000000 --- a/gulp/tasks/sync.js +++ /dev/null @@ -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 -}; \ No newline at end of file diff --git a/gulp/tasks/validate.js b/gulp/tasks/validate.js deleted file mode 100644 index 0293245..0000000 --- a/gulp/tasks/validate.js +++ /dev/null @@ -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; \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index f6cbecd..0000000 --- a/gulpfile.js +++ /dev/null @@ -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;