interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Update to modules

Browse source 
* npm update
* new gulp switch ofr user json
This commit is contained in:
Stephan 2019-07-07 11:38:27 +02:00
parent abeb843718
commit 4401761a6b
3 changed files with 907 additions and 1234 deletions
Download patch file Download diff file Expand all files Collapse all files

327
gulpfile.js
View file

@ -1,10 +1,10 @@
// Setup project // Setup project
const hippie = { const hippie = {
brand: 'hippie', brand: 'hippie',
jsFile: 'main', jsFile: 'main',
jsonFile: 'db', jsonFile: 'db',
index: 'demo.html', index: 'demo.html',
data: 'demo/data.json' data: 'demo/data.json'
} }
// Gulp requirements // Gulp requirements
const { watch, series, parallel } = require('gulp'); const { watch, series, parallel } = require('gulp');
@ -40,241 +40,244 @@ const babel = require('gulp-babel');
// Paths to data // Paths to data
const input = { const input = {
root: 'source', root: 'source',
screens: 'source/screens/**/*.+(njk|html)', screens: 'source/screens/**/*.+(njk|html)',
templates: 'source/templates', templates: 'source/templates',
data: 'source/data/**/*.json', data: 'source/data/**/*.json',
style: 'source/style/**/*.s+(a|c)ss', style: 'source/style/**/*.s+(a|c)ss',
code: [ code: [
'source/code/hippie/variables.js', 'source/code/hippie/variables.js',
'source/code/hippie/functions.js', 'source/code/hippie/functions.js',
'source/code/hippie/global.js', 'source/code/hippie/global.js',
'source/code/variables.js', 'source/code/variables.js',
'source/code/functions.js', 'source/code/functions.js',
'source/code/global.js', 'source/code/global.js',
'source/code/**/*.js', 'source/code/**/*.js',
'!source/vendor/**/*' '!source/vendor/**/*'
], ],
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*', fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
art: { art: {
favicons: 'source/art/favicons/**/*.+(ico|png)', favicons: 'source/art/favicons/**/*.+(ico|png)',
sprites: 'source/art/sprites/**/*.png', sprites: 'source/art/sprites/**/*.png',
images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)' images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)'
}, },
vendor: 'vendor/**/*', vendor: 'vendor/**/*',
demo: { demo: {
data: 'source/templates/demo/data.json' data: 'source/templates/demo/data.json'
} }
}; };
const output = { const output = {
root: 'build', root: 'build',
screens: 'build/**/*.html', screens: 'build/**/*.html',
data: 'build/json', data: 'build/json',
style: 'build/css', style: 'build/css',
code: 'build/js', code: 'build/js',
fonts: 'build/fonts', fonts: 'build/fonts',
art: 'build/art', art: 'build/art',
reports: 'reports', reports: 'reports',
vendor: 'build/vendor' vendor: 'build/vendor'
}; };
//Check for index file and deactivate demo content //Check for index file and deactivate demo content
if (fs.existsSync('source/screens/index.njk')) { if (fs.existsSync('source/screens/index.njk')) {
hippie.index = 'index.html'; hippie.index = 'index.html';
} }
if (fs.existsSync('source/templates/data.json')) { if (fs.existsSync('source/templates/data.json')) {
hippie.data = 'data.json'; hippie.data = 'data.json';
}
if (fs.existsSync('source/data/data.json')) {
input.data = ['source/data/**/*.json', '!source/data/demo.json'];
} }
// Create tasks // Create tasks
// Clean build folder // Clean build folder
function clean () { function clean () {
// You can use multiple globbing patterns as you would with `gulp.src`, // You can use multiple globbing patterns as you would with `gulp.src`,
// for example if you are using del 2.0 or above, return its promise // for example if you are using del 2.0 or above, return its promise
return del(output.root +'/**'); return del(output.root +'/**');
} }
// Automagically reload browsers // Automagically reload browsers
function reload (done) { function reload (done) {
server.reload(); server.reload();
done(); done();
} }
// Concatenate JSON files // Concatenate JSON files
function json () { function json () {
return src(input.data) return src(input.data)
.pipe(plumber()) .pipe(plumber())
.pipe(jsonConcat(hippie.jsonFile +'.json', function (data) { .pipe(jsonConcat(hippie.jsonFile +'.json', function (data) {
return new Buffer.from(JSON.stringify(data)); return new Buffer.from(JSON.stringify(data));
})) }))
.pipe(dest(output.data)); .pipe(dest(output.data));
} }
// Transpile HTML // Transpile HTML
function nunjucks () { function nunjucks () {
return src(input.screens) return src(input.screens)
.pipe(plumber()) .pipe(plumber())
.pipe(data(function () { .pipe(data(function () {
let data = JSON.parse(fs.readFileSync(input.templates +'/'+ hippie.data)); let data = JSON.parse(fs.readFileSync(input.templates +'/'+ hippie.data));
object = {hippie, data}; object = {hippie, data};
return object; return object;
})) }))
.pipe(nunjucksRender({ .pipe(nunjucksRender({
path: input.templates, path: input.templates,
envOptions: { envOptions: {
trimBlocks: true trimBlocks: true
} }
})) }))
.pipe(dest(output.root)); .pipe(dest(output.root));
} }
// Serve files to the browser // Serve files to the browser
function serve (done) { function serve (done) {
server.init({ server.init({
index: hippie.index, index: hippie.index,
open: false, open: false,
server: output.root server: output.root
}); });
done(); done();
} }
// This is for the looks // This is for the looks
function style () { function style () {
return src(input.style) return src(input.style)
// .pipe(plumbError('STYLE PROBLEM')) // .pipe(plumbError('STYLE PROBLEM'))
.pipe(sass({ .pipe(sass({
includePaths: [input.vendor +'/**/*.s+(a|c)ss'] includePaths: [input.vendor +'/**/*.s+(a|c)ss']
}).on('error', sass.logError)) }).on('error', sass.logError))
.pipe(autoprefixer(['>= 4%', 'last 2 version'])) .pipe(autoprefixer(['>= 4%', 'last 2 version']))
.pipe(dest(output.style)) .pipe(dest(output.style))
.pipe(cleanCss()) .pipe(cleanCss())
.pipe(rename({ .pipe(rename({
suffix: '.min' suffix: '.min'
})) }))
.pipe(dest(output.style)); .pipe(dest(output.style));
} }
// Linting // Linting
function styleLint () { function styleLint () {
var dir = output.reports; var dir = output.reports;
if (!fs.existsSync(dir)) { if (!fs.existsSync(dir)) {
fs.mkdirSync(dir); fs.mkdirSync(dir);
} }
var file = fs.createWriteStream(output.reports +'/sass-lint.html'); var file = fs.createWriteStream(output.reports +'/sass-lint.html');
var stream = src(input.style) var stream = src(input.style)
.pipe(plumber()) .pipe(plumber())
.pipe(sassLint({ .pipe(sassLint({
configFile: '.sasslintrc', configFile: '.sasslintrc',
files: { files: {
ignore: input.vendor +'/**/*.s+(a|c)ss' ignore: input.vendor +'/**/*.s+(a|c)ss'
} }
})) }))
.pipe(sassLint.format(file)); .pipe(sassLint.format(file));
stream.on('finish', function () { stream.on('finish', function () {
file.end(); file.end();
}); });
return stream; return stream;
} }
// Javascript for the win // Javascript for the win
function code (cb) { function code (cb) {
pump([ pump([
src(input.code, { src(input.code, {
sourcemaps: true, sourcemaps: true,
allowEmpty: true allowEmpty: true
}), }),
plumber(), plumber(),
// cache('code'), // cache('code'),
babel({ presets: ['@babel/env']}), babel({ presets: ['@babel/env']}),
concat(hippie.jsFile +'.js'), concat(hippie.jsFile +'.js'),
dest(output.code), dest(output.code),
uglify(), uglify(),
// remember('code'), // remember('code'),
rename({ rename({
suffix: '.min' suffix: '.min'
}), }),
dest(output.code, { sourcemaps: '.' }), dest(output.code, { sourcemaps: '.' }),
], cb); ], cb);
} }
// Linting // Linting
function codeLint () { function codeLint () {
return src(input.code, { allowEmpty: true }) return src(input.code, { allowEmpty: true })
.pipe(plumber()) .pipe(plumber())
.pipe(jshint()) .pipe(jshint())
.pipe(jshint.reporter('jshint-stylish')) .pipe(jshint.reporter('jshint-stylish'))
.pipe(jshint.reporter('fail', { .pipe(jshint.reporter('fail', {
ignoreWarning: true, ignoreWarning: true,
ignoreInfo: true ignoreInfo: true
})); }));
} }
// Fonts // Fonts
function fonts () { function fonts () {
return src(input.fonts) return src(input.fonts)
.pipe(plumber()) .pipe(plumber())
.pipe(dest(output.fonts)) .pipe(dest(output.fonts))
} }
// Add art // Add art
function art () { function art () {
// Move favicons to the root folder // Move favicons to the root folder
let favicons = src(input.art.favicons) let favicons = src(input.art.favicons)
.pipe(plumber()) .pipe(plumber())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(dest(output.root)) .pipe(dest(output.root))
// Move images to the root folder // Move images to the root folder
let images = src(input.art.images) let images = src(input.art.images)
.pipe(plumber()) .pipe(plumber())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(dest(output.art)); .pipe(dest(output.art));
return merge(favicons, images) return merge(favicons, images)
} }
function sprites () { function sprites () {
// Assemble sprites // Assemble sprites
let sprites = src(input.art.sprites) let sprites = src(input.art.sprites)
.pipe(plumber()) .pipe(plumber())
.pipe(changed(output.art)) .pipe(changed(output.art))
.pipe(spritesmith({ .pipe(spritesmith({
imgName: 'sprite.png', imgName: 'sprite.png',
imgPath: '../art/sprite.png', imgPath: '../art/sprite.png',
cssName: '_sprite.scss' cssName: '_sprite.scss'
})); }));
var imgStream = sprites.img var imgStream = sprites.img
// DEV: We must buffer our stream into a Buffer for `imagemin` // DEV: We must buffer our stream into a Buffer for `imagemin`
// .pipe(buffer()) // .pipe(buffer())
// .pipe(imagemin()) // .pipe(imagemin())
.pipe(dest(output.art)); .pipe(dest(output.art));
var cssStream = sprites.css var cssStream = sprites.css
.pipe(dest('source/style/hippie/mixins/')); .pipe(dest('source/style/hippie/mixins/'));
return merge(imgStream, cssStream); return merge(imgStream, cssStream);
} }
// Gather dependencies for tools // Gather dependencies for tools
function vendor () { function vendor () {
return src(input.vendor) return src(input.vendor)
.pipe(plumber()) .pipe(plumber())
.pipe(dest(output.vendor)) .pipe(dest(output.vendor))
} }
function overview () { function overview () {
watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload)); watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload));
watch(input.style, series(styleLint, style, reload)); watch(input.style, series(styleLint, style, reload));
watch(input.code, series(codeLint, code, reload)); watch(input.code, series(codeLint, code, reload));
watch(input.fonts, series(fonts, reload)); watch(input.fonts, series(fonts, reload));
watch(input.art.sprites, series(parallel(sprites, style), reload)); watch(input.art.sprites, series(parallel(sprites, style), reload));
watch([input.art.favicons, input.art.images], series(art, reload)); watch([input.art.favicons, input.art.images], series(art, reload));
watch(input.data, series(json, reload)); watch(input.data, series(json, reload));
} }
const assets = parallel(fonts, art, sprites, json, vendor); const assets = parallel(fonts, art, sprites, json, vendor);

1796
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

18
package.json
View file

@ -17,16 +17,16 @@
}, },
"homepage": "https://github.com/sthag/hippie#readme", "homepage": "https://github.com/sthag/hippie#readme",
"devDependencies": { "devDependencies": {
"@babel/core": "^7.4.0", "@babel/core": "^7.5.0",
"@babel/preset-env": "^7.4.3", "@babel/preset-env": "^7.5.0",
"browser-sync": "^2.26.3", "browser-sync": "^2.26.7",
"del": "^4.0.0", "del": "^4.1.1",
"gulp": "^4.0.0", "gulp": "^4.0.2",
"gulp-autoprefixer": "^6.0.0", "gulp-autoprefixer": "^6.1.0",
"gulp-babel": "^8.0.0-beta.2", "gulp-babel": "^8.0.0",
"gulp-cached": "^1.1.1", "gulp-cached": "^1.1.1",
"gulp-changed": "^3.2.0", "gulp-changed": "^3.2.0",
"gulp-clean-css": "^4.0.0", "gulp-clean-css": "^4.2.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-data": "^1.3.1", "gulp-data": "^1.3.1",
"gulp-if": "^2.0.2", "gulp-if": "^2.0.2",
@ -40,7 +40,7 @@
"gulp-sass": "^4.0.2", "gulp-sass": "^4.0.2",
"gulp-sass-lint": "^1.4.0", "gulp-sass-lint": "^1.4.0",
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp.spritesmith": "^6.9.0", "gulp.spritesmith": "^6.10.1",
"jshint": "^2.10.2", "jshint": "^2.10.2",
"jshint-stylish": "^2.2.1", "jshint-stylish": "^2.2.1",
"merge-stream": "^1.0.1", "merge-stream": "^1.0.1",