45f59f578b
- updated to 0.4.0 - corrected license for npm - update to gulp 4 - updated all dependencies - new and removed packages, see `package.json` - changed file structure, renamed `pages` to `screen` and new `data` folder - complete change of `gulpfile.js` with similar output
404 lines
10 KiB
JavaScript
404 lines
10 KiB
JavaScript
// Setup project
|
|
const hippie = {
|
|
brand: 'hippie',
|
|
jsFile: 'main',
|
|
dbFile: 'db'
|
|
}
|
|
|
|
// Gulp requirements
|
|
const { watch, series, parallel } = require('gulp');
|
|
const { src, dest } = require('gulp');
|
|
|
|
const fs = require('fs');
|
|
const del = require('del');
|
|
const plumber = require('gulp-plumber');
|
|
// const notify = require('gulp-notify');
|
|
|
|
const nunjucksRender = require('gulp-nunjucks-render');
|
|
const data = require('gulp-data');
|
|
const jsonConcat = require('gulp-json-concat');
|
|
const browserSync = require('browser-sync'), server = browserSync.create();
|
|
const sass = require('gulp-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 cache = 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 buffer = require('vinyl-buffer');
|
|
// const imagemin = require('gulp-imagemin');
|
|
|
|
// Paths to data
|
|
const input = {
|
|
root: 'source',
|
|
screens: 'source/screens/**/*.+(njk|html)',
|
|
templates: 'source/templates',
|
|
data: {
|
|
hippie: 'source/data/demo.json',
|
|
app: ['source/data/**/*.json', '!source/data/demo_data.json'],
|
|
watch: '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/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)'
|
|
},
|
|
vendor: 'vendor/**/*'
|
|
// watch: ['source/style/hippie/**/*.scss', 'source/style/**/*.scss', 'source/templates/**/*.+(html|njk)', 'source/screens/**/*.+(html|njk)']
|
|
};
|
|
|
|
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'
|
|
};
|
|
|
|
// 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 +'/**');
|
|
}
|
|
// cleans the build folder
|
|
// gulp.task('clean:dev', function() {
|
|
// return del.sync([
|
|
// output.style,
|
|
// output.screens,
|
|
// output.root+'/*.html'
|
|
// ]);
|
|
// });
|
|
|
|
// Automagically reload browsers
|
|
function reload(done) {
|
|
server.reload();
|
|
|
|
done();
|
|
}
|
|
|
|
// Concatenate JSON files
|
|
function json() {
|
|
return src(input.data.app)
|
|
.pipe(jsonConcat(jsonFile +'.json', function(data) {
|
|
return new Buffer(JSON.stringify(data));
|
|
}))
|
|
.pipe(gulp.dest(output.data));
|
|
}
|
|
|
|
// Transpile HTML
|
|
function nunjucks() {
|
|
return src(input.screens)
|
|
.pipe(plumber())
|
|
.pipe(data(function() {
|
|
let data = JSON.parse(fs.readFileSync(input.data.hippie));
|
|
object = {hippie, data};
|
|
return object;
|
|
}))
|
|
.pipe(nunjucksRender({
|
|
path: input.templates,
|
|
envOptions: {
|
|
trimBlocks: true
|
|
}
|
|
}))
|
|
.pipe(dest(output.root));
|
|
}
|
|
// templating engine
|
|
// gulp.task('nunjucks', function() {
|
|
// return gulp.src('source/screens/**/*.+(html|njk)')
|
|
// .pipe(plumbError('Error Running Nunjucks'))
|
|
// .pipe(data(function() {
|
|
// return JSON.parse(fs.readFileSync('./source/demo_data.json'))
|
|
// }))
|
|
// .pipe(nunjucks({
|
|
// path: output.templates,
|
|
// envOptions: {
|
|
// trimBlocks: true
|
|
// }
|
|
// }))
|
|
// .pipe(gulp.dest(output.root))
|
|
// .pipe(server.reload({
|
|
// stream: true
|
|
// }))
|
|
// });
|
|
|
|
// Serve files to the browser
|
|
function serve(done) {
|
|
server.init({
|
|
index: "demo.html",
|
|
open: false,
|
|
server: output.root
|
|
});
|
|
|
|
done();
|
|
}
|
|
// automagically reload browsers
|
|
// gulp.task('syncreload', function() {
|
|
// server.init({
|
|
// // ------------------------------------------------------------------------------
|
|
// // comment out the line below to get rid of the demo index page.
|
|
// // ------------------------------------------------------------------------------
|
|
// index: "demo.html",
|
|
// open: false,
|
|
// server: 'build'
|
|
// // online: false,
|
|
// // logLevel: "info",
|
|
// // proxy: "http://verser.vrt/virtual/",
|
|
// // watch: true,
|
|
// });
|
|
// });
|
|
|
|
// This is for the looks
|
|
function style() {
|
|
return src(input.style)
|
|
.pipe(plumber())
|
|
// .pipe(plumbError('STYLE problems'))
|
|
.pipe(sass({
|
|
includePaths: [input.vendor +'/**/*.s+(a|c)ss']
|
|
}))
|
|
.pipe(autoprefixer(['>= 4%', 'last 2 version']))
|
|
.pipe(dest(output.style))
|
|
.pipe(cleanCss())
|
|
.pipe(rename({
|
|
suffix: '.min'
|
|
}))
|
|
.pipe(dest(output.style));
|
|
}
|
|
// Linting
|
|
function styleLint() {
|
|
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();
|
|
});
|
|
|
|
return stream;
|
|
}
|
|
// this is for the looks
|
|
// gulp.task('sass', function() {
|
|
// return gulp.src(input.style)
|
|
// .pipe(plumbError('Error Running Sass'))
|
|
// .pipe(sourcemap.init())
|
|
// .pipe(sass({
|
|
// includePaths: [input.root+'/bower_components']
|
|
// }))
|
|
// .pipe(autoprefixer(['>= 4%', 'last 2 version']))
|
|
// // .pipe(cssnano())
|
|
// .pipe(sourcemap.write())
|
|
// .pipe(gulp.dest(output.style))
|
|
// .pipe(server.reload({
|
|
// stream: true
|
|
// }))
|
|
// });
|
|
// // linting ...
|
|
// gulp.task('lint:scss', function() {
|
|
// return gulp.src('source/style/**/*.scss')
|
|
// .pipe(plumbError('SASSLint Error'))
|
|
// .pipe(sasslint({
|
|
// configFile: '.sass-lint.yml'
|
|
// }))
|
|
// })
|
|
|
|
// Javascript for the win
|
|
function code(cb) {
|
|
pump([
|
|
src(input.code, { sourcemaps: true }),
|
|
cache('code'),
|
|
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)
|
|
.pipe(plumber())
|
|
.pipe(jshint())
|
|
.pipe(jshint.reporter('jshint-stylish'))
|
|
.pipe(jshint.reporter('fail', {
|
|
ignoreWarning: true,
|
|
ignoreInfo: true
|
|
}));
|
|
}
|
|
// and this is functionality
|
|
// gulp.task('js', function(cb) {
|
|
// pump([
|
|
// gulp.src(input.code),
|
|
// cache('code'),
|
|
// // jshint('.jshintrc'),
|
|
// // jshint.reporter('default'),
|
|
// sourcemap.init(),
|
|
// minify(),
|
|
// remember('code'),
|
|
// concat('all.min.js'),
|
|
// sourcemap.write(),
|
|
// gulp.dest(output.code),
|
|
// server.stream()
|
|
// ], cb);
|
|
// });
|
|
// // linting ...
|
|
// gulp.task('lint:js', function() {
|
|
// return gulp.src('source/code/**/*.js')
|
|
// .pipe(plumbError('JSHint Error'))
|
|
// .pipe(jshint())
|
|
// .pipe(jshint.reporter('jshint-stylish'))
|
|
// .pipe(jshint.reporter('fail', {
|
|
// ignoreWarning: true,
|
|
// ignoreInfo: true
|
|
// }))
|
|
// .pipe(jscs({
|
|
// fix: false,
|
|
// configPath: '.jscsrc'
|
|
// }))
|
|
// // .pipe(jscs.reporter());
|
|
// });
|
|
|
|
// 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(changed(output.art))
|
|
.pipe(dest(output.root))
|
|
|
|
// Assemble sprites
|
|
|
|
// Move images to the root folder
|
|
let images = src(input.art.images)
|
|
.pipe(changed(output.art))
|
|
.pipe(dest(output.art))
|
|
|
|
return merge(favicons, images)
|
|
}
|
|
// creates sprites from files in art/sprites folder
|
|
// gulp.task('sprites', function() {
|
|
// gulp.src('source/art/sprites/**/*')
|
|
// .pipe(spritesmith({
|
|
// cssName: '_sprites.scss',
|
|
// imgName: 'sprites.png',
|
|
// imgPath: '../art/sprites.png',
|
|
// // retinaSrcFilter: 'source/art/sprites/*@2x.png',
|
|
// // retinaImgName: 'sprites@2x.png',
|
|
// // retinaImgPath: '../art/sprites@2x.png'
|
|
// }))
|
|
// .pipe(gulpif('*.png', gulp.dest(output.art)))
|
|
// .pipe(gulpif('*.scss', gulp.dest('source/style/hippie/mixins')));
|
|
// });
|
|
// copy art files
|
|
// gulp.task('art', function() {
|
|
// return gulp.src(input.art)
|
|
// .pipe(plumbError())
|
|
// .pipe(gulp.dest(output.art))
|
|
// ;
|
|
// });
|
|
// copy additional files
|
|
// gulp.task('favicon', function() {
|
|
// return gulp.src('source/favicon.ico')
|
|
// .pipe(plumbError())
|
|
// .pipe(gulp.dest(output.root))
|
|
// ;
|
|
// });
|
|
|
|
// Gather dependencies for tools
|
|
function vendor() {
|
|
return src(input.vendor)
|
|
.pipe(plumber())
|
|
.pipe(dest(output.vendor))
|
|
}
|
|
// copy vendor files
|
|
// gulp.task('vendor', function() {
|
|
// return gulp.src(input.vendor)
|
|
// .pipe(plumbError())
|
|
// .pipe(gulp.dest(output.vendor))
|
|
// ;
|
|
// });
|
|
|
|
function overview() {
|
|
watch([input.screens, input.data.watch], 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.favicons, input.art.sprites, input.art.images], series(art, reload));
|
|
// watch(input.data.app, series(json, reload));
|
|
}
|
|
|
|
const assets = parallel(fonts, art, vendor);
|
|
const build = series(clean, assets, parallel(nunjucks, series(styleLint, style), series(codeLint, code)));
|
|
|
|
exports.lint = parallel(styleLint, codeLint);
|
|
exports.assets = assets;
|
|
exports.build = build;
|
|
exports.default = series(build, serve, overview);
|
|
// watch over changes and react
|
|
// split up into sub tasks
|
|
// gulp.task('watch-js', ['lint:js', 'js'], server.reload);
|
|
//
|
|
// gulp.task('overwatch', function() {
|
|
// gulp.watch('source/code/**/*.js', ['watch-js'])
|
|
// gulp.watch('source/style/**/*.+(scss|sass)', ['sass', 'lint:scss']);
|
|
// gulp.watch([
|
|
// 'source/templates/**/*',
|
|
// 'source/screens/**/*.+(html|njk)',
|
|
// 'source/demo_data.json'
|
|
// ], ['nunjucks']);
|
|
// gulp.watch('source/art/**/*', ['sprites']);
|
|
// });
|
|
//
|
|
//
|
|
// // The default task (called when you run `gulp` from cli)
|
|
// gulp.task('default', function(callback) {
|
|
// sequencer(
|
|
// 'clean:dev',
|
|
// ['sprites', 'art', 'vendor', 'favicon', 'lint:js', 'lint:scss'],
|
|
// ['sass', 'js', 'nunjucks'],
|
|
// ['syncreload', 'overwatch'],
|
|
// callback
|
|
// )
|
|
// });
|
|
|
|
// function plumbError(errTitle) {
|
|
// return plumber({
|
|
// errorHandler: notify.onError({
|
|
// // Customizing error title
|
|
// title: errTitle || "GULP GENERAL PROBLEM",
|
|
// message: "<%= error.message %>"
|
|
// })
|
|
// });
|
|
// }
|