10 years later #1
3 changed files with 907 additions and 1234 deletions
327
gulpfile.js
327
gulpfile.js
|
|
@ -1,10 +1,10 @@
|
|||
// Setup project
|
||||
const hippie = {
|
||||
brand: 'hippie',
|
||||
jsFile: 'main',
|
||||
jsonFile: 'db',
|
||||
index: 'demo.html',
|
||||
data: 'demo/data.json'
|
||||
brand: 'hippie',
|
||||
jsFile: 'main',
|
||||
jsonFile: 'db',
|
||||
index: 'demo.html',
|
||||
data: 'demo/data.json'
|
||||
}
|
||||
// Gulp requirements
|
||||
const { watch, series, parallel } = require('gulp');
|
||||
|
|
@ -40,241 +40,244 @@ const babel = require('gulp-babel');
|
|||
|
||||
// Paths to data
|
||||
const input = {
|
||||
root: 'source',
|
||||
screens: 'source/screens/**/*.+(njk|html)',
|
||||
templates: 'source/templates',
|
||||
data: 'source/data/**/*.json',
|
||||
style: 'source/style/**/*.s+(a|c)ss',
|
||||
code: [
|
||||
'source/code/hippie/variables.js',
|
||||
'source/code/hippie/functions.js',
|
||||
'source/code/hippie/global.js',
|
||||
'source/code/variables.js',
|
||||
'source/code/functions.js',
|
||||
'source/code/global.js',
|
||||
'source/code/**/*.js',
|
||||
'!source/vendor/**/*'
|
||||
],
|
||||
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
|
||||
art: {
|
||||
favicons: 'source/art/favicons/**/*.+(ico|png)',
|
||||
sprites: 'source/art/sprites/**/*.png',
|
||||
images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)'
|
||||
},
|
||||
vendor: 'vendor/**/*',
|
||||
demo: {
|
||||
data: 'source/templates/demo/data.json'
|
||||
}
|
||||
root: 'source',
|
||||
screens: 'source/screens/**/*.+(njk|html)',
|
||||
templates: 'source/templates',
|
||||
data: 'source/data/**/*.json',
|
||||
style: 'source/style/**/*.s+(a|c)ss',
|
||||
code: [
|
||||
'source/code/hippie/variables.js',
|
||||
'source/code/hippie/functions.js',
|
||||
'source/code/hippie/global.js',
|
||||
'source/code/variables.js',
|
||||
'source/code/functions.js',
|
||||
'source/code/global.js',
|
||||
'source/code/**/*.js',
|
||||
'!source/vendor/**/*'
|
||||
],
|
||||
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
|
||||
art: {
|
||||
favicons: 'source/art/favicons/**/*.+(ico|png)',
|
||||
sprites: 'source/art/sprites/**/*.png',
|
||||
images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)'
|
||||
},
|
||||
vendor: 'vendor/**/*',
|
||||
demo: {
|
||||
data: 'source/templates/demo/data.json'
|
||||
}
|
||||
};
|
||||
|
||||
const output = {
|
||||
root: 'build',
|
||||
screens: 'build/**/*.html',
|
||||
data: 'build/json',
|
||||
style: 'build/css',
|
||||
code: 'build/js',
|
||||
fonts: 'build/fonts',
|
||||
art: 'build/art',
|
||||
reports: 'reports',
|
||||
vendor: 'build/vendor'
|
||||
root: 'build',
|
||||
screens: 'build/**/*.html',
|
||||
data: 'build/json',
|
||||
style: 'build/css',
|
||||
code: 'build/js',
|
||||
fonts: 'build/fonts',
|
||||
art: 'build/art',
|
||||
reports: 'reports',
|
||||
vendor: 'build/vendor'
|
||||
};
|
||||
|
||||
//Check for index file and deactivate demo content
|
||||
if (fs.existsSync('source/screens/index.njk')) {
|
||||
hippie.index = 'index.html';
|
||||
hippie.index = 'index.html';
|
||||
}
|
||||
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
|
||||
|
||||
// Clean build folder
|
||||
function clean () {
|
||||
// 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
|
||||
return del(output.root +'/**');
|
||||
// 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
|
||||
return del(output.root +'/**');
|
||||
}
|
||||
|
||||
// Automagically reload browsers
|
||||
function reload (done) {
|
||||
server.reload();
|
||||
server.reload();
|
||||
|
||||
done();
|
||||
done();
|
||||
}
|
||||
|
||||
// Concatenate JSON files
|
||||
function json () {
|
||||
return src(input.data)
|
||||
.pipe(plumber())
|
||||
.pipe(jsonConcat(hippie.jsonFile +'.json', function (data) {
|
||||
return new Buffer.from(JSON.stringify(data));
|
||||
}))
|
||||
.pipe(dest(output.data));
|
||||
return src(input.data)
|
||||
.pipe(plumber())
|
||||
.pipe(jsonConcat(hippie.jsonFile +'.json', function (data) {
|
||||
return new Buffer.from(JSON.stringify(data));
|
||||
}))
|
||||
.pipe(dest(output.data));
|
||||
}
|
||||
|
||||
// Transpile HTML
|
||||
function nunjucks () {
|
||||
return src(input.screens)
|
||||
.pipe(plumber())
|
||||
.pipe(data(function () {
|
||||
let data = JSON.parse(fs.readFileSync(input.templates +'/'+ hippie.data));
|
||||
object = {hippie, data};
|
||||
return object;
|
||||
}))
|
||||
.pipe(plumber())
|
||||
.pipe(data(function () {
|
||||
let data = JSON.parse(fs.readFileSync(input.templates +'/'+ hippie.data));
|
||||
object = {hippie, data};
|
||||
return object;
|
||||
}))
|
||||
.pipe(nunjucksRender({
|
||||
path: input.templates,
|
||||
envOptions: {
|
||||
trimBlocks: true
|
||||
}
|
||||
envOptions: {
|
||||
trimBlocks: true
|
||||
}
|
||||
}))
|
||||
.pipe(dest(output.root));
|
||||
}
|
||||
|
||||
// Serve files to the browser
|
||||
function serve (done) {
|
||||
server.init({
|
||||
index: hippie.index,
|
||||
open: false,
|
||||
server: output.root
|
||||
});
|
||||
server.init({
|
||||
index: hippie.index,
|
||||
open: false,
|
||||
server: output.root
|
||||
});
|
||||
|
||||
done();
|
||||
done();
|
||||
}
|
||||
|
||||
// This is for the looks
|
||||
function style () {
|
||||
return src(input.style)
|
||||
// .pipe(plumbError('STYLE PROBLEM'))
|
||||
return src(input.style)
|
||||
// .pipe(plumbError('STYLE PROBLEM'))
|
||||
.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));
|
||||
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 () {
|
||||
var dir = output.reports;
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir);
|
||||
}
|
||||
var file = fs.createWriteStream(output.reports +'/sass-lint.html');
|
||||
var stream = src(input.style)
|
||||
.pipe(plumber())
|
||||
.pipe(sassLint({
|
||||
configFile: '.sasslintrc',
|
||||
files: {
|
||||
ignore: input.vendor +'/**/*.s+(a|c)ss'
|
||||
}
|
||||
}))
|
||||
.pipe(sassLint.format(file));
|
||||
var dir = output.reports;
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir);
|
||||
}
|
||||
var file = fs.createWriteStream(output.reports +'/sass-lint.html');
|
||||
var 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();
|
||||
});
|
||||
stream.on('finish', function () {
|
||||
file.end();
|
||||
});
|
||||
|
||||
return stream;
|
||||
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(hippie.jsFile +'.js'),
|
||||
dest(output.code),
|
||||
uglify(),
|
||||
// remember('code'),
|
||||
rename({
|
||||
suffix: '.min'
|
||||
}),
|
||||
dest(output.code, { sourcemaps: '.' }),
|
||||
], cb);
|
||||
pump([
|
||||
src(input.code, {
|
||||
sourcemaps: true,
|
||||
allowEmpty: true
|
||||
}),
|
||||
plumber(),
|
||||
// cache('code'),
|
||||
babel({ presets: ['@babel/env']}),
|
||||
concat(hippie.jsFile +'.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
|
||||
}));
|
||||
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))
|
||||
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(output.root))
|
||||
// Move favicons to the root folder
|
||||
let favicons = src(input.art.favicons)
|
||||
.pipe(plumber())
|
||||
.pipe(changed(output.art))
|
||||
.pipe(dest(output.root))
|
||||
|
||||
// Move images to the root folder
|
||||
let images = src(input.art.images)
|
||||
.pipe(plumber())
|
||||
.pipe(changed(output.art))
|
||||
.pipe(dest(output.art));
|
||||
// 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)
|
||||
return merge(favicons, images)
|
||||
}
|
||||
|
||||
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'
|
||||
}));
|
||||
// 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'
|
||||
}));
|
||||
|
||||
var imgStream = sprites.img
|
||||
// DEV: We must buffer our stream into a Buffer for `imagemin`
|
||||
// .pipe(buffer())
|
||||
// .pipe(imagemin())
|
||||
.pipe(dest(output.art));
|
||||
var imgStream = sprites.img
|
||||
// DEV: We must buffer our stream into a Buffer for `imagemin`
|
||||
// .pipe(buffer())
|
||||
// .pipe(imagemin())
|
||||
.pipe(dest(output.art));
|
||||
|
||||
var cssStream = sprites.css
|
||||
.pipe(dest('source/style/hippie/mixins/'));
|
||||
var cssStream = sprites.css
|
||||
.pipe(dest('source/style/hippie/mixins/'));
|
||||
|
||||
return merge(imgStream, cssStream);
|
||||
return merge(imgStream, cssStream);
|
||||
}
|
||||
|
||||
// Gather dependencies for tools
|
||||
function vendor () {
|
||||
return src(input.vendor)
|
||||
.pipe(plumber())
|
||||
.pipe(dest(output.vendor))
|
||||
return src(input.vendor)
|
||||
.pipe(plumber())
|
||||
.pipe(dest(output.vendor))
|
||||
}
|
||||
|
||||
function overview () {
|
||||
watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload));
|
||||
watch(input.style, series(styleLint, style, reload));
|
||||
watch(input.code, series(codeLint, code, reload));
|
||||
watch(input.fonts, series(fonts, reload));
|
||||
watch(input.art.sprites, series(parallel(sprites, style), reload));
|
||||
watch([input.art.favicons, input.art.images], series(art, reload));
|
||||
watch(input.data, series(json, reload));
|
||||
watch([input.templates, input.screens, input.demo.data], series(nunjucks, reload));
|
||||
watch(input.style, series(styleLint, style, reload));
|
||||
watch(input.code, series(codeLint, code, reload));
|
||||
watch(input.fonts, series(fonts, reload));
|
||||
watch(input.art.sprites, series(parallel(sprites, style), reload));
|
||||
watch([input.art.favicons, input.art.images], series(art, reload));
|
||||
watch(input.data, series(json, reload));
|
||||
}
|
||||
|
||||
const assets = parallel(fonts, art, sprites, json, vendor);
|
||||
|
|
|
|||
1796
package-lock.json
generated
1796
package-lock.json
generated
File diff suppressed because it is too large
Load diff
18
package.json
18
package.json
|
|
@ -17,16 +17,16 @@
|
|||
},
|
||||
"homepage": "https://github.com/sthag/hippie#readme",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.0",
|
||||
"@babel/preset-env": "^7.4.3",
|
||||
"browser-sync": "^2.26.3",
|
||||
"del": "^4.0.0",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-autoprefixer": "^6.0.0",
|
||||
"gulp-babel": "^8.0.0-beta.2",
|
||||
"@babel/core": "^7.5.0",
|
||||
"@babel/preset-env": "^7.5.0",
|
||||
"browser-sync": "^2.26.7",
|
||||
"del": "^4.1.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-autoprefixer": "^6.1.0",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-cached": "^1.1.1",
|
||||
"gulp-changed": "^3.2.0",
|
||||
"gulp-clean-css": "^4.0.0",
|
||||
"gulp-clean-css": "^4.2.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-data": "^1.3.1",
|
||||
"gulp-if": "^2.0.2",
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
"gulp-sass": "^4.0.2",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp.spritesmith": "^6.9.0",
|
||||
"gulp.spritesmith": "^6.10.1",
|
||||
"jshint": "^2.10.2",
|
||||
"jshint-stylish": "^2.2.1",
|
||||
"merge-stream": "^1.0.1",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue